hoping one of your guys would know the answer to this.
I have 2 floating DIVS and one DIV containers content that has min-width. When I resize window and window is smaller than min-width content, the content spills out of the parent container.
I would like parent container to expand to accomodate rather than have inside min-content to spill out and simply get horizontal scrollers at bottom of browser.
Anyone know solution?
<html>
<style>
.outer {
width:100%;
border:2px solid green;
position:relative;
}
.left {
float:left;
width:20%;
max-width:250px;
background:red;
}
.right {
float:left;
width:80%;
background:#eee;
}
.inner {
min-width:620px;
border:1px solid blue;
}
.clear {
clear:both;
}
</style>
<div class='outer'>
<div class='left'>This is an inner content page. This is an inner content page.This is an
inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.This is
an inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.</div>
<div
class='right'>
<div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an
inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.This is
an inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.</div>
<div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an
inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.This is
an inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.</div>
</div>
<div style='clear:both'></div>
</div>
Would like scrollers to appear horizontally on browser window (and not DIV) as it expands.
You are setting the width on the top most parent to 100%. It will not grow larger than it's parent, which is the
bodyin this case. If you want to make the.outerelement larger you can specify a fixed width, http://jsfiddle.net/ETcf2/.With that and the
min-widthremoved the floated elements behave as expected.