...

View Full Version : Relative Tableless CSS Layout Help



Tony.Phipps
01-31-2007, 11:18 AM
Hello,

After only recently discovering the benefits of a table less CSS layout I have been having a few problems. I am fluent in HTML and understand the basic workings with formatting fonts etc with CSS but the whole positioning and boxes have thrown me.

I am trying to create a layout in this shape without tables that is relative to the screen size of the user viewing but the boxes never seem to line up properly and usually it ends up all over the place.

http://i83.photobucket.com/albums/j281/tonyphipps/mockup.jpg
nice mock-up eh? Good 'ol paint

Sorry to bug you with such a simple question just I have never really explored the depths of CSS before and any help you could give me would be gratefully appreciated.

Thanks, Tony

coothead
01-31-2007, 12:20 PM
Hi there Tony.Phipps,

and a warm welcome to these forums. ;)

Have a look at this basic example, it may get you started...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body {
height:100%;
margin:0;
padding:0;
text-align:center;
}
#top {
height:10%;
background-color:#fcc;
color:#000;
}
#left_container {
width:65%;
height:90%;
float:left;
}
#left_container_top {
height:10%;
background-color:#ccf;
color:#000;
}
#left_container_middle {
height:30%;
background-color:#ffc;
color:#000;
}
#left_container_bottom {
height:60%;
background-color:#fcf;
color:#000;
}
#right_container {
width:35%;
height:90%;
float:left;
background-color:#cfc;
color:#000;
}
</style>

</head>
<body>

<div id="top">id="top"</div>

<div id="left_container">
<div id="left_container_top">id="left_container_top"</div>
<div id="left_container_middle">id="left_container_middle"</div>
<div id="left_container_bottom">id="left_container_bottom"</div>
</div>

<div id="right_container">id="right_container"</div>

</body>
</html>
coothead

Tony.Phipps
01-31-2007, 12:33 PM
Ah ha!

Brilliant thank you :thumbsup: , that should definately get me on my way. I am confident with the formating so it shouldn't be a problem. let you know when its finished.

tony

coothead
01-31-2007, 12:39 PM
No problem, you're welcome. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum