...

View Full Version : DIV layout advice



shimah
05-27-2007, 04:26 PM
Hey,

I'm currently trying to create a new layout for one of my sites. I'm a bit stuck as to how i can create a layout shown below using DIV's. I also wish for the DIV's to have a fixed width.

I'm familiar with CSS but not too hot on positioning/floating etc. Any adivce on how I could achieve such a layout with DIV's would be greatly appreciated.

http://img242.imageshack.us/img242/8136/divsqt5.png

koyama
05-27-2007, 04:59 PM
Try floated layout.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>CF 115046</title>
<style type="text/css">
body {font-family: sans-serif;}
#wrap {
width: 800px;
height: 600px;
margin: 0 auto;
}
#left, #right {
width: 400px;
float: left;
}
.section {
background: black;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">
<div class="section">Blah!</div>
<div class="section">Blah!</div>
</div>
<div id="right">
<div class="section">Blah!</div>
</div>
</div>
</body>
</html>
Note: This is just an example. Find better values for the id's and classes corresponding to the meaning.

shimah
05-27-2007, 05:55 PM
Thank you for your help, its exactly what I was after :D

Although does anyone know how I can get rid of the white bits (indicated by the red bars) when I use <h1> or <p> tags within the divs?

http://img263.imageshack.us/img263/7701/untitled2ac8.png

koyama
05-27-2007, 06:02 PM
Although does anyone know how I can get rid of the white bits (indicated by the red bars) when I use <h1> or <p> tags within the divs?
That is due to margin collapsing. Maybe it seems weird that the top and bottom margin of the h1 and p element can 'penetrate' through the parent div, but that is in fact what the CSS specification says should happen when the parent element has no top/bottom padding or border.

To solve your problem, you could eliminate those margins:


p, h1 {
margin: 0;
}

shimah
05-27-2007, 07:11 PM
Thank you so much. I would never of thought of it being the H1 margins!

Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum