CSS div overlapping on window resize

@LunadogAug 05.2004

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?

to post a comment

CSS

@IncaWarriorAug 05.2004 — #give the one on the right a margin the size of the one on the left

@LunadogauthorAug 06.2004 — #Nice idea but it still jumps under the left div, just a lot earlier now due to the margin.

@ray326Aug 06.2004 — #Wrap them in a container div with a width wide enough to prevent it.

@LunadogauthorAug 09.2004 — #Kinda tricky - the container div is set to be 100% width so it stretches across the whole page. Any other way?

@pawkyAug 09.2004 — #i havent used it yet but i have seen the code min-width:

http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths

not sure how good it works or whatever but you may try that. and let me know how it does ? gl

@toicontienAug 09.2004 — #The 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.

<i>
 </i>&lt;div id="wrapper"&gt;
 &lt;div id="box1"&gt;&lt;/div&gt;
 &lt;div id="box2"&gt;&lt;/div&gt;
 &lt;div id="layoutSpacer"&gt;&lt;/div&gt;
 &lt;/div&gt;

Then in CSS:

<i>
 </i>#wrapper {
 width: 100%;
 min-width: 700px;
 }
 
 #layoutSpacer {
 width: 700px; /* For IE &gt;:( */
 }
 
 /* For Moz and the Boyz :) */
 html&gt;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.

CSS div overlapping on window resize

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS div overlapping on window resize

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