Maintaining the minimum width

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Maintaining the minimum width

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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%" );
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post by Ree »

Messy? I thought the HTML was pretty compact and readable (it's mainly divs in there)...

Anyway, thanks for your help.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Post Reply