Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
HI
I am working on the layout below but i have a slight problem.
I would like the page to finish at the footer but in IE there seems to be alot of extra space after the footer
i have put the code below.
Thanks in advance for your help
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
padding: 0px;
text-align: center;
background-color: yellow;
}
#holder {
padding: 0px;
text-align: left;
width: 760px;
height: 5px;
margin-right: auto;
margin-left: auto;
/*background-color: #99cc99;
*/
}
#side_spacer{
position: relative;
width: 21;
height: 855;
background-color: blue;
}
#top{
position: relative;
top: -855px;
left: 21px;
padding: 0px;
margin: 0px;
width: 739px;
height: 179;
background-color: green;
}
#content{
position: relative;
top: -861px;
left: 21px;
width: 739;
height: 569;
background-color: white;
}
#footer{
position: relative;
top: -865px;
left: 21px;
width: 739px;
height: 196px;
background-color: brown;
}
</style>
</head>
<body>
<div id="holder">
<div id="side_spacer"></div>
<div id="top"></div>
<div id="content">
</div>
<div id="footer"></div>
</div>
</body>
</html> -
- CommentAuthorjoshharbaugh
- CommentTimeMar 28th 2008
Something like this?
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
padding: 0;
text-align: center;
background-color: yellow;
margin: 0;
}
#holder {
padding: 0;
text-align: left;
width: 760px;
margin: 0;
margin-right: auto;
margin-left: auto;
}
#side_spacer{
position: relative;
float: left;
width: 21px;
height: 855px;
background-color: blue;
}
#top{
float: left;
display: block;
top: 0;
left: 21px;
padding: 0px;
margin: 0px;
width: 739px;
height: 179px;
background-color: green;
}
#content{
float: left;
top: 0;
left: 21px;
width: 739px;
height: 569px;
background-color: white;
}
#footer{
float: left;
width: 739px;
height: 196px;
margin: 0;
padding: 0;
background-color: brown;
}
</style>
</head>
<body>
<div id="holder">
<div id="side_spacer"></div>
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html> -
Yes thanks very much this works well.
I am still a beginner so im learning as i go along.
Could you please give me some tips on where my original code was going wrong.
Thank you for your time -
- CommentAuthorjoshharbaugh
- CommentTimeApr 3rd 2008
My CSS is using floats to setup all the positioning. I've been doing my DIV positioning with floats for awhile now, and I find that it's a good way to get around having to add negative margins and stuff like that withposition:relative;and/orposition:absolute;
I only really use relative/absolute positioning on elements within a DIV or something. Maybe a headline - that sort of thing. I typically setup a wrapper DIV with floats. Whenever I look at some of the top designers using web standards and what-not they always seemed to be using this technique. So I figured, "If it's good enough for Dan Cederholm, Eric Meyer and Jeffery Zeldman, it's good enough for me." In my experience they've just been easier to work with and more constant across browsers.
1 to 4 of 4