Resizing Div's

Can't get div's to resize well

[RecorderDude]

Hi All,

I'm a newbie so please be gentle with me!

I'm trying to use best practices to create a website for my local Church but I'm having problems getting my web pages to resize nicely.

Environment: Firefox (and IE6 because I've got to!) not yet online but I hope to be very soon.

If I use a simple example with just two columns defined thus:

div#lhs_nav{
background-color: Aqua;
width : 10%;
float : left;
}

div#main{
background-color: Fuchsia;
width : 80%;
float : left;
}

This works fine but if I add all the stuff I want on top of that (banners, navigation and some other links) it ceases to do so. What happens is that as the window is resized, as it gets near the edge of div#main, div#main slips beneath div#lhs_nav.

The stuff that precedes the lhs_nav and main are, in order:

div#top_banner{
width: 100%;
height: 110px;
margin:0px;
text-align: center;
padding-bottom : 5px;
padding-top : 15px;
float : left;
}

/* Navigation panel across the top */
div#top_nav{
width: 100%;
height: 18px;
margin:0px;
text-align: left;
padding : 2px 0px 0px;
background-color : #F0E68C;
border-bottom-color : Gray;
border-bottom-style : solid;
border-bottom-width : 1px;
float : left;
}

/* Inline to contain site wide links, mainly for use in the top navigation panels */
div.top_link{
display: inline;
width: 100%;
padding-right: 8px;
margin-right: 30px;
padding-left: 8px;
margin-left: 20px;
font-size: 8pt;
font-family: Tahoma;
text-align: center;
padding-top : 0px;
font-weight : bold;
padding-bottom : 2px;
background-color : #DAA520;
}

Now the two main columns (similar to the simple example above):

div#lhs_nav{
width: 115px;
text-align: right;
padding : 25px 10px 5px 10px;
line-height : 25px;
float : left;
min-height : 400px;
}

div#main{
text-align: left;
padding-top : 30px;
padding-left : 30px;
padding-bottom : 10px;
padding-right : 30px;
float : left;
border-left-color : Gray;
border-left-style : solid;
border-left-width : 1px;
min-height : 400px;
background-color : White;
width : 80%;
min-width : 40%;
}

There's also a number of absolutely placed elements (divs) like a slogan, a path div and some image links to a couple of other sites. There's also a footer but I'm assuming that this is not where my problem lies.

Well there it is. I hope I've not been too long winded or transgressed any WWorld rules or conventions.

Thanks for getting this far and I hope you can point me in the right direction.

Regards,
Phil

[Drag_Racer]

first thing is with IE6 and earlier, padding is added to the width to give an overall width on div tags, though other browsers will not do this. To make things the same in all browsers, change the padding to a margin in the div#lhs_nav declaration. Also, the main div does not need to be floated, so change the float:left; to a margin-left equal to or a bit larger than your left floated div. Also, you could add clear:none; to help with some browsers. This should stop the main div from floating around the left div and layout the same in all browsers.

so...

div#lhs_nav{
width: 115px;
text-align: right;
margin : 25px 10px 5px 10px;
line-height : 25px;
float : left;
min-height : 400px;
}

div#main{
text-align: left;
padding-top : 30px;
padding-left : 30px;
padding-bottom : 10px;
padding-right : 30px;
margin-left : 130px;
border-left-color : Gray;
border-left-style : solid;
border-left-width : 1px;
min-height : 400px;
background-color : White;
width : 80%;
min-width : 40%;
clear : none;
}

[RecorderDude]

Thanks for that Drag_Racer, I'll give that a whirl and see what happens.

Although I have to say that it had been my intention to get it right (or at least as I want it) in FFox then deal with anomalies in other browsers so I've not checked it out in IE much yet. But you're right, I should be bearing that all in mind now so I'll go try out the mods you suggest and check it on a number of different browsers now.

Thanks again.

Regards,
Phil.

[Drag_Racer]

your very welcome, but to get the story straight I had it backwards. padding is added to the width except in IE6 and earlier. They call this the border-box model if you want to look it up.

I blame it on 'lack of sleep' dislexia ;)

[RecorderDude]

Resizing now works a treat in FFox and it's ok in IE6 too .... :o)

In the end, in addition to the changes you suggested, I also removed the floats from div#top_banner and div#top_nav. Removed width : 80%, min-width : 40%, from div#main and increased the right padding to 100px.

Great!

As you say I'll have to monkey around in some areas using margins instead of padding to accommodate IE 6 but I see how it works now. I knew about the box model but I didn't know about IE6's creative way of interpreting it.

Cool thanks for all your help ...... but I'll be back I've no doubt when I hit the next hurdle!

Regards,
Phil

re 'lack of sleep' dyslexia: with me it's time shifting -- fall asleep during the day, wide awake at 3 in the morning!