CSS Layout Help Needed

[PsychoDuck]

I am trying to re-write my website without tables using CSS and its driving me nuts trying to get the layout to work in both ie and firefox.

IE

Firefox

The page can be found below, the CSS stylesheet is in the html page not in a seperate file at the minute.

http://www.roblangston.com/new/test.html

Basically in ie everything is fine, but under firefox the main page container doesnt stretch down to the bottom of the page. Any suggestions on how to fix this would be greatly appreciated.

 

[toString]

.FooterContainer
{
text-align: left;
background-color: white;
padding: 5px;
width: 810px;
border: 1px solid #959596;
z-index:2;
clear:both;
}

.LeftColumn
{
text-align: left;
background-color: white;
padding: 10px;
width: 600px;
border: 1px solid #959596;
float:left;
position:relative;
margin-bottom:20px;
}

I manged to do it by changing these 2. Seems to work, but maybe someone else knows a different way.

 

[PsychoDuck]

Many thanks for that, had me scratching my head for quite a while. Give me tables any day.

 

[Beansprout]

Give me tables any day.

Nah...CSS is actually nice and logical. The only pain is the cross-browser stuff.

What you're doing here (roughly, since I haven't looked) is putting a header a the top - easy. Then for the columns, you don't want the left <div> to take up all the horizontal width - you need to leave room for the sidebar - so you give it the width you want and use the float: property to keep it from being greedy.

Then you add a sidebar and give it a width to fit. It gets placed next to the floated left div.

But when things are floated they're taken out of the document and 'floated' over it, so the next piece of content won't appear at the bottom, it'll go underneath instead. So you need to add the clear: both; property to the footer to force it underneath the floated <div>'s, this giving you the correct look

That's one way to do it, anyway

 

[philio16]

Nah...CSS is actually nice and logical. The only pain is the cross-browser stuff.

What you're doing here (roughly, since I haven't looked) is putting a header a the top - easy. Then for the columns, you don't want the left <div> to take up all the horizontal width - you need to leave room for the sidebar - so you give it the width you want and use the float: property to keep it from being greedy.

Then you add a sidebar and give it a width to fit. It gets placed next to the floated left div.

But when things are floated they're taken out of the document and 'floated' over it, so the next piece of content won't appear at the bottom, it'll go underneath instead. So you need to add the clear: both; property to the footer to force it underneath the floated <div>'s, this giving you the correct look

That's one way to do it, anyway

Just picked up on web dev again at designed myself a site in the last week, did it with tables (and CSS for formatting) nice and easy to begin with but am looking into bringing it right upto date and using CSS for the layout....but thats gonna take a couple of re-reads to understand

 

[Beansprout]

I didn't really explain it in much detail, more of a general overview, so for some good grounding check out www.w3schools.com as well as this article which talks about the "taking up all the horizontal space" issue I mentioned ('block' versus 'inline' elements) as well as what floating is

 

[nin9abadga]

Nah...CSS is actually nice and logical. The only pain is the cross-browser stuff.

What you're doing here (roughly, since I haven't looked) is putting a header a the top - easy. Then for the columns, you don't want the left <div> to take up all the horizontal width - you need to leave room for the sidebar - so you give it the width you want and use the float: property to keep it from being greedy.

Then you add a sidebar and give it a width to fit. It gets placed next to the floated left div.

But when things are floated they're taken out of the document and 'floated' over it, so the next piece of content won't appear at the bottom, it'll go underneath instead. So you need to add the clear: both; property to the footer to force it underneath the floated <div>'s, this giving you the correct look

That's one way to do it, anyway

/agree. stick a footer in the blue background underneath the 2 panels to stretch it down and you'll be sorted.

css = better than pie

nin9a

 

[joeyjojo]

Very nice, concise advice (good rhyme) Beansprout.

The main thing to take from that is that float causes divs to be taken out of the normal run of things, so containers (like your light blue box) no longer stretch out. Adding clear to a non floated div causes it to be put back into the normal flow. Since the footer comes after the floated columns, it is forced below the floated divs, and the container stretches to accommodate it.