Posts Tagged ‘undefined space’

Learn the Basics of Floating in CSS

The float declaration is used to put elements beside one another such as several div’s. A common technique is for, say a blog, you have your content, and you have your sidebar on the right. Each one of those is their own container or div. To make them line up against each other rather than having the content on the top and the sidebar below it we need to float these div’s. Let’s start out by setting up the divs, with some dummy content we may see in a traditional blog.

So what this html is saying is that we have a container (the div “wrapper”) which has two divs inside of that. A left content div and a right content div. The left content has some dummy content and the right has an unordered list with some links. Lastly we have a div with a clear class, this will stop any elements from popping up next to floated elements Let’s modify this with some CSS.

We give our wrapper a width and center it. Next we set the width of our .leftcontent div and give it a little padding. Next we float that div to the left. This means that it will tell all other divs to ignore any undefined space around it. So since the width of .leftcontent is only 770px (compensate for padding) the .rightcontent div will pop up and line up horizontally with .leftcontent because it’s width is 210px which is less than the wrappers width which they are both contained in. Lastly we must clear the float so that no other elements try to pop up next to the divs that we want to float. The clear class is fairly straightforward, it is clearing the float so that nothing else “floats” up on the page. For this example I cleared left, you could also use the both value which would make your clear class more universal but is not needed for this example. Once you have done this your page should look similar to this.

Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)