Tue, 2004-03-30 19:43
I'm pretty sure this is all i need for my layout.... A parent div that has a right float, left float, and a center. The center will be fairly easy because i will use up the space that is left from the two floats. Only problem I may run into is centering everything...
For my understanding, The floats with snap to the right and left? So... If I happen to figure out how to center the parent div all the the columns will follow the parent div?
-peace
Tue, 2004-03-30 19:51
#1
for my understanding....
As long as your parent div has some sort of specified width (i.e. 600px), then you can give it a horizontal margin of:
margin: 0 auto;
... the 0 can be whatever you need for top and bottom margins, the auto places an auto margin on the left and right side of the div, thus centering the div.
Tue, 2004-03-30 19:56
#2
for my understanding....
co2 wrote:
As long as your parent div has some sort of specified width (i.e. 600px), then you can give it a horizontal margin of:
margin: 0 auto;
... the 0 can be whatever you need for top and bottom margins, the auto places an auto margin on the left and right side of the div, thus centering the div.
great!!!! Thanks a bunch 
Now am i correct about the floats flowing the parent div?
-peace
Tue, 2004-03-30 20:08
#3
for my understanding....
Well sort of... yes. There are various ways... you could make the first two spaces the divs (i.e. left and centre) and make the right the blank space. Or, you could use 3 floated divs, left, centre, and right. Doing it how you say would work also. It all depends on how your layout is going to work (static widths or fluid etc etc.)
Tue, 2004-03-30 20:11
#4
for my understanding....
Here's a quick example with 3 divs (only checked on Safari):
http://pub.c-o2.net/cssf/flt.htm
Thinking ahead, if you don't use a div for the centre then you may run into margin trouble when placing block elements in the central area (the right div may be knocked down position-wise).
Tue, 2004-03-30 20:37
#5
for my understanding....
co2 wrote:
Here's a quick example with 3 divs (only checked on Safari):
http://pub.c-o2.net/cssf/flt.htm
Thinking ahead, if you don't use a div for the centre then you may run into margin trouble when placing block elements in the central area (the right div may be knocked down position-wise).
Well, the right float div will have a width of 185. So the width will be constent all the way down the page.. the same with the left float...
Tue, 2004-03-30 20:57
#6
for my understanding....
is it possible to nest divs within divs?
-peace
Tue, 2004-03-30 21:09
#7
for my understanding....
Hi
Yes, for example, three div's side by side, that won't break apart under pressure!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Bite Me</title>
<style type="text/css" media="all">
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
margin: 20px 0px;
color: #000;
font-family: verdana, arial, sans-serif;
background-color: #EEEEEE;
color: #000000;
text-align: center;
}
.clear {
clear: both;
}
.outercontainer {
font-size:80%;
width: 665px;
padding: 0px;
position: relative;
border: 0px;
margin: 0px auto auto;
}
.col1, .col2, .col3 {
padding:2px;
position:relative;
width:210px;
border: 0px;
margin: 0px;
background: #C0C0C0;
position:relative;
float:left;
}
.col2, .col3 {
float:right;
}
.twocolcontainer {
width: 440px;
position: relative;
float: left;
}
</style>
</head>
<body>
<div class="outercontainer">
<div class="twocolcontainer">
<div class="col1">
BOX 1
</div>
<div class="col2">
BOX 2
</div>
<div class="clear"></div>
</div>
<div class="col3">
BOX 3
</div>
<div class="clear"></div>
</div>
</body>
</html>
The nesting principal can continue on inwards. You could vary widths by making separate styles for the columns.
I know the code is overkill. But it works, and it's safe. Divs floated side by side tend to drop under each other if the screen size reduces, or other odd things happen.
Trevor
Tue, 2004-03-30 23:32
#8
for my understanding....
#parentdiv {
position: relative;
width: 800px;
height: 500px; /*follows the height of the page*/
margin: 0 auto; /*centers the parent div*/
border: 2 dashed #000000;
}
#leftfloat, #rightfloat { /*gives values to both leftfloat and the rightfloat*/
width: 185;
height: auto;
border: 2 solid #000000;
}
#centerfloat {
float: left;
width: auto;
height: auto;
border: 2 solid #000000;
}
#leftfloat {
float: left;
margin-right: 10px;
}
#rightfloat {
float: right;
margin-left: 10px;
}
The borders aren't showing up.. I'm just using the borders as a guide for now and i'll take them off when it's done. Also the center column isn't filling up in the emtpy space even though i set it's width to auto. Can anyone help me out fix this problem?
edit: Here's the page: http://maxforcepc.ath.cx:81/maxforcepc/css/index.htm
-Thanks!