Page 1 of 1

Maintaining the minimum width

Posted: Thu Oct 05, 2006 3:35 am
by Ree
I'm having a problem making a div not disappear when browser window is resized. Take a look at this preview:

http://www.internovitas.com/site/main.htm

You can see that when resizing the browser window, the layout resizes as well. However, when you resize it too much, the main image (eagle) starts to disappear:

Image

What I'm trying to do is to stop the layout resizing once the left border of the eagle image reaches a certain position relative to the left border of the browser window (say, 320px from the left border of the browser window). It would look like this:

Image

From the point when the image reaches 320px from the left border of the browser window the layout should not resize at all. Of course, the browser window could be resized further but in that case the horizontal bar should be used to see the whole width of the page.

Anyone could help me achieve this?

Posted: Thu Oct 05, 2006 3:59 am
by matthijs
Set a min-width on the body. Works in all modern browsers. Of course, IE doesn't understand min-width so you'll have to give IE it's own rules. Using conditional comments, you can then give IE it's own stylesheet with a proprietary rule to give that browser a min-width as well.
Something like:

Code: Select all

width:expression(document.body.clientWidth < 800? "790px": "100%" );

Posted: Thu Oct 05, 2006 4:17 am
by Ree
Yes, I know min-width will work, but this will make me use alternative CSS for IE (and I think it won't work if Javascript is off). Any way to achieve the same using universal CSS?

Posted: Thu Oct 05, 2006 5:33 am
by matthijs
Well ok. Maybe you could do something with the fact that IE treats width as min-width. To explain: if a box has a set width of say 400px and something in the box is larger or expands behind 400px, the parent box will expand as well in IE.

That is a flaw of IE but can be used to trick IE into treating something with a width as min-width. But you still want the layout to be fluid above the min-width, so you don't want to set the width (to IE only) on the body.

What you could do is give something inside the layout a fixed width, equal to the min-width you give to the body. Again, this rule should only be seen by IE, but there are many ways to do that.

Code: Select all

css:
/* all browsers */
body { min-width:800px; }

/* ie only */
* html body #somediv { width: 800px; }
The #somediv could be the footer for example. Or when no existing element can be found, you can use an empty div (even though that's ugly). Then what happens is that the body and everything else is fluid. When you start resizing the window to a smaller width, when you reach the 800px of that element, the body will not resize anymore.

There are also some other methods, using negative margins (jello layout, see http://positioniseverything.net/article ... -expo.html). Which method you choose is personal preference. I personally like to keep things simple.

Posted: Thu Oct 05, 2006 6:13 am
by Ree
Hmm, having an IE-only div looks nice, but I tried adding it without the desireable result: the eagle image still disappears in IE.

Another thing I'd like to ask is why the #news div (added black border for better visability) in FF is not positioned side by side with #portfolio div the same way it is in IE.

Please refresh the page since its CSS is updated.

Posted: Thu Oct 05, 2006 8:55 am
by matthijs
Which div did you add then? I don't see it.

The reason the news div drops below the portfolio is because you didn't give it a margin-left (the width of the portfolio + some extra for margin).

Also beware of the fact that you gave both news and portfolio divs a padding:12px; which will be added to the total width (box model width= width+border+padding, not in IE). It's always better to set either a width on a div or border/padding. If you set a width on an element and you want some padding, give the child elements margin instead. Will save you some cross browser headaches.

Posted: Thu Oct 05, 2006 9:00 am
by Ree
Which div did you add then? I don't see it.
You don't see it because it's not there. As I said I tried adding one in different places, but that didn't produce the expected result. Maybe you could suggest me a place to put it in?

Posted: Thu Oct 05, 2006 10:10 am
by matthijs
Well, it's not that easy because, to be honest, your html and css is kind of messy and complicated. I don't have the time at the moment to sort that out. I did a quick search on google for min-width in IE, and found http://www.cssplay.co.uk/boxes/width.html which explains another method. You could try and adopt that to your layout.

Posted: Thu Oct 05, 2006 10:57 am
by Ree
Messy? I thought the HTML was pretty compact and readable (it's mainly divs in there)...

Anyway, thanks for your help.

Posted: Thu Oct 05, 2006 12:14 pm
by matthijs
Sorry about that remark, no offense.

What I mean is there are a lot of divs, some of them redundant. Like

Code: Select all

<div id="left-shadow-blue" class="left-shadow"></div>
<div id="right-shadow-blue" class="right-shadow"></div>
...
<div id="top-container">

			<div id="top-navigation">
				<div>

..		
<div class="top-stripe"></div>
		<div id="blue" class="image-container">
			<div id="eagle" class="image"></div>
		</div>
		<div class="top-stripe"></div>
..
Those are most/all presentational/unnecessary divs. Certainly something like #topstripe, #eagle, etc doesn't belong in the html but should be placed in the css (as background images).

Also something like

Code: Select all

<div id="menu-container" class="azure">
				<ul>
Can easily/often be replaced by

Code: Select all

<ul id="menu-container" class="azure">
..
If you want to simplify the layout I would start with just 2 divs. 1 for the left part (navigation, etc) and 1 for all the content. Then only add divs when really needed.