Screen resize problem in Firefox

[Draxeiro]

Hi there,

I am currently working on rebuilding a table website into one done in css. So far so good, I've managed to have it looking pixel perfect in nearly all the browsers I've checked it in (Firefox, Opera, IE6, IE 7 look identical, Safari is 99% identical, just some links that are shifted a couple of pixels to the right, but that's no biggie).

I was doing some testing today by resizing the browser window. Making sure that wouldn't give any problems either.

- IE was fine
- Opera no problem
- Safari worked like a charm
- Firefox... PROBLEM!

I have 2 divs in my footer containing 2 links. I used the divs and padding on the A tag to make sure they got positioned right.

I am relatively new to css so perhaps this could have been done in another way. So if you've got suggestions I am all ears.

Anyway, when the window resizes these two divs are pushed down, pushing the footer up (the site occupies 100% of the viewport) and creating a big gap containing the links.

I do not really understand how this can happen. I am not using any floats on those divs nor is the top one using any margin. Yet it is pushed down by the same margin as the second div is set to.

I tried changing the margin for padding but that didn't change a thing. I also tried giving the divs a height. Didn't change a thing either.

This only happens on Firefox (I am using 3.0, not sure if it also happens on lower versions), all the other browsers are fine as far as I can check.

Can you please help me solve this?

You can find the site at: http://www.mediascape.nl/test/nl-index.htm

Here's the code...

CSS:

html, body {
height: 100%;
}

body{
text-align: center;
background: #dad7dd;
font-family: verdana, arial, helvetica, sans-serif;
margin:0;
padding:0;
}

/* basic setup */

#container{
margin: 0 auto;
width: 751px;
min-height: 100%;
text-align: left;
background: #fff url(graphics/main-bg.gif) repeat-y 0 0;
margin-bottom:-100px; /* bottom margin needs to have the same height as footer, only negative */
}

#footer{
margin: 0 auto;
width: 751px;
height: 100px;
background: #fff url(graphics/bottombar.jpg) no-repeat 0 0;
}

.clear{
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px; 
}

#header{
width:751px;
height:144px;
background: #fff url(graphics/topbar.jpg) no-repeat 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

/* header content */

#flag{
width: 748px;
height: 30px;
text-align: right;
}

img.flag{
padding: 7px 7px 0 0;
}

#topmenu{
width: 717px;
text-align: right;
margin: 97px 0 0 0;
padding: 0 0 0 0;
}

a.topmenu:link, a.topmenu:visited{
color: #d59f00;
text-decoration: none;
font-size: 10px;
padding: 0 0 0 19px;
}

a.topmenu:hover, a.topmenu:active{
color: #d59f00;
text-decoration: underline;
font-size: 10px;
}

/* midsection divs */

#nav{
float: left;
width:175px;
color: #fff;
font-size: 15px;
font-weight: bold;
padding-left: 12px;
padding-bottom: 100px; /* content divs need to have the same height as footer */
}

#main{
float: left;
width: 500px;
margin: 0 0 0 0;
font-size: 11px;
text-align:left;
padding-bottom: 100px; /* content divs need to have the same height as footer */
}

/* settings for image rollover menu without html text on buttons */

.menu {
margin: 0;
padding: 0;
width: 167px; /* width of rollover image */
list-style: none;
}

.menu li {
padding: 0;
margin: 0;
height: 30px; /* height of rollover image */
list-style: none;
background-repeat: no-repeat;
}

.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -9999px; /* push the text out of the way while keeping it still there for text readers and google */
outline: none; /* getting rid of the link outline in Firefox due to text-indent */
height: 30px; /* height of rollover image */
background-repeat: no-repeat;
}

