Get rid clear:left; div between the content and the sidebar.
Thread Starter
cbmark
(@cbmark)
Hiya esmi I have removed it which has moved the sidebar which is great just a problem with the container not expanding down now any ideas? I have updated the site so you can see what’s happening.
Mark
Try adding a clear:both; just before the footer. Or use something like:
#container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Thread Starter
cbmark
(@cbmark)
Wow, cheers so much just placed that code in works a treat! Thanks so much esmi! Can I ask a stupid question though what exactly is this doing Im assuming its adding a div after container with a content of . clearing it and hiding it? Just wondering how on earth does that fix it?
Mark
It’s not actually adding anything to the markup. It’s making use of a pseudo CSS selector :after. This selector (which is similar to the more common :hover selector) allows you style whatever comes immediately after your chosen element (in this case, the container block). We then use another trick – CSS generated content – which allows us to display pure CSS content (usually just a few characters).
So we use CSS to add a single full stop character after the container div. We make sure that this CSS content is displayed as a block level element so it can be used to clear any remaining floats. Then we hide it.
End result – the container div is drawn down below any other floated elements inside it.
Thread Starter
cbmark
(@cbmark)
Nice! Shall try and store that in memory (and bookmark this) for future reference! Thanks for the explanation too, amazing what little tricks there are!
Thanks esmi + rep (if only there was a plus rep button!)
Mark
