Results 1 to 4 of 4

Thread: Padding for no reason, but remedied by border?

  1. #1
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Padding for no reason, but remedied by border?

    Code on the page:

    Code:
    <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:

    Code:
    .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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default might not work on IE

    .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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    That's right! You can use 100% height. But you may have to set it on all the parents:

    HTML Code:
    <div class="wrapper_page">
    	<div class="wrapper_widebackground">
    		<div class="wrapper_body">
    as well, including body and html tags. And since:

    HTML Code:
    			<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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •