I’m having some issues with a simple sidebar. With the browser at full size, it should be 320px wide, and the main content should resize to fit the 960px container. For some reason, the sidebar is getting pushed to the bottom. Please advise. Thank you.
With your current setup (with main and sidebar floated, you’d have to set a width for the main area to make room for the sidebar. Otherwise #main will be the default full width.
The standard way to do what you want is to unfloat the main section and give it a right margin large enough to make room for the sidebar. But then you’d have to place the sidebar div above the main div in the HTML.
Other options are to use table display or these days flex layout. There are also more complex workarounds from yesteryear, but I wouldn’t go for them any more.
Oh—actually there is a problem with this. I set my sidebar to shift below the main content and expand to 100% width, but by moving the sidebar HTML above the main content, now it expands on top of the main content! What’s the alternative to this?
I got rid of it, at least for now. The description should be pretty self explanatory, though. If there are two DIVs, the first of which is a sidebar, and then the sidebar turns into a 100% width block element at mobile dimensions, the sidebar will end up coming before the main content.
As others have said display:table-cell is the way to go and the method I prefer these days where ie8+ support only is required (you can always float for ie7 and under if needed anyway)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1{text-align:center;}
#container-page {
margin: 0 auto;
padding: 50px 0;
max-width: 960px;
width:100%;
display:table;
text-align: left;
}
#main,#sidebar {
width:auto;
display:block;
}
@media screen and (min-width: 640px) {
#main,#sidebar {
display:table-cell;
vertical-align:top;
}
#sidebar {width: 320px;}
}
</style>
</head>
<body>
<h1>IE8+</h1>
<div id="container-page">
<div id="main">
<h2>Main section</h2>
<p>Lorem ipsum content lorem ipsum content lorem ipsum content lorem ipsum content lorem ipsum content lorem ipsum content lorem ipsum content lorem ipsum content </p>
</div>
<div id="sidebar">
<h3>Sidebar</h3>
<p>Lorem ipsum content lorem ipsum content lorem ipsum content lorem ipsum content lorem ipsum content lorem ipsum content lorem ipsum content lorem ipsum content </p>
</div>
</div>
</body>
</html>
I’m finding this method so much more robust than floats and has the benefit of normal source order also.
Design your own wearbles comparison by selecting up to 6 wearables.
You can also select one of our popular comparisons, organized by category, brand, or other specification.
If you’d like to compare a wearable that does not already appear in our collection, please let us know.
?