CODEWITHSUNDEEP
csshtml
Benchy
Benchy

Reputation: 45

Placing 2 DIV side by side even if the page is too small

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

Upvotes: 2

Views: 1690

Answers (3)

Musa
Musa

Reputation: 97672

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/

Upvotes: 3

Uğur Gümüşhan
Uğur Gümüşhan

Reputation: 2543

You should use a table (or two spans, side by side) if you don't want your elements to float. Firstly, learn what inline and block elements are. div is a block element and span is an inline element. div is to use as a block element. it's designed to act as a block element. it's supposed to have full width unless you specify otherwise. span is an inline element and it allows other elements to be next to itself. you can search "inline vs block html" for more info

to see the scroll bars, set the overflow css attribute of the container of these elements to scroll. http://www.w3schools.com/cssref/pr_pos_overflow.asp

Upvotes: -2

Eric
Eric

Reputation: 97571

Yes, it is possible:

<div class="outer">
    <div></div>
    <div></div>
</div>

.outer {
    overflow: hidden;
}
.outer div {
    float: left;
    width: 50%;
    height: 100px;
}

Upvotes: 4

Related Questions