web technology is a way of life
There’s a basic issue with placing floating <div>s or any floating element for that matter in a parent <div>, the parent looses all sense of height and becomes essentially invisible. The parent can now no longer have a background, border or any defining style that would show up behind and around the children elements. But with a bit of CSS you can remedy that situation. Look at how the Example After heading is pushed around because the <div> isn’t cooperating nicely.
HTML:
<div id="Footer">
<a href="/blog/">Home</a>
<a href="/blog/contact/">Contact</a>
</div>
CSS:
#Footer {
background: yellow;
border: 1px solid blue;
}
#Footer A {
float: left;
width: 100px;
}
#Footer:after {
content: "";
display: block;
height: 100%;
clear: both;
}
Example Before:
Example After:
The Livescribe Pulse smartpen gets an app store. This little pen is quite amazing, and it just shows that the business model of an app store is already changing the market for every type of electronic device. So when does my…
The Ghostwire (DSiWare) game looks great and reminds me a lot of Fatal Frame.
FloorPlanner is an interesting bit of software built in Flash that allows you design your home in 2D and view in 3D.
The new Stargate Universe [Philosphocal] teaser looks awesome. I stopped watching Atlantis a bit ago because it got boring, I hope this pumps up the energy as BSG did. It has Lou Diamond Philips and Ming-Na in it, that could make…
Here’s a plethora of well designed RSS Feed icons for free!
3 Responses for "CSS: Getting Floating Content to be Wrapped Up Nicely"
hmm, I used to put a div after the last element;
Home
Contact
with clearDiv in css:
.clearDiv {
float:none;
clear:both;
}
And sure, your method looks more legit way of doing this. It works in IE6?
I put a div element with class=”clearDiv” after Contact, but it didn’t show up in the comments.
Wordpress will parse out some HTML for security in comments.