Forums

McCss

Hey guys!!

I am trying to build a very simple layout, I have just three img closed in a div for each one and this div are just one after the other... so it's just a simple 'div after div' in the body... just the only div #wrapper is a container for al those div...

But the wrapper gives me a problem, even if I give it {height: 100%;} or even if I don't give it height at all, it goes on down after the height of the #footer div, showing a big space at the bottom of the page...

I can't cut that white space out... just one thing more... the div #blocco-pag is in tha relative position to stay over the gray #footer... if this can help...

I past the code:

body{
	margin: 0px;
	padding: 0px;
	height: 100%;
	overflow: auto;
	background: #0c617a;
	background-image: url(img/rep_bkg.png);
	background-repeat: repeat;

}


#wrapper{
	margin: auto;
	background-color: white;
	border-right: 1px solid white; 
	border-left:  1px solid white;
	width: 1024px;

}

#header{
      	background-image: url(img/header.png);
        width: 1024px;
	height: 246px;
	margin: auto;
	margin-bottom: 80px;

}
#ret_sup{
 	background-image: url(img/ret_sup.png);
        width: 836px;
	height: 317px;
	margin: auto;
	

}

#blocco_pag{
	background-image: url(img/blocco_pag.png);
	width: 895px;
	height: 1046px;
	margin: auto;
	position: relative;
	z-index: 5;
}


#footer {
	background-image: url(img/footer_rep.png);
	background-repeat: repeat;
	width: 1024px;
	height: 350px;
	color: white;
	position: relative;
	bottom: 250px;
	
	
}

h6{
	padding-top: 230px;
      	font-size: 14px;
        font-weight: normal;
	text-align: center;
	font-family: Adobe Caslon Pro,\"Times New Roman\",Times,serif;
}

And html code:

<body>

<div id=\"wrapper\">
<div id=\"header\"></div>
<div id=\"ret_sup\"></div>
<div id=\"blocco_pag\"></div>
<div id=\"footer\">
	<h6>----------------<br> 
	---------------------.</h6>
</div>  
</div>
</body>

Any suggest?? thank you !!!

EamonnMac

Sorry, which div are the images in? Are they side by side or stacked vertically?

McCss

Any div has got an own img, loaded in the CSS, and all the div stuck vertically on the page... the #wrapper div is the container for all this vertical divs

apostrophe

As you have given everything else a fixed height you may as well give the wrapper a fixed height too.

McCss

@ apostrophe

Thx for the advise! But this is a bad news for me... I used to thought that if I gave a percent% of height to the #wrapper div, I could add ay number of divs into it, and so the #wrapper just would followed the number and dimensions of div...

This my thought and doubt come from a little experience making sites and templates with CSS, my attempt is to build a template that could be increase in the future just adding more div that I want... but always with the #footer at the bottom of the page...

But... if you tell me that is not wrong to fixed a height to the #wrapper div I will do it... I just wish to be sure to don't force my layout in a wrong way just from beginnings...

PS: I see now that fixed heights are different for different browsers...

apostrophe

No it is not a good idea to give the wrapper a fixed height but I am struggling to understand your code or see what you are trying to achieve.
How about this:
Make the wrapper position:relative and the footer position: absolute then position the footer -100px from the bottom.

#wrapper {
 position:relative;
}

#footer {
 position: absolute;
 bottom: -100px;
}

treehouse : what would you like to learn today?

Forums

Footer with a wrong white space below...