CSS: Floating DIV content spilling outside of container when using min-width. Rather have scrollers
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 in开发者_如何学运维ner 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 body
in this case. If you want to make the .outer
element larger you can specify a fixed width, http://jsfiddle.net/ETcf2/.
With that and the min-width
removed the floated elements behave as expected.
Try
.outer {
width:100%;
border:2px solid green;
position:relative;
overflow: scroll;
}
精彩评论