How to get two columns float left div layout for word wrap?
My HTML looks like this:
<body> <div class = "nav"> <ul> ... </ul> </div> <div class = "view"> this text won't wrap if I resize browser </div> </body>
and my CSS looks like this:
.nav {
width: 200px;
float: left;
font-weight: bold;
margin-right: 46px;
}
.nav a {
font-weight: normal;
}
.nav ul {
padding: 0;
margin: 0;
list-style-type: none;
text-align: right;
}
.nav ul li {
margin-bottom: 7px;
}
.view {
float: left;
} If I resized the browser to be more school-like, then it will not completely wrap text in div divs. It just won’t float in the div div and place it below the navigation div.
How can I make the text in a wrapper div div instead of "un-float" under the "navigation div"?
You want your .nav div .nav be 200 pixels wide, and I assume you want 46 pixels between the .nav div and the .view div, at least what I understand from margin-right:46px on the .nav div . You do not need to float div .view . Actually, you cannot, because if it is floating, the only way to get it next to the div .nav is to set the width (otherwise, by default it will be equal to 100% of its parent). But you cannot set the width because you want it to increase and decrease with the size of the browser.
Thus, swimming is not an option, but also optional. The div .nav , and because of this, the div .view appears under the div .nav (because the floated div is pulled from the stream). To make the div .view appear next to the div .nav , you simply set the margin-left 246 pixels (200px wide from .nav + 46px margin).
.nav { width:200px; float:left; } .view { margin-left:246px; } You need to set the width on the floating elements, otherwise they will have a width of up to 100% of their containers.
You should also clear the floating point containers .