CODEWITHSUNDEEP
csshtml
Michael Swarts
Michael Swarts

Reputation: 3921

inline-divs wrapping

I have two side-by-side inline-divs with widths of 400px.

When the browser is resized to less than 800px width, the second div wraps and overlaps the first. I want them to stay side-by-side with a horizontal scroll bar added to the browser window. I have tried styling body and the divs with whitespace: nowrap. Any ideas?

Upvotes: 0

Views: 459

Answers (5)

Michael Swarts
Michael Swarts

Reputation: 3921

I'm an idiot. It should be white-space: nowrap. Thanks for the suggestions though...

Upvotes: 1

zequinha-bsb
zequinha-bsb

Reputation: 719

<div style='position:absolute; top:0; left:0; width:400px; 
 height:250px; background-color:yellow; ' >
</div>

<div style='position:absolute; top:0; left:401px; width:400px; 
 height:320px; background-color:red; '>
</div>

http://zequinha-bsb.int-domains.com/side-by-side.html

EDIT: Bare in mind that absolute positioning requires parent to have 
position:relative explicit

Upvotes: 0

Julian Tai
Julian Tai

Reputation: 43

since your widths are fixed just create an outer div container

<div class="bigbox">
   <div class="leftbox">
   </div>
   <div class="rightbox">
   </div>
</div>

.bigbox { width: 810px;}
.leftbox { width: 400px; float: left}
.rightbox {width: 400px; float: right}

Upvotes: 0

Sico
Sico

Reputation: 1183

You would also probably have to set a style of min-width to the parent div

Upvotes: 0

drdwilcox
drdwilcox

Reputation: 3951

try wrapping them in a div with a width of 800px.

Upvotes: 1

Related Questions