8 replies [Last post]
DiarYofaMadmaN
Offline
Regular
Last seen: 17 years 36 weeks ago
Timezone: GMT-5
Joined: 2004-03-18
Posts: 27
Points: 0

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

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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.

The next sentence is true. The previous sentence is false. Discuss...

DiarYofaMadmaN
Offline
Regular
Last seen: 17 years 36 weeks ago
Timezone: GMT-5
Joined: 2004-03-18
Posts: 27
Points: 0

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 Smile Now am i correct about the floats flowing the parent div?

-peace

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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.)

The next sentence is true. The previous sentence is false. Discuss...

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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).

The next sentence is true. The previous sentence is false. Discuss...

DiarYofaMadmaN
Offline
Regular
Last seen: 17 years 36 weeks ago
Timezone: GMT-5
Joined: 2004-03-18
Posts: 27
Points: 0

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...

DiarYofaMadmaN
Offline
Regular
Last seen: 17 years 36 weeks ago
Timezone: GMT-5
Joined: 2004-03-18
Posts: 27
Points: 0

for my understanding....

is it possible to nest divs within divs?

-peace

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

DiarYofaMadmaN
Offline
Regular
Last seen: 17 years 36 weeks ago
Timezone: GMT-5
Joined: 2004-03-18
Posts: 27
Points: 0

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!