Results 1 to 4 of 4
  1. #1
    Join Date
    Apr 2007
    Location
    Chelmsford, Essex
    Posts
    68

    Div/CSS Layout Problem

    I posted this in the wrong thread last night as i was in a rush, and didnt notice this one.

    Hi Everyone, It has been a while since i have been active on the site, but im back :-)

    I have been re-designing my website over the past few weeks, and im making it all CSS/DIV based.

    I have been trying to figure out how to get a section wrking for ages now.

    Basically i want the content section to be dynamically sized, and for it to change depending on the content, and not overlap or disappear under the footer like it is currently.

    I hope you can help me resolve this. The code is below

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
    <style type="text/css">
    body,td,th {
    	font-family: Arial;
    	font-size: 12pt;
    	color: #000;
    }
    body {
    	background-color: #CCC;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    #Page_Wrapper {
    	width: 900px;
    	height: auto;
    	text-align: center;
    }
    #Page_Background {
    	background-image:url(images/page_bg.png);
    	width: 850px;
    	height: auto;
    	left: 0px;
    	top: 0px;
    	text-align: center;
    	padding-right: 25px;
    	padding-left: 25px;
    }
    #Page_Header {
    	position: relative;
    	width: 850px;
    	height: 120px;
    }
    #Header_Left {
    	position: absolute;
    	height: 120px;
    	width: 20px;
    	left: 0px;
    	top: 0px;	
    }
    #Header_Center {
    	position: absolute;
    	height: 120px;
    	width: 810px;
    	left: 20px;
    	top: 0px;	
    }
    #Header_Right {
    	position: absolute;
    	height: 120px;
    	width: 20px;
    	left: 830px;
    	top: 0px;	
    }
    #Page_Navigation {
    	position: relative;
    	width: 850px;
    	height: 50px;
    }
    #Navigation_Left {
    	position: absolute;
    	height: 50px;
    	width: 20px;
    	left: 0px;
    	top: 0px;	
    }
    #Navigation_Center {
    	position: absolute;
    	height: 50px;
    	width: 810px;
    	left: 20px;
    	top: 0px;	
    }
    #Navigation_Right {
    	position: absolute;
    	height: 50px;
    	width: 20px;
    	left: 830px;
    	top: 0px;	
    }
    #Page_Content {
    	position: relative;
    	width: 850px;
    	height: auto;
    }
    #Content_Wrapper {
    	position: fixed;
    	height: auto;
    	overflow: auto;
    }
    #Content_Left {
    	position: absolute;
    	height: auto;
    	width: 150px;
    	left: 0px;
    	top: 0px;	
    }
    #Content_Right {
    	position: absolute;
    	height: auto;
    	width: 700px;
    	left: 150px;
    	top: 0px;	
    }
    #Page_Footer {
    	position: relative;
    	width: 850px;
    	height: auto;
    	text-align: center;
    	padding-top: 5px;
    	padding-bottom: 5px;
    	padding-right: 25px;
    	padding-left: 25px;
    	background-color:#0F6;
    }
    </style>
    </head>
    <body>
    
    <div id="Page_Wrapper">
      <div id="Page_Background">
        <div id="Page_Header">
          <div id="Header_Left"></div>
          <div id="Header_Center"></div>
          <div id="Header_Right"></div>
        </div>
        <div id="Page_Navigation">
          <div id="Navigation_Left"></div>
          <div id="Navigation_Center"></div>
          <div id="Navigation_Right"></div>
        </div>
        <div id="Page_Content">
          <div id="Content_Wrapper">
            <div id="Content_Left">Test<br /><br />Test</div>
            <div id="Content_Right">Test<br /><br />Test</div>
          </div>
        </div>
      </div>
      
      <!--START FOOTER-->
      <div id="Page_Footer">Copyright Notice<br />
    	<a href="http://validator.w3.org/check?uri=referer" target="_new"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a> 
    	<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_new"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" border="0" /></a>
      </div>
      <!--END FOOTER-->
    </div>
    
    
    </body>
    </html>

  2. #2
    Join Date
    May 2005
    Location
    Netherlands
    Posts
    269
    I took your code and tried to explain everything I've modified to it.

    I hope this is what you are looking for... If you have any questions, just ask.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
    <style type="text/css">
    
    body,td,th {
    	font-family: Arial;
    	font-size: 12pt;
    	color: #000;
    }
    
    body {
    	margin: 0;
    	background-color: #CCC;
    }
    
    #Page_Wrapper {
    	width: 900px;
    	text-align: center;
    /*
    	If your purpose with 'text-align: center' is to center align the #Page_Wrapper in the browser instead 
    	of center aligning it's content, this won't work. (by the way, text align: center only centers inline 
    	elements within block elements (or "body"). It doesn't center align block elements (like a div) 
    	within block elements). To center align a block element within it's container ("body" or another 
    	element, like for example "div") you'll need the following:
    	margin: 0 auto;
    */
    
    /*
    	which equals:
    	margin: 0 auto 0 auto
    */
    
    /*
    	which equals:
    	margin-top: 0;
    	margin: right: auto;
    	margin-bottom: 0;
    	margin-left: auto
    */
    	margin: 0 auto;
    }
    
    #Page_Background {
    	position: relative;
    	margin: 0 25px;
    /*
    the 'auto' value lets the #Page_Background horizontally center within the #Page_Wrapper, 
    for more, read above 
    */
    	text-align: center;
    	background-image:url(images/page_bg.png);
    }
    
    #Page_Header {
    	position: relative;
    /* 
    You don't need to declare "width: 850px;", which equals "width: 100%" in this case, 
    since a div is a block element and block elements render "width: 100%" by default 
    */
    
    	height: 120px;
    }
    
    #Header_Left {
    	float: left; 
    /*
    Floating objects fall outside the normal flow of a document. Therefore the wrapping div 
    (#Page_Header) has no height, this is resolved with a work-around described below
    */
    	width: 20px;
    	height: 100%;
    	background-color: #000;
    }
    
    #Header_Center {
    	float: left;
    	width: 810px;
    	height: 100%;
    	background-color: #fff;
    }
    
    #Header_Right {
    	float: left;
    	width: 20px;
    	height: 100%;
    	background-color: #000;
    }
    
    #Page_Navigation {
    	position: relative;
    	height: 50px;
    }
    
    #Navigation_Left {
    	float: left;
    /*
    Floating objects fall outside the normal flow of a document. Therefore the wrapping div 
    (#Page_Navigation) has no height, this is resolved with a work-around described below
    */
    	width: 20px;
    	height: 100%;
    	background-color: #fff
    }
    
    #Navigation_Center {
    	float: left;
    	width: 810px;
    	height: 100%;
    	color: #fff;
    	background-color: #000;
    }
    
    #Navigation_Right {
    	float: left;
    	width: 20px;
    	height: 100%;
    	background-color: #fff;
    }
    
    #Page_Content {
    	position: relative;
    }
    
    #Content_Wrapper {
    
    }
    
    #Content_Left {
    	float: left;
    /*
    Floating objects fall outside the normal flow of a document. Therefore the wrapping div 
    (#Content_Wrapper) has no height, this is resolved with a work-around described below
    */
    	width: 150px;
    	background-color: #f00;
    }
    
    #Content_Right {
    	float: left;
    	width: 700px;
    	background-color: #00f;
    }
    
    #Page_Footer {
    	position: relative;
    	text-align: center;
    	padding: 5px 0;
    	background-color: #0F6;
    }
    
    .clear-floats {
    clear: both 
    /*
    This forces the div, with this class, to clear both its sides from floating 
    objects, which results that the div is forced to a new line, underneath the 
    floating object, thus giving the wrapper div a height
    */
    }
    
    </style>
    </head>
    <body>
    <div id="Page_Wrapper">
    	<div id="Page_Background">
    		<div id="Page_Header">
    			<div id="Header_Left"></div>
    			<div id="Header_Center">Header Center</div>
    			<div id="Header_Right"></div>
    <!-- 
    Because the div's above this line are floating objects (with means of css) and fall outide the 
    normal flow of the document, the containing div they are in with has height. Therefore you need 
    an extra object to help give the containing div a dynamic height. To accomplish this, there is 
    an empty div below, which does fall within the normal flow of the document (no floats or 
    position absolute or fixed). It's only empty because you don't want it to show anything in this 
    case (doesn't mean it can't), it's simply there help give the containing div a height. If you 
    want you can fill it up with all the html you like, but for now it doesn't have any semantic 
    meaning, it's just a visual trick.
    -->
    			<div class="clear-floats"><!-- LEAVE THIS COMMENT TO RENDER THIS EMPTY DIV IN < IE7 --></div>
    		</div>
    		<div id="Page_Navigation">
    			<div id="Navigation_Left"></div>
    			<div id="Navigation_Center">Navigation Center</div>
    			<div id="Navigation_Right"></div>
    			<div class="clear-floats"><!-- LEAVE THIS COMMENT TO RENDER THIS EMPTY DIV IN < IE7 --></div>
    		</div>
    		<div id="Page_Content">
    			<div id="Content_Wrapper">
    			<div id="Content_Left">Content<br /><br />Left</div>
    			<div id="Content_Right">Content<br /><br />Right</div>
    			<div class="clear-floats"><!-- LEAVE THIS COMMENT TO RENDER THIS EMPTY DIV IN < IE7 --></div>
    		</div>
    	</div>
     
    	<!--START FOOTER-->
    	<div id="Page_Footer">Copyright Notice<br />
    		<a href="http://validator.w3.org/check?uri=referer" target="_new"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a> 
    		<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_new"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" border="0" /></a>
    	</div>
    	<!--END FOOTER-->
    </div>
    </body>
    </html>
    Last edited by teamDutch; 12-11-2010 at 08:02 AM.

  3. #3
    Join Date
    Apr 2007
    Location
    Chelmsford, Essex
    Posts
    68
    With a little tweaking it has done EXACTLY what i wanted :-).

    Thankyou so much, I have been pondering over this for WEEKS!

  4. #4
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750
    Is this what you are looking for:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
    <style type="text/css">
    html {
    	height: 100%;
    }
    body,td,th {
    	font-family: Arial;
    	font-size: 12pt;
    	color: #000;
    }
    body {
    	background-color: #CCC;
    	margin: 0;
    	height: 100%;
    	background-image:url(images/page_bg.png);
    	text-align: center;
    	
    }
    #Page_Wrapper {
    	width: 900px;
    	height: 100%;
    	text-align: center;
    	background-color: #008;
    	margin: 0 auto;
    }
    #Page_Header {
    	height: 120px;
    	background-color: #800;
    }
    #Page_Header div.left {
    	float: left;
    	height: 120px;
    	width: 20px;	
    	background-color: #00C;	
    }
    #Page_Header div.center {
    	height: 120px;
    	background-color: #0c0;	
    }
    #Page_Header div.right {
    	float: right;
    	height: 120px;
    	width: 20px;
    	background-color: #c00;
    }
    #Page_Navigation {
    	clear: both;
    	height: 50px;
    	background-color: #088;
    }
    #Page_Navigation div.left {
    	float: left;
    	height: 50px;
    	width: 20px;
    	background-color: #880;
    }
    #Page_Navigation div.center {
    	height: 50px;
    	background-color: #808;
    }
    #Page_Navigation div.right {
    	float:right;
    	height: 50px;
    	width: 20px;
    	background-color: #0c8;
    }
    #Page_Content {
    	position:absolute;
    	top: 170px;
    	bottom:65px;
    	width:900px;
    	background-color: #c80;
    }
    #Page_Content div.left {
    	float:left;
    	height: 100%;
    	width: 150px;
    	background-color: #08c;
    }
    #Page_Content div.right {
    	height: 100%;
    	background-color: #8c0;
    	overflow:auto;
    }
    #Page_Footer {
    	position: absolute;
    	bottom: 0;
    	height:55px;
    	width: 850px;
    	padding: 5px 25px;
    	background-color:#0F6;
    }
    </style>
    </head>
    <body>
    
    <div id="Page_Wrapper">
    	<div id="Page_Header">
    	  <div class="left"></div>	  
    	  <div class="right"></div>
    	  <div class="center"></div>
    	</div>
    	<div id="Page_Navigation">
    	  <div class="left"></div>	  
    	  <div class="right"></div>
    	  <div class="center"></div>
    	</div>
    	<div id="Page_Content">
    		<div class="left">Test<br /><br />Test</div>
    		<div class="right">Test<br /><br />TestTest<br /><br />TestTest<br /><br />TestTest<br /><br />TestTest<br /><br />TestTest<br /><br />TestTest<br /><br />TestTest<br /><br />TestTest<br /><br />TestTest<br /><br />TestTest<br /><br />TestTest<br /><br />Test</div>
    	</div>
      
    	<!--START FOOTER-->
    	<div id="Page_Footer">Copyright Notice<br />
    		<a href="http://validator.w3.org/check?uri=referer" target="_new"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a> 
    		<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_new"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" border="0" /></a>
    	</div>
    	<!--END FOOTER-->
    </div>
    
    
    </body>
    </html>
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

Posting Permissions

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