/* rollover states for dutch version */
.mediascape {background-image: url(graphics/nav-mediascape-on.gif);} /* rollover state */
.mediascape a {background-image: url(graphics/nav-mediascape.gif);} /* normal state */
.diensten {background-image: url(graphics/nav-diensten-on.gif);}
.diensten a {background-image: url(graphics/nav-diensten.gif);}
.werkwijze {background-image: url(graphics/nav-werkwijze-on.gif);}
.werkwijze a {background-image: url(graphics/nav-werkwijze.gif);}
.kosten {background-image: url(graphics/nav-kosten-on.gif);}
.kosten a {background-image: url(graphics/nav-kosten.gif);}
.portfolio {background-image: url(graphics/nav-portfolio-on.gif);}
.portfolio a {background-image: url(graphics/nav-portfolio.gif);}
.sponsoring {background-image: url(graphics/nav-sponsoring-on.gif);}
.sponsoring a {background-image: url(graphics/nav-sponsoring.gif);}

/* rollover states for english version */
.mediascape-uk {background-image: url(graphics/nav-mediascape-uk-on.gif);}
.mediascape-uk a {background-image: url(graphics/nav-mediascape-uk.gif);}
.diensten-uk {background-image: url(graphics/nav-diensten-uk-on.gif);}
.diensten-uk a {background-image: url(graphics/nav-diensten-uk.gif);}
.werkwijze-uk {background-image: url(graphics/nav-werkwijze-uk-on.gif);}
.werkwijze-uk a {background-image: url(graphics/nav-werkwijze-uk.gif);}
.kosten-uk {background-image: url(graphics/nav-kosten-uk-on.gif);}
.kosten-uk a {background-image: url(graphics/nav-kosten-uk.gif);}

ul.menu li a:hover {
background: none;
}

/* footer divs */

#terms{
width: 748px;
text-align: right;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#parent{
width: 748px;
text-align: left;
margin: 60px 0 0 0;
padding: 0 0 0 0;
}

a.bottom:link, a.bottom:visited{
color: #d59f00;
text-decoration: none;
font-size: 10px;
padding: 0 36px 0 20px;
}

a.bottom:hover, a.bottom:active{
color: #d59f00;
text-decoration: underline;
font-size: 10px;
}

/* content styling */

#header-mediascape {
text-align: left;
text-indent: -9999px; /* push the text out of the way while keeping it still there for text readers and google*/
background: url(graphics/header-mediascape.gif) no-repeat 0 0;
height: 33px;
margin-top: 0;
padding-bottom: 0;
}

img.foto1{
float:right;
padding: 0 0 0 3px;
}

p {
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 1em;
margin-left: 0;
}

a:link, a:visited{
color: #264D85;
text-decoration: none;
font-size: 11px;
}

a:hover, a:active{
color: #264D85;
text-decoration: underline;
font-size: 11px;
}

