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 1 of 1
  1. #1
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts

    Unhappy Sigh...extending 3-column layout

    Okay, I have tried everything I think of and I just cannot make this work. I can create the columns just fine, but I cannot get the side columns to extend with the main content.

    I know there is an easy fix, but I think I have just been looking at this same code for so long that I cannot make sense of anything anymore. I have tried, overflowing, clearing the floats and setting heights, but nothing is working for me. All I am trying to accomplish is the three columns where the left column contains a right border that extends with the rest of the page content. I have never been able to do this with ANY method and have always worked around it, but now I really need to learn.

    Here is the code I am using:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <!-- all code written by Dorienne A. Smith -->
    <head>
    <meta name="KEYWORDS" content="sims 2, dorienne, smith, sims, story, links, pictures, images "/>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title>The Sims 2 Newsletter</title>
    
    <style type="text/css">
    html, body {
    	color: #fff;
    	background: #2C458A;
    	font: bold 15px Verdana, sans-serif;
    	heigh: 100%;
    	min-height: 100%;
    	}
    
    h1 {
    	text-align: center;
    	}
    
    #container {
    	min-height: 100%;
    	height: 100%
    	position: relative;
    	width: 100%;
    	}
    
    #nav {
    	float: left;
    	clear: right;
    	overflow: auto;
    	width: 100px;
    	padding: 0 15px 0 0;
    	border-right: 3px solid #fff;
    	min-height: 100%;
    	height: 100%;
    	background: #ff0000;
    	}
    
    #nav ul {
    	list-style-type: none;
    	padding: 0;	
    	min-height: 100%;
    	height: 100%;
    	}
    
    #content {
    	float: left;
    	width: 700px;
    	padding: 0 0 0 5px;
    	}
    
    #main {
    	float: left;
    	width: 600px;
    	}
    
    #side {
    	float: right;
    	width: 100px;
    	}
    
    h2 {
    	text-align: left;
    	}
    </style>
    </head>
    
    <body>
    <h1><img src="images/title.jpg" alt="The Simfile Newsletter" title="The Simfile Newsletter" /></h1>
    <div id="container">
    	<div id="nav">
    		<ul>
    			<li>Home</li>
    			<li>Links</li>
    		</ul>
    	</div>
    	<div id="content">
    		<div id="main">
    		<h2>What is <i>The Sims 2</i>?</h2>
    		<p><i>The Sims 2</i> is the sequel game to one of the best-selling games of all time, <i>The Sims</i>. Players can direct the lives of their sims over the course of a lifetime, from birth 'til the end. Sims can be created with individual facial characteristics including ranging eye, skin and hair colors and the ability to shape sims' faces to any look. Sims can meet one another, date, marry, have little sims and watch them grow. When the time comes, the Grim Reaper will come and take off an elder sim to the great beyond, however sims can also "move on" from getting the flu, electric shocks, fires, or falling satellites!</p>
    		<p>In <i>The Sims 2</i>, players can help their sims achieve their different aspirations by fulfilling their wants or lead them to destruction through realizing their fears. Sims can still get jobs and climb the various vocational ladders and now, sims have memories that can make them randomly happy or randomly depressed at any moment. Houses can be taken to new heights...literally, with the ability to create homes with multiple stories and split-level houses too!</p>
    		<p>Players can also tell stories like in The Sims, however instead of just using snapshots taken throughout the game to tell stories, players can make stunning videos inside the game and create their own comedies or dramas.</p>
    		<p>With <i>The Sims</i>, player-created custom content, became a large part of the game. With <i>The Sims 2</i>, the game has been built around the idea of custom content. Specific icons are available to differentiate custome-content from packaged-game content, and numerous online communities have developed around custom content. All in all, <i>The Sims 2</i> is one of the most exciting games in the gaming world.</p>
    		</div>
    		<div id="side">
    		Side
    		</div>
    	</div>
    </div>
    </body>
    </html>
    I am almost embarrassed to even have to ask the question, but this is just one thing that seems to have bested me and probably shows my ignorance at the "theory" of CSS.

    Any help, ANY HELP, is appreciated.

    Many thanks!

    Edit:
    After a glass of water and a short break, I have realized the answer to my extending-border issues lies in just applying the border to the main div instead:

    Code:
    #main {
    	float: left;
    	width: 600px;
    	border-left: 3px solid #fff;
    	}
    I knew it was something easy.

    ...and I came to this epiphany here, where I also finally understood the "secrets" of the extending div. Thanks anyway.
    Last edited by kaitco; 09-24-2006 at 06:01 AM. Reason: ...because I am tired and my foot hurts...


 

Posting Permissions

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