Reputation: 45
How would I go about if I'm aiming to use pure HTML and CSS to achieve the results as shown in the below image?
I need to rearrange the stacked elements for larger screens, I've tried with:
#2: float: left
#1: display: inline-block
#3: float: right
but that didn't do the trick. Anyone can point me in the right direction?
Upvotes: 1
Views: 93
Reputation: 1935
For the easiest and neatest result, and also, to make use of the latest technology and trend - use flexbox. Specifically, follow implementation of the Holy Grail with flexbox. For example - expand the below snippet, run it and resize the window:
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
background-color:orange;
order:1;
}
.HolyGrail-content, .HolyGrail-ads {
/* 12em is the width of the columns */
flex: 0 0 300px;
}
.HolyGrail-nav {
/* put the nav on the left */
flex:1;
order: -1;
background-color:green;
}
.HolyGrail-ads {
background-color:red;
order:3;
}
.HolyGrail,
.HolyGrail-body {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.HolyGrail-body {
flex-direction: row;
flex: 1;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-content, .HolyGrail-ads {
/* 12em is the width of the columns */
flex: 0 0 300px;
}
.HolyGrail-nav {
order:2;
}
}
<body class="HolyGrail">
<div class="HolyGrail-body">
<main class="HolyGrail-content">…</main>
<nav class="HolyGrail-nav">…</nav>
<aside class="HolyGrail-ads">…</aside>
</div>
<footer>…</footer>
</body>
Upvotes: 2