p.homestart {
padding: 0;
margin-top: 10px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

p.doublespace {
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 2em;
margin-left: 0;
}

p.lotsaspace {
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 10em;
margin-left: 0;
}

.vet {
font-weight: bold;
}

.schuin {
font-style:italic;
}

ul{
margin: 10px 0 10px 50px;
padding: 0;
list-style: square;
}

li{
margin: 5px 0 0 0;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="nl">
<head>
<title>Mediascape - design &amp; development: webdesign, e-commerce, content management, banners, huisstijlen, logo's, flyers, reklame en meer</title>
<meta name="keywords" content="webdesign, website, website prijzen, webdesign tarieven,website tarieven, MKB, intranet, midden en kleinbedrijf, emmeloord, noordoostpolder, flevoland, foto's vrijmaken, vrijmaken, foto's uitknippen, uitknippen, betaalbaar, voor elk budget, webdevelopment, webpromotion, webpromotie, business solutions, ecommerce, e-commerce, online, websites, ontwerp, websiteontwerp, grafisch, webdesignbureau, webdesign bureau, webdesignburos, webdesignburo, webontwerp, sitebouw, design, ontwerp, ontwerpen, winkels, shop, shops, webshop, advies, consultancy, restyling, zoekmachine , restyle, aanmelden , internet marketing , content management, CMS, open source oplossingen, website laten ontwerpen, websiteontwerp, website ontwerp, betaalbaar, webcommunicatie, internetbureau, grafisch ontwerp, goedkoop websiteontwerp, website creatie, bouwen, maken, ontwerpen, design, marketing, website maken, reclamebureau, website ontwerpen, website bouwen, huisstijl, logo, visitekaartjes, internet, internetsite, ontwikkeling, webdesign, site, webpagina, communicatie, grafisch, grafische, vormgeving, professionele, professioneel, web, intranet, webmarketing, cd-rom, adviesbureau, advies, multimedia, banner, flyer, folder, netwerk, promotie,  business-to-business, b2b, b2c, portal, oscommerce, startende, onderneming, presentatie, database, zakelijk, e-commerce, e-business, b-to-b, b-to-c, html, pagina, marktonderzoek, nl, bedrijfslogo, Mediascape, internet marketing, website promotie, fotobewerking, retouchering, cover ontwerp, dvd, dvd hoes, webwinkel, web winkel, internet winkel">
<meta name="description" content="Betaalbare, professionele oplossingen voor internet en multimedia. Uw adres voor onder meer webdesign, e-commerce, content management, banners, huisstijlen, logo's, visitekaartjes, etc.">
<meta name="robots" content="index, follow">    
<meta name="lang" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="opmaak.css" rel="stylesheet" type="text/css">
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
</head>
<body>
<!--start container-->
<div id="container">
<!--start header-->
<div id="header">
<div id="flag"><a href="uk/uk-index.htm" target="_top"><img src="graphics/flag-uk.jpg" width="24" height="15" border="0" alt="english flag" title="switch to english" class="flag"></a></div>
<div id="topmenu"><a href="nl-index.htm" target="_top" class="topmenu">home</a><a href="nl-contact.htm" target="_top" class="topmenu">contact</a></div>
</div>
<!--einde header-->
<!--start content-->
<div id="nav">
<ul class="menu">
<li class="mediascape"><a href="nl-mediascape.htm" target="_top">over mediascape</a></li>
<li class="diensten"><a href="nl-diensten.htm" target="_top">diensten</a></li>
<li class="werkwijze"><a href="nl-werkwijze.htm">werkwijze</a></li>
<li class="kosten"><a href="nl-kosten.htm">kosten</a></li>
<li class="portfolio"><a href="nl-portfolio.htm">portfolio</a></li>
<li class="sponsoring"><a href="nl-sponsoring.htm">sponsoring</a></li>
</ul>

</div>
<div id="main">
<p class="homestart"></p>
<p>Mediascape staat voor:
<ul type="square">
<li>een hoogwaardig eindresultaat tegen een aantrekkelijke prijs</li>
<li>ruime ervaring en expertise</li>
<li>flexibiliteit</li>
<li>klantvriendelijkheid</li>
</ul></p>
<p>U kunt bij ons terecht voor een breed scala aan grafisch ontwerp, internet en multimedia diensten. Van websites en cd-roms tot flyers en huisstijlen. Mediascape levert maatwerk, op basis van uw specifieke wensen.</p>
<p>Zo bent u ten alle tijden gegarandeerd van een uniek resultaat.</p>
<img src="graphics/office.jpg" width="320" height="165" border="0" alt="foto van kantoorgebouw" class="foto1"><p>Hoewel ontwerp en realisatie onze primaire activiteiten zijn stopt onze dienstverlening hier vanzelfsprekend niet.</p>
<p>We adviseren, initi&euml;ren en concretiseren zaken voor u die wellicht anders zouden blijven liggen. </p>
<p>Door actief mee te denken voor wat betreft uw marketing en communicatie komen we gezamelijk tot nieuwe inzichten en mogelijkheden voor uw bedrijf. </p>
<p>Daarnaast kunnen we u  voorzien van advies op automatiserings gebied,  optreden als intermediair richting toeleveranciers als drukkers en providers. En zijn we desgewenst 
      beschikbaar als onafhankelijk adviseur bij (relevante) vraagstukken binnen uw onderneming.</p>
<p>Overtuig uzelf van wat Mediascape allemaal voor uw organisatie kan betekenen.</p>
</div>
<!--einde content-->
<div class="clear"></div>
</div>
<!--einde container-->
<div id="footer">
<div id="terms"><a href="nl-voorwaarden.htm" target="_top" class="bottom">algemene voorwaarden</a></div>
<div id="parent"><a href="http://www.altculture.nl" target="_top" class="bottom">an Alt. Culture company</a></div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4586093-1");
pageTracker._initData();
pageTracker._trackPageview();
</script></body>
</html>

[Centauri]

Although the container has a negative bottom margin, the footer links are still being pushed down by the floated #main with it's large bottom padding. Rather than providing space below the content with the bottom padding on #main, remove that and set the height of .clear to 100px instead (and remove the negative top margin from it).

[Draxeiro]

Thanks a million, Centauri!

That was indeed the solution. I had already experimented in deleting the two divs from the footer. Then the problem was gone though I couldn't immediately figure out why. But upon reading your explanation it is only more than logical: the bottom-padding on #main was pushing down the two divs in the footer.

I had previously solved it this way (with help from you too, by the way), worked fine but then the footer was empty. Now it clearly was not.

As I am still learning the ropes and getting to grips with css, input like this works wonders

So if I want a 100% height and contents in the footer I basically have to do it like this (height on .clear instead of padding-bottom on the content div). Right?

By the way, just so that I understand the logic behind it better: .clear now has a height of 100px (same as footer and the negative bottom margin on container). How come it doesn't push down the two divs in the footer like the padding on #main did? Because the overflow is hidden? Other reason?

In any case, thanks for the help

[Centauri]

Using the .clear div to push the container down means the negative bottom margin is not being pulled over a floated element - floats have special properties relating to the content around them.

Another method of doing the same thing is to use a negative top margin on the footer instead of the negative bottom margin on the container, and in this case bottom padding on #main would work ok.

[Draxeiro]

Sounds absolutely logical. So I tried it out. But couldn't get it to work. With the padding-bottom back on #main the two divs in footer were still being pushed down when the window is resized or when a lot of content is in the main div.

Maybe I forgot to include something? Included the margin-top on footer, deleted the margin-bottom on container. Changed .clear back to its old version and re-added the padding-bottom to #main (and #nav, that one is usually shorter than main but there may be some pages in the site where main contains less text). I think those were the steps in any case...

What I've done is made a copy of the stylesheet and the html page and parked those here:

http://www.mediascape.nl/test/test.htm
http://www.mediascape.nl/test/test.css

and here's the code

html, body {
height: 100%;
}

body{
text-align: center;
background: #dad7dd;
font-family: verdana, arial, helvetica, sans-serif;
margin:0;
padding:0;
}

/* basic setup */

#container{
margin: 0 auto;
width: 751px;
min-height: 100%;
text-align: left;
background: #fff url(graphics/main-bg.gif) repeat-y 0 0;
}

#footer{
margin: -100px auto 0 auto;
width: 751px;
height: 100px;
background: #fff url(graphics/bottombar.jpg) no-repeat 0 0;
}

