Log in

View Full Version : Padding for no reason, but remedied by border?


mrgrammar
07-07-2011, 01:46 AM
Code on the page:



<body>
<div class="wrapper_page">
<div class="wrapper_widebackground">
<div class="wrapper_body">
<div class="wrapper_head"><img src="Header.jpg" width="1000" height="182" /></div>
<div class="wrapper_nav_top"><!-- navbar goes here --></div>
<div class="wrapper_main">
<div class="wrapper_main_insidebackground_blue">
<div class="wrapper_main_insidebackground_white">
<div class="wrapper_main_top"><img src="PageBodyTop.png" width="1000" height="35" /></div>
<div class="wrapper_main_content">
<div class="wrapper_main_sword">
<!-- Content here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>


Stylesheet:



.wrapper_page {
text-align: center;
width: 100%;
border: 0px solid #FFFF00;
}
.wrapper_widebackground {
background-image: url(../Cloth.png);
width: 1350px;
background-repeat: no-repeat;
margin: auto;
clear: both;
border: 0px solid #FF0000;
}
.wrapper_body {
text-align: left;
margin: auto;
clear: both;
width: 1000px;
border: 0px solid #FF00FF;
padding: 0px;
}

.wrapper_head {
height: 182px;
width: 1000px;
border: 0px solid #33FF00;
margin: 0px;
padding: 0px;
}
.wrapper_nav_top {
height: 24px;
width: 1000px;
border: 0px solid #FFFF00;
margin: 0px;
padding: 0px;
}
.wrapper_main {
background-color: #000000;
background-image: url(../background.jpg);
margin: auto;
padding: 0px;
background-position: top;
background-repeat: repeat;
clear: both;
border: 0px solid #99FFFF;
}
.wrapper_main_insidebackground_blue {
background-repeat: no-repeat;
background-image: url(..Blue.jpg);
background-position: top;
background-color: #000000;
}
.wrapper_main_insidebackground_white {
background-repeat: repeat-y;
background-image: url(..White.png);
background-position: top;
}
.wrapper_main_top {
border: 0px solid #00FF00;
height: 35px;
width: 1000px;
margin: 0px;
padding: 0px;
clear: both;
}

.wrapper_main_sword {
background-image: url(../Sword.png);
background-repeat: no-repeat;
background-position: right top;
vertical-align: top;
padding: 0px;
margin-top: -14px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border: 0px solid #FF33CC;
}

.wrapper_main_content {
border: 0px solid #FF9900;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 90px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}


Here's the issue. wrapper_main will not stretch all the way to the bottom of the page regardless of the amount of text. It maintains what seems to be a margin whether I put a margin of 0 there or not. (Currently, it is set to auto.)

I thought maybe wrapper_body was causing the issue, but setting the padding to 0 on wrapper_body did not work.

Here's the confusing part. If I set a border with a width of 1px on wrapper_main, it goes all the way to the bottom. However, the border looks bad on the page so I don't want the border.

Why is this happening and how do I remedy it?
jscheuer1
07-07-2011, 08:39 AM
Why do you have clear styles? You only need to clear if there are float styles. Using clear without any float styles does nothing. If you do have floats, try setting their overflow to hidden. That often works to allow the parent and subsequent elements to have a fuller layout.

But if setting a 1px border works, you might be able to do so without making it look bad if you use the same color for the border as you use for the background. Alternatively a 1px margin or padding might do the trick.
damian83
07-07-2011, 12:49 PM
.wrapper_main {
background-color: #000000;
background-image: url("../background.jpg");
background-position: center top;
background-repeat: repeat;
border: 0 solid #99FFFF;
clear: both;
height: 100%;
margin: auto;
padding: 0;
}

you want the black box to fill the whole page?

try replacing that css with what i have for you there
jscheuer1
07-07-2011, 01:59 PM
That's right! You can use 100% height. But you may have to set it on all the parents:


<div class="wrapper_page">
<div class="wrapper_widebackground">
<div class="wrapper_body">

as well, including body and html tags. And since:


<div class="wrapper_head"><img src="Header.jpg" width="1000" height="182" /></div>
<div class="wrapper_nav_top"><!-- navbar goes here --></div>

take up some of the space, more precise calculations may be required.

If none of our suggestions help, we would probably have better luck with a link to the page.