Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sizing Nested div. Padding, Margin, or Something Else?

    I have two div, nested one inside the other. One needs to be width: 80%, and the other needs to be 46 pixles smaller then that, centered. I'm not exactly sure how to achieve this. I was thinking to use padding or margins, 23px left and right, but I'm not sure which would be better, or which div I should put it in.

    HTML:
    Code:
    			<div id="header">
    				<img src="http://jfinner1.co.cc/images/scrollleft.gif" align="left" alt="Scroll">
    					<div id="headertext">
    						Title Goes Here
    					</div>
    				<img src="http://jfinner1.co.cc/images/scrollright.gif" align="right" alt="Scroll">
    			</div>
    CSS:
    Code:
    		#header{
    			height: 100px;
    			width: 80%;
    			position: absolute;
    			top:20px;
    			left: 200px;
    			z-index: 1;
    		}
    		#headertext{
    			background: url("images/scrollbg.gif");
    			position: absolute;
    			top: 0px;
    			width: 100%;
    			height: 100px;
    			text-align: center;
    			z-index: 1;
    			font-size: 30px;
    			line-height: 100px;
    		}

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello jfinner1,
    Since your scroll gifs are presentational and not really content, I think they belong as backgrounds.
    Try nesting things like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container {
    	width: 80%;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    #header_out {
    	height: 100px;
    	background: #ccc url(http://jfinner1.co.cc/images/scrollleft.gif) no-repeat;
    	/*position: absolute;
    	top:20px;
    	left: 200px;
    	z-index: 1;*/
    }
    #header_in {
    	background: url(http://jfinner1.co.cc/images/scrollright.gif) no-repeat right;
    }
    #headertext {
    	background: url(http://jfinner1.co.cc/images/scrollbg.gif) repeat-x;
    	margin: 0 23px;
    	text-align: center;
    	font-size: 30px;
    	line-height: 100px;
    	/*position: absolute;
    	top: 0px;
    	width: 100%;
    	z-index: 1;*/
    }
    #content {
    	height: 400px;
    	text-align: center;
    	padding: 50px 0 0;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="header_out">
                <div id="header_in">
                    <div id="headertext">
                        Title Goes Here
                    <!--end headertext--></div>
                <!--end header_in--></div>
            <!--end header_out--></div>
                <div id="content">
                    some website here
                <!--end content--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked beautifully! Thank you so much! :-)


  •  

    Posting Permissions

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