.clear{
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px; 
}

#header{
width:751px;
height:144px;
background: #fff url(graphics/topbar.jpg) no-repeat 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

/* header content */

#flag{
width: 748px;
height: 30px;
text-align: right;
}

img.flag{
padding: 7px 7px 0 0;
}

#topmenu{
width: 717px;
text-align: right;
margin: 97px 0 0 0;
padding: 0 0 0 0;
}

a.topmenu:link, a.topmenu:visited{
color: #d59f00;
text-decoration: none;
font-size: 10px;
padding: 0 0 0 19px;
}

a.topmenu:hover, a.topmenu:active{
color: #d59f00;
text-decoration: underline;
font-size: 10px;
}

/* midsection divs */

#nav{
float: left;
width:175px;
color: #fff;
font-size: 15px;
font-weight: bold;
padding-left: 12px;
padding-bottom: 100px; /* content divs need to have the same height as footer */
}

#main{
float: left;
width: 500px;
margin: 0 0 0 0;
font-size: 11px;
text-align:left;
padding-bottom: 100px; /* content divs need to have the same height as footer */
}

/* settings for image rollover menu without html text on buttons */

.menu {
margin: 0;
padding: 0;
width: 167px; /* width of rollover image */
list-style: none;
}

.menu li {
padding: 0;
margin: 0;
height: 30px; /* height of rollover image */
list-style: none;
background-repeat: no-repeat;
}

