Relative? 1

[ToshTrent]

Hi,
Sorry to be a pain, you probably get asked this a thousand times.

I'm having trouble with the positioning element of divs and css.

I have a header(H), a side menu(S), page content(P) and footer(F) div layers.

-------------------------
| H |
-------------------------
| | |
| S | P |
| | |
| | |
| | |
| | |
-------------------------
| F |
-------------------------

The header contains an image which is a different size on different pages depending on the section the user is visiting.

Due to not knowing the header size (due to change) I cannot use absolute positioning on the <div pagecontent> as it ends up floating over the header. If I use relative the <div pagecontent> moves to the bottom of the page (between submenu and footer).

What is the best method to ensure my <div pagecontent> stays say 50px from header and 40px from submenu at all times no matter how big the header is?

I hope this makes sense.

Thanks for your help guys and gals.

Tosh

 

[Vragabond]

Are you working with fixed sizes for the width of header, footer and especially side menu and page content? If you are, you should go with floats. You should probably go with floats anyway, but with dynamic widths it might be a little trickier.

 

[ToshTrent]

The width is fixed, yes. I is different on once page as it becomes an information bar but i'll just use a different css for that.

Problem with floats is I can't seem to specify stay in this zone, it sill drops between other divs.

It does this at the moment
<header>
<submenu>
<pagecontent>
<footer>

But I want it to do this.
<header>
<submenu><pagecontent>
<footer>

How can I do this using floats?

[red]
Thankyou[/red]
Matt

 

[Vragabond]

<header />
<container>
  <submenu float left /><pagecontent float right />
</container>
<footer clear both />

Make sure that the container width is more or equal to the width, all margins, borders and padding of submenu and pagecontent.

 

[ToshTrent]

Kool thanx Vragabond.

Almost there!

Now that I have done this, the footer seems to form the same size as the <pagecontent> and sit just below it instead of siting at the base of the page. Mozilla Firebollox seems to wack my footer at the top.


The HTML
<div id ="containersitelayout">
<div id="header">
<div>

<div id="submenu">
</div>

<div id="containerpagecontent">
</div>

<div id="footer">
</div>
</div>

The CSS

#header
{
position : relative;
left: 0px;
}

#submenu
{
position : relative;
float : left;
top: -5px;
height : 100%;
width : 130px;
z-index : 2;
}

#containerpagecontent
{
position : relative;
float: right;
top: 10px;

height: 500px;
width: 640px;
}

#footer
{
position : relative;
left: 0px;
height: 40px;
}


Is there anything you can see that is drastically wrong with this code to cause the footer to be classed with the <containerpagecontent> position?

Thanks for your help mate.

 

[ToshTrent]

...or ignored like firefox does.

[red]
Thankyou[/red]
Matt

 

[Vragabond]

Yes, I cannot see [tt]clear: both;[/tt] in your css for the #footer, which I mentioned it to be necessary.

 

[ToshTrent]

Great! Thanks mate! You're a legend!

Sorry bout that, i wrongly took that as a comment thinking if would do that function, thankyou for you help.


[red]
Thankyou[/red]
Matt