How to get two column float left div layout to word wrap?

Question

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 resize the browser to be skinnier, then it won't word wrap the text in the view div at all. It will just un-float the view div and put it below the nav div.

How can I make the text in the view div word wrap instead of un-float to under the nav div?

Marco Miltenburg Marco Miltenburg · Accepted Answer · 2011-11-04T22:57:18

You want your .nav div to be 200 pixels wide and I assume you want 46 pixels between the .nav div and the .view div, at least that's what I understand from the margin-right:46px on the .nav div. You don't need to float the .view div. In fact, you can't because if it's floated, the only way to get it next to the .nav div is to set a width (otherwise it will default to 100% of it's parent). But you can't set the width because you want it to grow and shrink with the size of the browser.

So floating is not an option but also not necessary. The .nav div is floated and because of this the .view div will appear underneath the .nav div (because floated div's are taken out of the flow). To make the .view div appear next to the .nav div you simply set a margin-left of 246 pixels (200px width of .nav + 46px margin).

.nav {
    width:200px;
    float:left;
}

.view {
    margin-left:246px;
}

How to get two column float left div layout to word wrap?

2 Answers