.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -9999px; /* push the text out of the way while keeping it still there for text readers and google */
outline: none; /* getting rid of the link outline in Firefox due to text-indent */
height: 30px; /* height of rollover image */
background-repeat: no-repeat;
}

/* rollover states for dutch version */
.mediascape {background-image: url(graphics/nav-mediascape-on.gif);} /* rollover state */
.mediascape a {background-image: url(graphics/nav-mediascape.gif);} /* normal state */
.diensten {background-image: url(graphics/nav-diensten-on.gif);}
.diensten a {background-image: url(graphics/nav-diensten.gif);}
.werkwijze {background-image: url(graphics/nav-werkwijze-on.gif);}
.werkwijze a {background-image: url(graphics/nav-werkwijze.gif);}
.kosten {background-image: url(graphics/nav-kosten-on.gif);}
.kosten a {background-image: url(graphics/nav-kosten.gif);}
.portfolio {background-image: url(graphics/nav-portfolio-on.gif);}
.portfolio a {background-image: url(graphics/nav-portfolio.gif);}
.sponsoring {background-image: url(graphics/nav-sponsoring-on.gif);}
.sponsoring a {background-image: url(graphics/nav-sponsoring.gif);}

/* rollover states for english version */
.mediascape-uk {background-image: url(graphics/nav-mediascape-uk-on.gif);}
.mediascape-uk a {background-image: url(graphics/nav-mediascape-uk.gif);}
.diensten-uk {background-image: url(graphics/nav-diensten-uk-on.gif);}
.diensten-uk a {background-image: url(graphics/nav-diensten-uk.gif);}
.werkwijze-uk {background-image: url(graphics/nav-werkwijze-uk-on.gif);}
.werkwijze-uk a {background-image: url(graphics/nav-werkwijze-uk.gif);}
.kosten-uk {background-image: url(graphics/nav-kosten-uk-on.gif);}
.kosten-uk a {background-image: url(graphics/nav-kosten-uk.gif);}

ul.menu li a:hover {
background: none;
}

/* footer divs */

#terms{
width: 748px;
text-align: right;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#parent{
width: 748px;
text-align: left;
margin: 60px 0 0 0;
padding: 0 0 0 0;
}

a.bottom:link, a.bottom:visited{
color: #d59f00;
text-decoration: none;
font-size: 10px;
padding: 0 36px 0 20px;
}

a.bottom:hover, a.bottom:active{
color: #d59f00;
text-decoration: underline;
font-size: 10px;
}

/* content styling */

#header-mediascape {
text-align: left;
text-indent: -9999px; /* push the text out of the way while keeping it still there for text readers and google*/
background: url(graphics/header-mediascape.gif) no-repeat 0 0;
height: 33px;
margin-top: 0;
padding-bottom: 0;
}

#header-kosten {
text-align: left;
text-indent: -9999px; /* push the text out of the way while keeping it still there for text readers and google*/
background: url(graphics/header-kosten.gif) no-repeat 0 0;
height: 33px;
margin-top: 0;
padding-bottom: 0;
}

#header-sponsoring {
text-align: left;
text-indent: -9999px; /* push the text out of the way while keeping it still there for text readers and google*/
background: url(graphics/header-sponsoring.gif) no-repeat 0 0;
height: 33px;
margin-top: 0;
padding-bottom: 0;
}

#header-werkwijze {
text-align: left;
text-indent: -9999px; /* push the text out of the way while keeping it still there for text readers and google*/
background: url(graphics/header-werkwijze.gif) no-repeat 0 0;
height: 33px;
margin-top: 0;
padding-bottom: 0;
}

img.foto1{
float:right;
padding: 0 0 0 3px;
}

