SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Equal Height CSS

    I've been using the following tutorial to make a fixed width, 3 column layout.

    http://www.positioniseverything.net/...ut/equalheight

    I think I did everything right, I have the min-height set to 500px, but when the page contents get longer the 500px the page doesn't expand, the content below the 500px just doesn't show? I'm sow confused.

    Here's my code and the url.

    http://clampnow.com/

    index.php
    Code:
    <?php
    include 'library/config.php';
    include 'library/opendb.php';
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    	<head>
    		<title>CLAMP NOW</title>
    		<link rel="stylesheet" type="text/css" href="styles/style1.css" />
    		<?php
    		$ignore = array("www");
    		$domains = explode(".", $_SERVER["HTTP_HOST"]);
    	
    		foreach ($domains as $domain)
    		   if (!in_array($domain, $ignore))
    	       break;
    
    		echo '<link rel="stylesheet" type="text/css" href="styles/'. $domain .'.css" />';
    		?>
    	</head>
    	<body>
    		<div id="wrapper">
    			<div id"header">
    				<div id="topnav">
    				<a href="http://clampnow.com/"><img src="images/clampnow.png" class="logo" /></a><a href="http://kobato.clampnow.com">Kobato</a><a href="http://tsubasa.clampnow.com">Tsubasa</a><a href="http://holic.clampnow.com">Holic</a><a href="http://legaldrug.clampnow.com">Legal Drug</a>
    				</div> <!-- topnav div -->
    				<div id="banner">
    				</div> <!-- banner div -->
    				<div id="mainnav">
    				<a>News</a><a>Pedia</a><a>Forums</a><a>Products</a><a>Scanlations</a><a>Fansubs</a><a>Links</a>
    				</div> <!-- mainnav div -->
    			</div> <!-- header div -->
    			<div id="body">
    				<div id="lsidebar">
    				</div> <!-- lsidebar div -->
    				<div id="content">
    	<h1>News</h1>
    	<?php
    	if ($domain == 'clampnow') {
    	$query  = "SELECT news.id, news.title, news.article, news.seriesid, series.id, series.url FROM series, news WHERE news.seriesid = series.id"; }
    
    	else {
    	$query  = "SELECT news.id, news.title, news.article, news.seriesid, news.date, series.id, series.url FROM series, news WHERE news.seriesid = series.id AND series.url='$domain'"; }
    
    	$result = mysql_query($query);
    
    	while($row = mysql_fetch_array($result, MYSQL_ASSOC))
    	{
    	    echo "<h2>{$row['title']}</h2>" . 
    	    	 "<p class='date'>{$row['date']}</p>" . 
    	         "{$row['article']}";
    	}
    	?>
    
    				</div> <!-- content div -->
    				<div id="rsidebar">
    				</div> <!-- rsidebar div -->
    			</div> <!-- body div -->
    		</div> <!-- wrapper div -->
    		<div id="footer">
    		</div> <!-- footer div -->
    	</body>
    </html>
    <?php
    include 'library/closedb.php';
    ?>
    style1.css
    Code:
    * {
    	padding: 0;
    	margin: 0;
    }
    
    body {
    	font: 12px;
    	text-align: center;
    }
    
    #lsidebar, #content, #rsidebar {
    	padding-bottom: 32767px;
    	margin-bottom: -32767px;
    }
    
    #wrapper {
    	margin-left: auto;
    	margin-right: auto;
    	width: 800px;
    	height: 100%;
    	text-align: left;
    	border-left: solid 3px;
    	border-right: solid 3px;
    	overflow: hidden;
    }
    
    #topnav {
    	height: 14px;
    	width: 100%;
    	border-bottom: solid 1px;
    }
    
    #banner {
    	width: 100%;
    	height: 82px;
    }
    
    #mainnav {
    	width: 100%-20px;
    	height: 20px;
    	border-top: solid 1px;
    	border-bottom: solid 1px;
    	padding: 4px 0 0 20px;
    }
    
    #lsidebar {
    	width: 122px;
    	height: 40em;
    	float: left;
    	border-right: solid 1px;
    }
    
    #content {
    	float: left;
    	padding: 10px;
    	width: 480px;
    }
    
    #rsidebar {
    	width: 176px;
    	height: 40em;
    	float: right;
    	border-left: solid 1px;
    }
    
    .logo {
    	width: 48px;
    	height: 10px;
    	float: left;
    	padding: 2px 20px 0 20px;
    }
    
    #footer {
    	margin-left: auto;
    	margin-right: auto;
    	width: 800px;
    	height: 20px;
    	border-top: solid 1px;
    	border-bottom: solid 1px;
    	border-left: solid 3px;
    	border-right: solid 3px;
    	clear: both;
    }
    
    /***** Fonts *****/
    body {
    	font: 12px 'Century Gothic';
    }
    
    p {
    	margin-bottom: 10px;
    }
    
    ol, ul {
    	margin-bottom: 10px;
    }
    
    li {
    	margin-left: 25px;
    }
    
    a {
    	text-decoration: none;
    }
    
    #topnav a {
    	font: 11px 'Century Gothic';
    	color: #FFFFFF;
    	float: left;
    	margin-right: 10px;
    }
    
    #mainnav a {
    	font: 13px 'Century Gothic';
    	color: #FFFFFF;
    	float: left;
    	margin-right: 20px;
    }
    
    /***** Special *****/
    .aimage {
    	float: left;
    	margin-right: 10px;
    	margin-bottom: 10px;
    	border: solid 1px;
    }

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a couple of points.

    Firstly - there's an announcement at the top of that tutorial saying that they've found problems with it - so I'd avoid it. If you want the look of equal columns then use the Faux Columns technique. Very reliable and very simple.

    Secondly - you're using XHTML 1.1 and serving it as text/html which is incorrect. Since IE can't actually read XHTML 1.1 when served correctly you might as well drop down to XHTML 1.0.

    Thirdly - there's some little markup errors such as:
    Code:
    <div id"header">
    I'd dump that technique - go look at faux columns, drop it down to XHTML 1.0 and check for errors.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #lsidebar, #content, #rsidebar {
    	padding-bottom: 32767px;
    	margin-bottom: -32767px;
    }
    Remove that rule

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright I did everything you said, but could you give me a little help with faux columns. I went to the main tutorial, but it sounds like it would only work with a two column layout? Thanks!

  5. #5
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It'll work with however many columns you like. If you're using a fluid layout then it's harder but still perfectly possible.

    Have a look at Paul O'B's 3 column layout techniques (here: http://www.pmob.co.uk/temp/3colfixedtest_4.htm ).

    I can't remember if he's using faux columns but - with a fixed width layout, once you've got the layout working then just create the background image which shows both sidebars and main content area and then repeat it on the body element or if more appropriate on the main containing div.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a solution. Thanks for everyone's help. By the way, I used the following:

    http://matthewjamestaylor.com/blog/u...ail-pixels.htm


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
  •