layout of nested elements with float - css

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">Option 1<li>
<li class="option">Option 2<li>
<li class="option">Option 3<li>
<li class="option">Option 4<li>
<li class="option">Option 5<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">Option 1</li>
<li class="option">Option 2</li>
<li class="option">Option 3</li>
<li class="option">Option 4</li>
<li class="option">Option 5</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