...

View Full Version : CSS Layout



DarkLightA
03-12-2009, 03:43 PM
I was trying to make a "header + 3 column + footer" page, but I've got some problems with the columns...

I've used only percentages. Where did I go wrong? This page looks good some times, but other times, when you minimize your browser, the last column goes down underneath the body one. How come? Here's the 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>My Site</title>

<style type="text/css">
* {
border: none;
padding: 0;
margin: 0;
}

body {
background: black;
font-size: 62.5%;
}

#entpage {
margin: 2em 3% 1.5em;
background: transparent;
}

#adheader {
padding: 2% 2.5% 2% 2.5%;
width: inherit;
background-color: #CC0000;
}

body div, p div, div div, p li, div p {
font-size: 1em;
}

#mainpage {
margin: 1.3em 0;
overflow: auto;
background: transparent;
}

#leftcol {
width: 12.5%;
float: left;
padding: 2.5% 2% 2% 3%;
background-color: #CC0000;
}

#maincol {
width: 55.5%;
float: left;
margin: 0 2.5%;
padding: 2.5% 2% 2% 3%;
background-color: #CC0000;
}

#rightcol {
width: 12.5%;
float: left;
padding: 2% 2% 2% 3%;
background-color: #CC0000;
}
</style>
</head>

<body>
<div id="entpage">
<div id="adheader">
ads go here
</div>
<div id="mainpage">
<div id="leftcol">
<ul>
<li>Stuff</li>
<li>Other</li>
<li>Stuff</li>
<li>Others</li>
<li>MEH.. -_-</li>
</ul>
</div>

<div id="maincol">
stufff.....
</div>

<div id="rightcol">
stuff...
</div>
</div>
</div>
</body>
</html>


PS: You might say: "This page looks perfect", but that's only in some browser sizes.

jcdevelopment
03-12-2009, 03:51 PM
At what resolution does the last column go under the body?

At 1024 x 768?
at 800 x 600?

In a lot of situations there is a point where floated objects push each other off even in % equations.

abduraooft
03-12-2009, 04:10 PM
Take a look at http://bonrouge.com/3c-hf-fluid.php

RedMatrix
03-13-2009, 09:07 AM
I would consider using a wild card on one of your percentages.

For example, use 12.5%, auto , 12.5% or 12.5%, 55.5%, auto



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum