Using spaces to replace min-width tag

Need to keep page a certain width

[twist]

I am trying to replicate what the css { min-width } tag does. I would use it but it isn't supported in IE. I was using a spacer image but would prefer not too use them for a few reasons. One reason being that if a person turns off images my page would lose it's formatting.

I added   tags around my page logo. I set the font type and set the size to 27px. I added a { white-space: nowrap } tag around the logo column. When my browser window is reduced to around 600 pixels it creates a horizontal scrollbar. I tested it with Moz 1.6, IE 6 and Opera 7 with no problems. It even spaced them all exactly the same. It doesn't seem to effect the layout of the page in Lynx browser either.

I am just wondering if anyone can think of any cons to using this method to keep a minimum page width.

Thanks in advance.

[Purple Martin]

I can't think of anything wrong with using { white-space: nowrap }. In fact I quite like it - it says exactly what it does and does exactly what you want.

You could even use a relative font size (such as em), which will allow the user to resize their browser text and the document would still have the correct minimum width for the new text size.

[dcrombie]

If you use a 1x1 gif as your spacer image and define the width and height in the HTML then it shouldn't matter if the user has images turned off.

[grahamstewart]

Why bother with an image at all? Just include an empty <div> with a fixed width, that way you retain control in your CSS file and you don't have to make the request for an image.

e.g.

CSS:

#content { 
  border: 2px solid #00f; 
  min-width: 500px; 
} 
.minwidth { 
  width: 500px; 
} 

HTML:

<div id="content"> 
  <div class="minwidth"></div> 
</div> 

Here the content div expands to 100% width but is never allowed to be less than 500 pixels wide.

The minwidth div fixes IE and other browsers (with decent CSS support) are handled with the min-width attribute on content.

[DrDoc]

Or, use conditional comments and an IE proprietary expression()...

[twist]

Purple Martin, good idea on using em, I wish I had thought of that, but grahams method worked and i'm going to have to go with that.

grahamstewart you are a lifesaver. It worked. I don't quite understand how it worked. I thought the min-width wasn't supported in IE?!?

I have another question for you.

I tried going to a tableless layout using div but ran into a problem where when a person makes the width too thin the content would overlap itself when using absolute positioning. I could stop it in mozilla adding the min-width tag in my html tag. Will the method of using min-width in the div tag itself also stop my website from overlapping itself.

I can test it myself but if you already know you could save me a lot of time.

Thanks.

[twist]

#content {
border: 2px solid #00f;
}
.minwidth {
width: 500px;
}

I understand now. The min-width tag still doesn't work in IE, but it wasn't necessary, it's the inside div tag with width: 500px that keeps the window at 500px.

Thanks again graham

[grahamstewart]

Yep, you got it.

But you still need the min-width tag as well.

IE refuses to let the 'minwidth' div stick out of the 'content' div so it doesn't let it get any smaller.

But most other browsers allow the 'minwidth' div to break the border of the 'content' so you also require a min-width setting on content to prevent this.