p {
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 1em;
margin-left: 0;
}

a:link, a:visited{
color: #264D85;
text-decoration: none;
font-size: 11px;
}

a:hover, a:active{
color: #264D85;
text-decoration: underline;
font-size: 11px;
}

p.homestart {
padding: 0;
margin-top: 10px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

p.doublespace {
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 2em;
margin-left: 0;
}

p.lotsaspace {
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 10em;
margin-left: 0;
}

.vet {
font-weight: bold;
}

.schuin {
font-style:italic;
}

ul{
margin: 10px 0 10px 50px;
padding: 0;
list-style: square;
}

li{
margin: 5px 0 0 0;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="nl">
<head>
<title>Mediascape - design &amp; development: webdesign, e-commerce, content management, banners, huisstijlen, logo's, flyers, reklame en meer</title>
<meta name="keywords" content="webdesign, website, website prijzen, webdesign tarieven,website tarieven, MKB, intranet, midden en kleinbedrijf, emmeloord, noordoostpolder, flevoland, foto's vrijmaken, vrijmaken, foto's uitknippen, uitknippen, betaalbaar, voor elk budget, webdevelopment, webpromotion, webpromotie, business solutions, ecommerce, e-commerce, online, websites, ontwerp, websiteontwerp, grafisch, webdesignbureau, webdesign bureau, webdesignburos, webdesignburo, webontwerp, sitebouw, design, ontwerp, ontwerpen, winkels, shop, shops, webshop, advies, consultancy, restyling, zoekmachine , restyle, aanmelden , internet marketing , content management, CMS, open source oplossingen, website laten ontwerpen, websiteontwerp, website ontwerp, betaalbaar, webcommunicatie, internetbureau, grafisch ontwerp, goedkoop websiteontwerp, website creatie, bouwen, maken, ontwerpen, design, marketing, website maken, reclamebureau, website ontwerpen, website bouwen, huisstijl, logo, visitekaartjes, internet, internetsite, ontwikkeling, webdesign, site, webpagina, communicatie, grafisch, grafische, vormgeving, professionele, professioneel, web, intranet, webmarketing, cd-rom, adviesbureau, advies, multimedia, banner, flyer, folder, netwerk, promotie,  business-to-business, b2b, b2c, portal, oscommerce, startende, onderneming, presentatie, database, zakelijk, e-commerce, e-business, b-to-b, b-to-c, html, pagina, marktonderzoek, nl, bedrijfslogo, Mediascape, internet marketing, website promotie, fotobewerking, retouchering, cover ontwerp, dvd, dvd hoes, webwinkel, web winkel, internet winkel">
<meta name="description" content="Betaalbare, professionele oplossingen voor internet en multimedia. Uw adres voor onder meer webdesign, e-commerce, content management, banners, huisstijlen, logo's, visitekaartjes, etc.">
<meta name="robots" content="index, follow">    
<meta name="lang" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
</head>
<body>
<!--start container-->
<div id="container">
<!--start header-->
<div id="header">
<div id="flag"><a href="uk/uk-index.htm" target="_top"><img src="graphics/flag-uk.jpg" width="24" height="15" border="0" alt="english flag" title="switch to english" class="flag"></a></div>
<div id="topmenu"><a href="nl-index.htm" target="_top" class="topmenu">home</a><a href="nl-contact.htm" target="_top" class="topmenu">contact</a></div>
</div>
<!--einde header-->
<!--start content-->
<div id="nav">
<ul class="menu">
<li class="mediascape"><a href="nl-mediascape.htm" target="_top">over mediascape</a></li>
<li class="diensten"><a href="nl-diensten.htm" target="_top">diensten</a></li>
<li class="werkwijze"><a href="nl-werkwijze.htm">werkwijze</a></li>
<li class="kosten"><a href="nl-kosten.htm">kosten</a></li>
<li class="portfolio"><a href="nl-portfolio.htm">portfolio</a></li>
<li class="sponsoring"><a href="nl-sponsoring.htm">sponsoring</a></li>
</ul>

</div>
<div id="main">
<h1 id="header-mediascape">Over Mediascape</h1>
<p>Mediascape heeft zich ten doel gesteld een breed scala aan diensten binnen handbereik van een grotere doelgroep te brengen.</p>
<p>We staan voor <a href="nl-portfolio.htm" target="_top">kwaliteit</a> maar bieden onze diensten aan tegen concurrerende tarieven, door u mee te laten profiteren van het kostenvoordeel dat we behalen als klein bureau.</p>
<p>Geen prachtig monumentaal pand, dure lease-auto's voor de deur en iedereen een laptop. Nee, we concentreren ons liever op wat echt belangrijk is: de klant en een kwalitatief hoogwaardig eindresultaat.</p>
<img src="graphics/explore.jpg" width="320" height="165" class="foto1"><p>Voor veel kleinere bedrijven zijn zaken als folders, logo's, huisstijlen maar ook een website vaak te duur om echt profesioneel aan te laten pakken. Reclame en ontwerpbureaus berekenen tarieven die het voor deze bedrijven vaak een onrendabele investering maken.</p>
<p>Dan blijft er een gezond stuk huisvlijt, een handige kennis of de plaatselijke copyshop over, die dit soort zaken er vaak wel bij doet. Zo ook met websites, er zijn vele kleine bureautjes die u voor bodemprijzen hun diensten aanbieden. </p>
<p>Nadeel van deze aanpak is dat het eindresultaat vaak niet echt professioneel oogt, er 13 van in een dozijn gaan of eigenlijk gewoonweg slecht is. Goedkoop is in deze gevallen helaas vaak duurkoop.</p>
<p>Mediascape daarentegen levert maatwerk, toegesneden op uw organisatie. Unieke ontwerpen, kwalitatief hoogstaand maar tegen een <a href="nl-kosten.htm" target="_top">tarief</a> dat ook binnen &uacute;w budget past. We realiseren projecten voor zowel kleine als grote organisaties, van &eacute;&eacute;n-mans bedrijf tot pensioenfonds.</p>
<p>Dankzij onze ruime ervaring en expertise bent u verzekerd van een zeer professioneel resultaat, zowel technisch als grafisch.</p>
</div>
<!--einde content-->
<div class="clear"></div>
</div>
<!--einde container-->
<div id="footer">
<div id="terms"><a href="nl-voorwaarden.htm" target="_top" class="bottom">algemene voorwaarden</a></div>
<div id="parent"><a href="http://www.altculture.nl" target="_top" class="bottom">an Alt. Culture company</a></div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4586093-1");
pageTracker._initData();
pageTracker._trackPageview();
</script></body>
</html>

[Centauri]

Yes, you're correct, the float still pushes the link text down. When I do these type of layouts, I normally don't float the main content and so hadn't noticed the effect of the bottom padding.

[Draxeiro]

If I didn't have that nav bar above I could have solved it without any floats too. Alas, the bar needed to be there.

What I am doing these days is having a good think how a layout can best be solved before diving into the code. Very important thing to do in css (in tables you could always nest a couple more and still get it the way you want).

Anyway, your previous suggestion worked like a charm so all is well. And I am learning fast from your help. So that's marvelous

Thanks!

[Centauri]

Just to show there are other ways, #main doesn't have to be floated - instead of giving it a width, you can just specify the appropriate margins :

#main{
margin: 0 50px 0 187px;
font-size: 11px;
text-align:left;
padding-bottom: 100px; /* content divs need to have the same height as footer */
}

[Draxeiro]

Hiya,

First of all thanks for the tip. It's a good couple of days later now but I have been swamped in work.

I gave your tip a try on another part of the site but found out that the contents of the div I gave the margins to start below the div to it's left.

Which does indeed seem logical at first glance. But how to make sure that the content also starts a the same height as in the other div?

I also still need to display the company name a bit lower, though padding on that div pushes the other divs down oddly enough.

Here's the url: http://www.mediascape.nl/test/nl-portfolio-.htm

Here's the corresponding part in the css

/* containers for the portfolio page */

#work{
width:490px;
background: #fff url(graphics/portfolio-bg.gif) repeat-y 0 0;
margin: 0;
}

