CODEWITHSUNDEEP
htmlcss
user2646877
user2646877

Reputation: 9

Floating divs goes down when page is resized

I have a main div, and inside it..I have 3 divs

In normal view it works perfect i need the exact samething but for some reason if i resize my browser one div at the right side will float down i figure the reason for it but i don't know how to resolve it . floating down of div is due to the border i have give to the div but i have given the borders with perfect calculations but i don't know why still it happens

HTML

<div class="box">
    <div class="box_top"></div>
    <div class="box_left"></div>
    <div class="box_right"></div>
</div>

CSS

.box{
    width:500px;
    height:300px;
}
.box_top{
    width:500px;
    height:49px;
    border-bottom:rgb(239,239,239) 1px solid;
    background-color:#636;
}
.box_left{
    width: 249px;
    height: 250px;
    float:left;
    background-color: #093;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #FFF;   
}
.box_right{
    width:250px;
    height:250px;
    float:left;
    background-color:#006;
}

please go hear for the issue : http://jsfiddle.net/gtczu/

Upvotes: 0

Views: 1673

Answers (3)

RbG
RbG

Reputation: 3203

this is because the total width of all your inner divs get larger than the view port size when it is resized....thats why the last div is floating down when resized.try to express all width in percentage..i think this trick may work

Upvotes: 0

Jacques
Jacques

Reputation: 3774

It's because you are floating left without having a width set on the container. I would set a min-width or just a width on the containing div.

Upvotes: 1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Add min-width: 500px; to .box, when the browser window gets smaller than 500px, the horizontal scrollbar will appear.

Check your updated Fiddle

Upvotes: 2

Related Questions