min-width causes page to break

[james_littler]

okay im working on about the fourth or fith build of this site

i have essentially a 3 column layout with the middle column fluid and a navbar floating to the left in the margin, the right margin is left clean (at the moment anyway)

i have a min width of 300px specifyed for the middle column (the margins are set to 197px) when i reduce the size of my browser window once the middle column gets to 300px in moves down the page a few hundred pixels but appart from this acs normally, ie it doesnt get any smaller than 300px

also it seems that the window, no matter what size it is, cannot contain the whole page, you always have to scroll horizontally to see the last 10 or so px, i have all my widths set to 100% so i dont understand why its doing this

if anyone could help me i'd really appreciate it

live example here

http://www.ats-heritage.co.uk/div/Red%20Div%202/


cheers

[Dr John]

In IE7 there is a red bar at the bottom of the menu area. It doesn't appear there at all in firefox!
Put some text in the currently empty footer, just out of interest.

Just done it myself - it makes the footer appear in firefox.

[Dr John]

I also notice you have this
<div id="navbar">
<span class="navbar">

styles you have for the class navbar should really be for the id navbar

[james_littler]

okay there is a load of text in the footer now

the span within the nav bar is simply to style the links, i didnt think you could define that within the css for the div

cheers

james

[james_littler]

i just noticed that my problem is only apparant in ie i'm using 7 and have no way to check previous versions atm

my header doesnt appear in ff though

oh the joy

[Dr John]

Okay, in IE7 it is dropping below your div #navbar, for which you have set a height of - wait for it , wait for it - 182px. Try removing that line for a start.

[Nadia P]

Firefox doesn't like the space in the file name for your header image.
background-image:url(Images/Logos/ATS Heritage.png); Remove the space and I bet it turns up in Firefox. You should never have spaces in your file names, some browsers can choke on this as in this case.

Change the width from 100&#37; to 99% and the horizontal scroll should disappear.

PS: You may find this site useful - styling of list menus

Nadia

[Dr John]

I found I needed 98&#37; for the width of the #main to make the horizontal scrollbar disappear in FF.

I'd have set the min-width on #main and at 770px. and not on the #body div inside it. This gives a min width of a bit more than 300px for #body, but that is not important IMHO (I'll just go measure what it gives in a second or two)

EDIT: Seconds later - it makes #body come out at 380px, so you could set it lower still on #main if necessary, but as your dropping div problem appears at 313px width for #body, I'd leave it at a larger value

You will need a conditional statement to make min-width work in IE6 and below however.

PS Yes, listomatic is very very helpful

[james_littler]

right well thankyou all

i have managed to make my site work very nicely except for one issue

with the footer when the window width is changed it pushes my right footer (float right) to the left side of the element its positioned against..
if that makes sence......it floats to the left of the thing it is floating right (or meant to be) of

have a look..i cant explain it very well

http://www.ats-heritage.co.uk/div/Re.../template.html

if anyone could test this in ie6 for me i would appreciate it as it will save me setting up another pc


cheers

: )

[young72]

FYI - In IE6, none of the images under the Latest News are appearing. The heading is OK, but no images in the content, just text.

[james_littler]

lol that was just me using a capital letter in the filename

stupid me


cheers m8