#work-header{
width:490px;
height: 64px;
background: #fff url(graphics/portfolio-top.gif) no-repeat 0 0;
font-size: 11px;
font-weight: bold;
margin: 0;
}

#work-content{
width: 352px;
font-size: 11px;
margin: 0;
}

#work-sidebar{
margin: 0 10px 0 360px;
padding: 5px 0 0 0;
}

#work-sidebar-ftr{
width: 490px;
height: 37px;
background: #fff url(graphics/portfolio-bottom.gif) no-repeat 0 0;
}

and the html

<body>
<!--start container-->
<div id="container">
<!--start header-->
<div id="header">
<div id="flag"><a href="uk/uk-index.htm" target="_top"><img src="graphics/flag-uk.jpg" width="24" height="15" border="0" alt="english flag" title="switch to english" class="flag"></a></div>
<div id="topmenu"><a href="nl-index.htm" target="_top" class="topmenu">home</a><a href="nl-contact.htm" target="_top" class="topmenu">contact</a></div>
</div>
<!--einde header-->
<!--start content-->
<div id="nav">
<ul class="menu">
<li class="mediascape"><a href="nl-mediascape.htm" target="_top">over mediascape</a></li>
<li class="diensten"><a href="nl-diensten.htm" target="_top">diensten</a></li>
<li class="werkwijze"><a href="nl-werkwijze.htm">werkwijze</a></li>
<li class="kosten"><a href="nl-kosten.htm">kosten</a></li>
<li class="portfolio"><a href="nl-portfolio.htm">portfolio</a></li>
<li class="sponsoring"><a href="nl-sponsoring.htm">sponsoring</a></li>
</ul>

