layout of nested elements with float

Question

I'm trying to create the layout shown in the image. With the help of a partial answer, the last problem seems to be "items in a column". The block is in position, however the list of items does not start from the top. And removing margin-top from the ul doesn't help. I think it is affected by the paragraph with "title" "user".

See the latest results in the fiddle https://jsfiddle.net/L0rzj4t8/2 for this HTML content.

So, how can I achieve the layout in the image?

<div id="banner" style="background:grey">

<div id="left_block" style="float:left;width:140px">
    <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" style="margin-left:150px;width:400px;">
    <p id="center_top">
        <span style="float:left">A Title</span>
        <span style="float:right">user name</span>
    </p>
    <ul id="center_bottom" style="list-style:none; float:left; width:100%">
    <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" style="margin-left:550px;width:150px;">
    <ul id="items" style="list-style:none;padding-top:0px">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
</div>

</div>

Answer 1

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)

Answer 2

you can increase #center_bottom width by percentage or px