CODEWITHSUNDEEP
css
user2723490
user2723490

Reputation: 2100

How to force overflow of divs with float:left

I have two divs with float:left inside a container with a fixed width - something like that

<div style="width:1100px">
<div id="A" style="float:left; width: 400px"></div>
<div id="B" style="float:left; min-width: 600px"></div>
</div>

Here is the problem. Both internal divs A and B are generated dynamically and div B can exceed 700px. In that case, it goes below div A. I cannot easily change the width of the container, because it is also generated automatically by bootstrap.

I've tried to play with the overflow options, but it didn't work. I could recalculate the width of the container dynamically with jquery based on the total width of divs A and B, but it will be overdo.

What is the easiest way to force div B stay next to div A regardless of its width?

Thanks

Upvotes: 1

Views: 902

Answers (3)

Carlo Cannas
Carlo Cannas

Reputation: 3262

You can use inline-block display for the div, then set white-space to nowrap and remove any white space between the two div.

Live example: http://jsfiddle.net/VMVAb/

Upvotes: 1

Santiago Rebella
Santiago Rebella

Reputation: 2449

like my comment and using akinuri modified fiddle, using percentage and without scroll bar;

#container {
    width: 1100px;
    position: relative;
    overflow: show; /* or hidden if you dont want the scrool bar */
}
#A {
     background: yellow;
     width: 60%;
}
#B {
     position: absolute;
     top: 0;
     left: 60%;  /* width of #A */
     width: 80%;
     background: blue;
}

you get

http://jsfiddle.net/TRFmL/1/

EDIT

I think now I have whatyou want:

#container {
    width: 100%;
    position: relative;
    overflow: show; /* or hidden if you dont want the scrool bar */
}
#A {
    float:left;
    display:inline-block;
    background: yellow;
    width: 60%;
}
#B {
    float: right;
    margin-right: -40%; // this is the result of 100 - (A+B)
    display:inline-block;
    width: 80%;
    background: blue;
}

Upvotes: 1

akinuri
akinuri

Reputation: 12027

One way I can think of is using absolute positioning.

<div id="container">
    <div id="A">a</div>
    <div id="B">b</div>
</div>

 

#container {
    width: 1100px;
    position: relative;
    overflow: auto; /* or hidden if you dont want the scrool bar */
}
#A {
    background: yellow;
    width: 400px;
}
#B {
    position: absolute;
    top: 0;
    left: 400px;  /* width of #A */
    width: 900px;
    background: blue;
}

FIDDLE

Upvotes: 1

Related Questions