Hi,
Im curious to see if this is even possible as Ive run out of ideas on how to do it using only CSS (its easy with js but...)
Anyways, Imagine two divs, one floated left, one floated right. When you downsize the window sufficiently the right div will either jump to be under the left, or it will go over/under it.
Any ideas on how to make them stop and bring up the horizontal scroll bar instead?give the one on the right a margin the size of the one on the leftNice idea but it still jumps under the left div, just a lot earlier now due to the margin.Wrap them in a container div with a width wide enough to prevent it.Kinda tricky - the container div is set to be 100% width so it stretches across the whole page. Any other way?i havent used it yet but i have seen the code min-width:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths">http://www.w3.org/TR/REC-CSS2/visudet.h ... max-widths</a><!-- m -->
not sure how good it works or whatever but you may try that. and let me know how it does
glThe min-width attribute works, but not on everyone's favorite browser (Internet Explorer). You can, however, use one IE bug to make up for it's deficiencies in CSS support.
IE will stretch a box if it's contents are too wide to fit, barring of course floated elements. Then what you want is essentially a spacer DIV: A div set to the minimum width you want the layout to be.
<div id="wrapper">
<div id="box1"></div>
<div id="box2"></div>
<div id="layoutSpacer"></div>
</div>
Then in CSS:
#wrapper {
width: 100%;
min-width: 700px;
}
#layoutSpacer {
width: 700px; /* For IE
*/
}
/* For Moz and the Boyz
*/
html>body #layoutSpacer {
display: none;
}
The only downside is that IE5-Mac doesn't react the way IE/PC does. In fact, IE5-Mac reacts, for the most part, like a good standards browser, except it doesn't support the min-width attribute.
Someone around here has a link to an article about emulating the min-width attribute using client side scripting, but I don't have it.
Im curious to see if this is even possible as Ive run out of ideas on how to do it using only CSS (its easy with js but...)
Anyways, Imagine two divs, one floated left, one floated right. When you downsize the window sufficiently the right div will either jump to be under the left, or it will go over/under it.
Any ideas on how to make them stop and bring up the horizontal scroll bar instead?give the one on the right a margin the size of the one on the leftNice idea but it still jumps under the left div, just a lot earlier now due to the margin.Wrap them in a container div with a width wide enough to prevent it.Kinda tricky - the container div is set to be 100% width so it stretches across the whole page. Any other way?i havent used it yet but i have seen the code min-width:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths">http://www.w3.org/TR/REC-CSS2/visudet.h ... max-widths</a><!-- m -->
not sure how good it works or whatever but you may try that. and let me know how it does
glThe min-width attribute works, but not on everyone's favorite browser (Internet Explorer). You can, however, use one IE bug to make up for it's deficiencies in CSS support.IE will stretch a box if it's contents are too wide to fit, barring of course floated elements. Then what you want is essentially a spacer DIV: A div set to the minimum width you want the layout to be.
<div id="wrapper">
<div id="box1"></div>
<div id="box2"></div>
<div id="layoutSpacer"></div>
</div>
Then in CSS:
#wrapper {
width: 100%;
min-width: 700px;
}
#layoutSpacer {
width: 700px; /* For IE
*/}
/* For Moz and the Boyz
*/html>body #layoutSpacer {
display: none;
}
The only downside is that IE5-Mac doesn't react the way IE/PC does. In fact, IE5-Mac reacts, for the most part, like a good standards browser, except it doesn't support the min-width attribute.
Someone around here has a link to an article about emulating the min-width attribute using client side scripting, but I don't have it.