Help with this: header-2columns-footer

[Ramiro S]

Hi, Im having problems... Im trying to move to CSS:

First: What Im trying to do: check in http://www.manuelantonio-info.com thats the original, made with tables.

I need one header, two columns and a footer.

I have this: http://www.manuelantonio-info.com/sitemap.php

Thats what Ive done... the menu and the links are dynamicaly generated so thats why the menu goes longer ...

Problems :

• How can I make the Footer layer to be always at the botom of the two columns?
• How can I solve the problems with mozilla? if I use fixed height value in IE it resizes automaticaly to fit the content, the data. But in Mozilla it always uses the fixed width value.

Check the code:

<div id="container" style="position:absolute; left:0px; top:0px; width:750px; height:200px; z-index:3">
 
  <div id="top" style="position:relative; left:0px; top:0px; width:750px; height:130px; z-index:1; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;"><img src="images/main.jpg" border="0" width="750" alt="Costarica-Travelinfo.com"></div>
 
  <div id="containermain" style="position:relative; left:0px; top:0px; width:750px; height:200px; z-index:3">
  
	<div id="menu" style="position:absolute; left:0px; top:0px; width:150px; height:100%; padding: 2px; z-index:1; background-color: #E1CFB0; layer-background-color: #E1CFB0; border-right-style: solid; border-right-width: 1px; overflow: visible;">$menu $tlinks</div>
	<div id="main" style="position:relative; left:150px; top:0px; width:600px; height:100%; z-index:2; background-color: #EBE0CE; layer-background-color: #666666; border-right-style: solid; border-right-width: 1px;">
	  <h1>$TownName Site Map</h1>
	  <p class="title">Hotels in $TownName</p>
	  <div class="normal" align="center">$HotelLinks</div>
	  <p class="title">Tours in $TownName</p>
	  <div class="normal" align="center">$TourLinks</div>
	</div>
	<div id="foot" style="position:relative; left:0px; top:0px; width:750px; height:150px; z-index:1; border: 1px none #000000;"><img src="images/bottom.gif" border="0" width="750" alt="Costarica-Travelinfo.com"></div>
  </div> 
</div>

Thanks!

[Zoef]

The problem with Mozilla is that there is no problem .

Mozilla is much more standard-compliant then IE. Therefore it's a good idea to code for Mozilla first and then check it in IE, not the other way around.

Why use 'fixed height' at all? Particullary if your content is dynamically generated...

For a basic header/2col/footer layout I think the best solution is to leave everything static except for one of the columns which you then float in the margin of the other column. Also put clear:both in in the rule for the footer to push it down if the floated column is longer then the static one.

Rik

[Ramiro S]

Thanks for the reply... Ill try it.

[Ramiro S]

Ok, I tried this... still getting differences between Mozilla and IE... the clear: both doesn't do anything... maybe Im doing something wrong...heres the code:

<div id="top" style="position:static; left:0px; top:0px; width:750px; height:132px; z-index:1; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;"><img src="images/main.jpg" border="0" width="750" height="132" alt="Costarica-Travelinfo.com"></div>
<div id="menu" style="position:static; top:132; width:150px; height:100%; padding: 2px; z-index:2; background-color: #E1CFB0; layer-background-color: #E1CFB0; border-right-style: solid; border-right-width: 1px; overflow: visible; left: 0;">$menu $tlinks</div>
<div id="main" style="position:absolute; top:132px; left:150; width:600px; z-index:3; background-color: #EBE0CE; layer-background-color: #666666; border-right-style: solid; border-right-width: 1px; overflow:visible">
  <h1>$TownName Site Map</h1>
  <p class="title">Hotels in $TownName</p>
  <div class="normal" align="center">$HotelLinks</div>
  <p class="title">Tours in $TownName</p>
  <div class="normal" align="center">$TourLinks</div>
  <h1>$TownName Site Map</h1>
  <p class="title">Hotels in $TownName</p>
  <div class="normal" align="center">$HotelLinks</div>
  <p class="title">Tours in $TownName</p>
  <div class="normal" align="center">$TourLinks</div>
</div>
<div id="foot" style="position:relative; left:0px; clear:both; height:16px; z-index:4; border: 1px none #000000;"><img src="images/bottom.gif" border="0" width="750" alt="Costarica-Travelinfo.com"></div>

[Zoef]

Ramiro, have a look at this thread and see if it helps you:
http://www.sitepointforums.com/showt...&postid=791124

If it doesn't, post back here.

Have fun with it.

Rik

[Ramiro S]

Thanks Zoef!!! it is helping a lot... still changing things but now it looks better.

[Ramiro S]

Ok, I made some changes to that sample... yo ucan see it in: http://www.manuelantonio-info.com/sitemap.php

Still can make the content bar height to fit with the footer.

And in Mozilla I get a space between the main layer and the header.

Thanks