Question

I have a problem where I need to line up some DIVs. I made a fiddle page and would appreciate some advice. Here’s the fiddle

What I would like is for the a,b,c and d DIVs to appear within the yellow band and to the right of the DIV with test1.

I tried a lot of different combinations and I am running out of ideas. Sandeep gave me some big help. It’s now almost fixed but the grey box is still low.

Can anyone suggest something.

Thank you

<div class="header_left">
    <div class="header_logo">
        <div class="header_text">
            <div class="header_text1">Test1</div>
        </div>
    </div>
    <div class="hdr_info">
        <div id="info_left">
            <div id="info_left_top">
                a</div>
            <div id="info_left_btm">
                b</div>
        </div>
        <div id="info_right">
            <div id="info_right_top">
                c</div>
            <div id="info_right_btm">
                d</div>
        </div>
    </div>
</div>

div.header_left { background: yellow; height: 50px;}

div.header_logo { height:50px; display:inline-block; padding:0px 10px 0px 8px; background: #ABABAB; }
div.hdr_info    { height:50px; display:inline-block; padding:0px 10px 0px 8px; background: #DDFF00; }

div.header_text1 { display: inline-block; }

#info_left { display:inline-block; height: 50px; }
#info_right { display:inline-block; height: 50px; }

#info_left_top { background: #772299; }
#info_left_btm { background: #2299FF; }
#info_right_top { background: #FF2299; }
#info_right_btm { background: #FF99FF; }

Answer 1

Just change this

div.header_logo
{
height:50px;
display:inline-block;
padding:0px 10px 0px 8px;
background: #ABABAB;
float: left;

here is the fiddle

Fiddle