First page (code example):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex Layout</title>
<style>
body {
margin: 0;
}
.page-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
height: 100vh
}
.page-wrapper > * {
background-color: #f2f2f2;
width: 48%;
}
@media screen and (max-width: 768px) {
.page-wrapper > * {
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div class="page-wrapper">
<main class="main-content">
<h3>Main content goes here</h3>
</main>
<!-- end main-content -->
<aside class="sidebar-content">
<h3>Sidebar content goes here</h3>
</aside>
<!-- end sidebar-content -->
</div>
<!-- end page-wrapper -->
</body>
</html>
Second page (code example): Nothing much changed, apart from a couple of css styles:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex Layout</title>
<style>
body {
margin: 0;
}
.page-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
height: 100vh
}
.main-content {
background-color: #f2f2f2;
width: 59%;
}
.sidebar-content {
background-color: #f2f2f2;
width: 39%;
}
@media screen and (max-width: 768px) {
.page-wrapper > * {
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div class="page-wrapper">
<main class="main-content">
<h3>Main content goes here</h3>
</main>
<!-- end main-content -->
<aside class="sidebar-content">
<h3>Sidebar content goes here</h3>
</aside>
<!-- end sidebar-content -->
</div>
<!-- end page-wrapper -->
</body>
</html>
AdChoices