Question

Hi im trying to put 2 DIV side by side

+--------------------------------+ +--------------------------------+
|                                | |                                |
|                                | |                                |
|            400px               | |            355px               |
|                                | |                                |
|                                | |                                |
|                                | |                                |
+--------------------------------+ +--------------------------------+

.header{
    background-image: url('../img/button-bg.png');
    padding: 0px;
    background-repeat: repeat-x;
    height: 36px;
}



.div1
{
    width: 400px;
    float: left;
    margin-right: 10px;
}


.div2
{

    width:355px;
}

I need both DIV to be able to clear the header so I can’t use absolute position

I tried the float left attribute, but when the page is too small the other div is going under the first div. I was wondering if it was possible to do so.

edit : When the screen is too small, I want the horizontal bar to appear

Answer 1

You can use display:inline-block; on the divs and white-space: nowrap; on their parent.

.header div{
    display:inline-block;
    vertical-align:top;
}
.header{
    white-space: nowrap;
    background-image: url('../img/button-bg.png');
    padding: 0px;
    background-repeat: repeat-x;
    height: 36px;
}
.div1{
    width: 400px;
    margin-right: 10px;
}    
.div2{
    width:355px;
}

http://jsfiddle.net/mowglisanu/a6YNY/