PDA

View Full Version : How should I position this div?



TogetherWeRise
May 21st, 2011, 10:55 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Untitled Document</title>

<style>
/* layout */
#wrapper {
width: 700px;
margin: 0px auto;
border: 1px solid;
}


#sidebar {
width: 150px;
border: 1px solid;
}

#navbar {
flaot: left;
}

#main{
float: right;
}





</style>
</head>

<body>
<div id="wrapper">



<div id="sidebar">

<ul id="navbar">

<li><a href="#">Home</a></li>
<li><a href="#">Rates</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>

</ul>

</div>

<div id="main">
<p> Main Content Here </p>
</div>

</div>
</body>
</html>



I float the "sidebar" div to the left of the wrapper, and that positions it fine. I now want to position the "main" div to the RIGHT of the wrapper, but when i float it, it falls outside of the whole wrapper div.

How do i fix this so that the "main" div floats properly to the right of the wrapper.

Thanks

AndrewGSW
May 21st, 2011, 11:21 PM
Apart form the mis-spelling of float :p I assume you meant to float the 'sidebar' rather than the 'navbar' (as indicated in your post). Although you could also float the navbar within the sidebar if you want.

Once you've added float to the sidebar you will also need to add another 'div' after your main div with the css property 'clear: both;' - otherwise the wrapper div will collapse and have no height.

Or, if you prefer, you could give your wrapper a height.

TogetherWeRise
May 21st, 2011, 11:28 PM
Why does the wrapper div collapse? Is there a way i can stop the collapse without having to add another div and without setting a height?

AndrewGSW
May 21st, 2011, 11:39 PM
The collapsing of a div containing floated elements is a known issue.

You could float the wrapper div as well to resolve this but then you'll need other css properties (and perhaps another div ?) to get it centred again.

Or add 'overflow: auto' to the wrapper. You might then also need to add 'overflow: hidden' to its children to prevent scrollbars appearing within them.