Nested Div Elements Wrapping with Float Left

Nested div elements wrapping with float left

Demo

  white-space: nowrap;

Add this property to your container.

Try to avoid float properties. Use display: inline-block; in this case.

how to make a div to wrap two float divs inside?

It's a common problem when you have two floats inside a block. The best way of fixing it is using clear:both after the second div.

<div style="display: block; clear: both;"></div>

It should force the container to be the correct height.

CSS non-wrapping floating divs

Use display: inline-block instead of floatand give the container white-space: nowrap.

div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}
div#sub > div#ranking > div.player {
    display: inline-block;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

Here an example: http://jsfiddle.net/D5hUu/3/

Why everything word-wrap inside an absolute element nested inside a float or inline-block element

An element with position:absolute has a shrink-to-fit behavior. you can notice the same think if you write a long sentence and it will break on each word:

<div style="display:inline-block;position: relative">
  <div style="position:absolute">
    aaaa bbb ccc ddd  eee fff
  </div>
</div>

layout of nested elements with float

Using display table property you can achieve this structure. Please find the below code and the demo link.
Note : your center bottom LI is not closed proper.

CSS

#banner{
        background:#696969;
        display: table;
        margin: 0 auto;
        border-spacing: 10px;
        border-collapse: separate;
    }
    #left_block{
        width:140px;
        display: table-cell;
        vertical-align: top;
        border: 2px solid #000;
        padding: 10px;
    }
    #left_block ul{
        padding: 0;
        margin: 0;
    }
    #center_block{
        width:400px;
        display: table-cell;
        vertical-align: top;
        border: 2px solid #000;
        padding: 10px;
    }
    #rigth_block{
        width:150px;
        display: table-cell;
        vertical-align: top;
        border: 2px solid #000;
        padding: 10px;
    }
    #center_bottom{
        list-style:none; 
        width:100%;
        padding: 0;
        margin: 0;
        display: inline-block;
        text-align: center;
    }
    .option {
        display:inline; 
        padding-left:4px;
        padding-right:4px;
    }
    .clear{
        clear:both;
    }
    #items{
        list-style:none;
        padding: 0;
        margin: 0;
    }

HTML

<div id="banner">

    <div id="left_block">
        <ul style="list-style:none">
        <li><img border="0" alt="a logo" style="height:60px;width:60px"></li>
        <li>A logo</li>
        <li><input id="find" type="text" size="12"></li>
        </ul>
    </div>

    <div id="center_block">
        <p id="center_top">
            <span style="float:left">A Title</span>
            <span style="float:right">user name</span>
        </p>
        <ul id="center_bottom">
            <li class="option"><a href="">Option 1</a></li>
            <li class="option"><a href="">Option 2</a></li>
            <li class="option"><a href="">Option 3</a></li>
            <li class="option"><a href="">Option 4</a></li>
            <li class="option"><a href="">Option 5</a></li>
        </ul>
    </div>

    <div id="rigth_block">
        <ul id="items">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>
    </div>
</div>

DEMO
(updated the jsfiddle link to a recent version.koriander)

How do I make this nested div to show up on top right corner and make text wrap around it?

Like this: jsFiddle. Make the child div appear first as a child of childDiv2 and keep the CSS as-is.

Prevent floated divs from wrapping to new line

This should be all you need.

    .float-wrap {      /* 816 = <number of floats> * (<float width> + 2 * <float border width>) */      width: 816px;      border: 1px solid;      /* causes .float-wrap's height to match its child divs */      overflow: auto;    }    .left-floater {      width: 100px;      height: 100px;      border: 1px solid;      float: left;    }    .outer {      overflow-x: scroll;    }

<div class="outer">  <div class="float-wrap">    <div class="left-floater">      One    </div>    <div class="left-floater">      Two    </div>    <div class="left-floater">      Three    </div>    <div class="left-floater">      I should be to the <s>left</s> right of "Three"    </div>    <div class="left-floater">      I float.    </div>    <div class="left-floater">      I float.    </div>    <div class="left-floater">      I float.    </div>    <div class="left-floater">      I float.    </div>  </div></div>

---

Related Topics