css help

[bogdaniel]

hello i have a problem here with some code

 

 

css style:

 

		.wrapper {

		width:960px;
		background:#000;
		margin:0px auto;

		}




	.left_wrapper{

		float:left;
		background:yellow;
		width: 830px;



		}



	.content{

		float:right;
		background:red; 
		width:700px;

		}



	.col1 {

		float:left;
		background:green;
		width:130px;

		}




	.col2 {

		float:right;
		background:blue; 
		width:130px;

		}

 

html code:

 

<div class="wrapper">
<div class="left_wrapper">
  <div class="content">
    <p> </p>
    <p> </p>
        content
    <p> </p>
    <p> </p>
  </div>	
<div class="col1">
  <p> </p>
  <p> </p>
  left side
  <p> </p>
  <p> </p>
</div>
  </div>
<div class="col2">
  <p> </p>
  <p> </p>
      right side
  <p> </p>
  <p> </p>
</div>
</div>

 

 

and my problem is i can't add a header & footer can someone help me please ? i add them and the page goes over them. i added them in the first warpper not the second

[dannyb785]

First off, what is the reason for putting a left wrapper? You've got the 3 column thing going on, and thats fine, but they're 3 separate entities, all floated. So you don't need to group 2 of them since they're floated left. The real thing to do is float them all left and then order them as they appear. For example: if you have the left column in the middle and it's floated left, it will align to the left of anything that isn't already floated to the left. But that's where it makes it confusing since div a can be typed after div b, but if it div a is floated to the left(and div b isn't), then div a will show up before div b. Anyways, look at the new code I posted:

 

<div class="wrapper">
  <div id="header">
     TEST HEADER
  </div>
  <div class="col1">
  <p> </p>
  <p> </p>
  left side
  <p> </p>
  <p> </p>
</div>
  <div class="content">
    <p> </p>
    <p> </p>
        content
    <p> </p>
    <p> </p>
  </div>


<div class="col2">
  <p> </p>
  <p> </p>
      right side
  <p> </p>
  <p> </p>
</div>
<div id="footer">
   TEST FOOTER
</div>
</div>

[bogdaniel]

First off, what is the reason for putting a left wrapper? You've got the 3 column thing going on, and thats fine, but they're 3 separate entities, all floated. So you don't need to group 2 of them since they're floated left. The real thing to do is float them all left and then order them as they appear. For example: if you have the left column in the middle and it's floated left, it will align to the left of anything that isn't already floated to the left. But that's where it makes it confusing since div a can be typed after div b, but if it div a is floated to the left(and div b isn't), then div a will show up before div b. Anyways, look at the new code I posted:

 

<div class="wrapper">
  <div id="header">
     TEST HEADER
  </div>
  <div class="col1">
  <p> </p>
  <p> </p>
  left side
  <p> </p>
  <p> </p>
</div>
  <div class="content">
    <p> </p>
    <p> </p>
        content
    <p> </p>
    <p> </p>
  </div>


<div class="col2">
  <p> </p>
  <p> </p>
      right side
  <p> </p>
  <p> </p>
</div>
<div id="footer">
   TEST FOOTER
</div>
</div>

 

thank you for your help

[fantomel]

hello i have a problem here with some code

 

 

css style:

 

		.wrapper {

		width:960px;
		background:#000;
		margin:0px auto;

		}




	.left_wrapper{

		float:left;
		background:yellow;
		width: 830px;



		}



	.content{

		float:right;
		background:red; 
		width:700px;

		}



	.col1 {

		float:left;
		background:green;
		width:130px;

		}




	.col2 {

		float:right;
		background:blue; 
		width:130px;

		}

 

html code:

 

<div class="wrapper">
<div class="left_wrapper">
  <div class="content">
    <p> </p>
    <p> </p>
        content
    <p> </p>
    <p> </p>
  </div>	
<div class="col1">
  <p> </p>
  <p> </p>
  left side
  <p> </p>
  <p> </p>
</div>
  </div>
<div class="col2">
  <p> </p>
  <p> </p>
      right side
  <p> </p>
  <p> </p>
</div>
</div>

 

 

and my problem is i can't add a header & footer can someone help me please ? i add them and the page goes over them. i added them in the first warpper not the second

 

 

i've never seen this kind of coding 2 container for 3 column .. what are trying to do ? perfect 3 column  ?