SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jul 2001
    Location
    New Zealand
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center Div before left/right div

    Hello,

    I have a 3 column liquid layout webpage. I read somewhere that the center column (which contains the bulk of the unique content of a web page) should come before the left and right columns which will contain menus.

    Unfortunately I have coded it so that the left and right div's come before the center div and I cannot figure out how I can get the center div coded in first.

    Would appreciate it if somebody could give me a few pointers so I can get the center div coded before the left/right, whilst keeping to the same liquid format.


    Cheers

    HTML
    HTML Code:
    <div id="content-wrapper">
    <div id="navcol">
    <h3>Left Column</h4>
    <p>Test test</p>
    <p>testtest</p>
    <p>test test teast.</p>
    <p>Test test</p>
    </div>
    <div id="sidecol">
    <h3>Right Side Column</h4>
    <p>Test test</p>
    <p>testtest</p>
    <p>test test teast.</p>
    </div>
    <div id="main">
    <h1>Main Content</h1>
    <p>Tempests empesdsts empests empests emdsf dsfdsf ests empests empests empests empests empests efdsfmdspests empedfdsfsts edfmpests fdsf</p>
    <p>ds fdsfad fdsf empests empesdfsts empests empests empests edsfdfdfdfssdestsfdfssfd empedsafsts empests empests dsmpfddf ddf sadfd sfs</p>
    <p>dsfd sadsfasd fdsf dsf dsdesafe dfds dsf adsempests empests empests empests fempests empest dasfdsf dsfempests empesdsfts empests empests empests empestsepesdfsts empests </p>
    </div>
    <div class="clear">&nbsp;</div>
    </div>
     
     
    CSS
    Code:
    body{
    text-align:center;
    font-family: verdana,arial,helvetica,sans-serif; 
    font-size:.75em;
    background:url(bg.gif);
    margin:10px 2&#37; 20px 2%;
    }
     
    #wrapper{
    min-width:750px;
    max-width:1200px;
    }
    #content-wrapper {
    border:solid 2px #cfcfcf;
    border-bottom:none;
    background:#FFFFFF;
    padding-bottom:10px;
    }
    #navcol,#sidecol{
    width: 19%;
    border:1px solid black;
    min-width:160px;
    max-width:200px;
    }
    #navcol{float:left;}
    #sidecol {float:right;}
    div#main {
        padding-left: 10px;
     padding-right: 10px;
     height:100%;
     overflow:auto;
     border: solid 1px black;
    }
    .clear {
    clear:both;
    display:block;
    height: 1px;
    overflow: hidden;
    }

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ben and I have the same idea, though I don't like the use of the clear DIV (I'd rather use the DIV as a footer, but to each their own).

    His code is workable (and nice), but here's another one in case you're interested (they're pretty close - I'm actually going to include a variant of this into a layout template I'm working on). Bear in mind I hardly ever use pixels as a layout measurement tool, so this is just a demonstration. I also don't like using a H1 element for the header, preferring it as a page title instead, with a DIV and image (for the logo) to serve that purpose instead, but whatever works for you and your visitors.

    Code XHTML 1.0 Strict:
    <!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>
    	<title>Three Column "SEO'd" Layout</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
     
    	* {
    		margin: 0;
    		padding: 0;
    	}
     
    	body {
    		background: #FFF;
    		color: #000;
    	}
     
    	h1 {
    		background: #FCF;
    		border:1px solid  #BBB;
    		color: inherit;
    		margin-bottom: 8px;
    		padding: 16px 0;
    		text-align: center;
    	}
     
    	#content {
    		float: left;
    		width: 100%;
    	}
    		#content .section {
    			background: #CCF;
    			border: 1px solid #00F;
    			color: inherit;
    			height: 1%;
    			margin: 0 228px 8px 178px;
    			padding: 8px;
    		}
     
    	#menu {
    		background: #FCC;
    		border: 1px solid #00F;
    		color: inherit;
    		float: left;
    		list-style: none;
    		margin: 0 8px 8px -100%;
    		padding: 8px;
    		width: 150px;
    	}
    		#menu li {
    			text-align: center;
    		}
     
    	#sidebar {
    		background: #FFE;
    		border: 1px solid #00F;
    		color: inherit;
    		float: left;
    		margin: 0 0 8px -218px;
    		padding: 8px;
    		width: 200px;
    	}
     
    	#footer {
    		background: #6CF;
    		border: 1px solid #BBB;
    		clear: both;
    		color: inherit;
    		padding: 16px 0;
    		text-align: center;
    	}
     
    	</style>
    </head>
    <body>
    <h1>Header</h1>
    <div id="content">
    	<div class="section">
    		<p>Some Test Content</p>
    		<p>Some Test Content</p>
    		<p>Some Test Content</p>
    		<p>Some Test Content</p>
    		<p>Some Test Content</p>
    	</div>
    	<div class="section">
    		<p>Some Test Content</p>
    		<p>Some Test Content</p>
    		<p>Some Test Content</p>
    		<p>Some Test Content</p>
    		<p>Some Test Content</p>
    	</div>
    </div>
    <ul id="menu">
    	<li><a href="#">Menu Item</a></li>
    	<li><a href="#">Menu Item</a></li>
    	<li><a href="#">Menu Item</a></li>
    	<li><a href="#">Menu Item</a></li>
    	<li><a href="#">Menu Item</a></li>
    	<li><a href="#">Menu Item</a></li>
    	<li><a href="#">Menu Item</a></li>
    </ul>
    <div id="sidebar">
    	<p>Some Test Content</p>
    	<p>Some Test Content</p>
    	<p>Some Test Content</p>
    </div>
    <div id="footer">
    	<p>
    		Copyright &copy; 2007, The Monster Under the Bed. All Rights to Scare
    		Unsuspecting Children Reserved.
    	</p>
    </div>
    </body>
    </html>

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right, I forgot about the centered document requirement. I'm also been playing around with my example some more as well (improving IE 5.x support without resorting to hacks or more HTML mainly).

    But if you don't mind me asking, what's with the min/max widths on the side columns in your second example?

  4. #4
    SitePoint Addict
    Join Date
    Jul 2001
    Location
    New Zealand
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    Thank you very much again! Works a treat. As far as those Min/Max widths, I wanted the menus to extend slightly for those with larger resolutions, but not too much, as it would look strange with so much white space around the text.


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
  •