</div>
<div id="main">
<h1 id="header-portfolio">Portfolio</h1>
<p>Op deze pagina vindt u een overzicht van projecten die we reeds gerealiseerd hebben. In de 'Project(en)' kolom ziet u in &eacute;&eacute;n oogopslag wat wij voor de desbetreffende organisatie hebben mogen betekenen. Mits het project online te bezichtigen is, toont een klik met uw muis ons werk.</p>
<div id="work">
<div id="work-header">company name </div>
<div id="work-content">content goes here and lots of other descriptive text. just to show the content of the neighbouring div start when this text stops. </div>
<div id="work-sidebar">contents</div>
<div id="work-sidebar-ftr"></div>
</div>
</div>
<!--einde content-->
<div class="clear"></div>
</div>
<!--einde container-->
<div id="footer">
<div id="terms"><a href="nl-voorwaarden.htm" target="_top" class="bottom">algemene voorwaarden</a></div>
<div id="parent"><a href="http://www.altculture.nl" target="_top" class="bottom">an Alt. Culture company</a></div>
</div>
</body>

[Centauri]

Firstly, as #work-header is a heading, mark it up as one, which then eliminates another div :

<div id="work">
<h2>company name </h2>
<div id="work-content">content goes here and lots of other descriptive text. just to show the content of the neighbouring div doesn't start when this text stops. </div>
<div id="work-sidebar">contents</div>
<div id="work-sidebar-ftr"></div>
</div>

This can be targeted via the container name, and top padding can push the text down as long as you account for that padding in the total height :

#work h2{
width:490px;
height: 24px;
background: #fff url(graphics/portfolio-top.gif) no-repeat 0 0;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 40px 0 0;
}

The right column starts after the left as the left is not floated (divs normally force a line feed as they are block level, unless floated). The sidebar footer also then should have a clear to make sure it is below the float if the float is longer :

#work-content{
width: 352px;
font-size: 11px;
margin: 0;
float: left;
}

#work-sidebar{
margin: 0 10px 0 360px;
padding: 5px 0 0 0;
}

#work-sidebar-ftr{
width: 490px;
height: 37px;
background: #fff url(graphics/portfolio-bottom.gif) no-repeat 0 0;
clear: both;
}