how to have 2columns on top and one column below

**jass** · 06-07-2009, 09:12 AM

I would like to put up the contents of a web page into 3 parts as shown in the image above. The CSS code that I currently used for 2 colums is as follows. Would appreciate if someone could advise on how I could modify the css code as that I could append the content below the 2 columns. Many thanks in advance.

Code:

#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 900px;
}

#header {
	margin: 0 0 15px 0;
	background: white
}

#side-a {
	float: left;
	width: 500px;
}



#side-b { 
	margin: 0;
	float: left;
	width: 200px;
	height: 1% /* Holly hack for Peekaboo Bug */
}

#footer {
	clear: both;
	background: white
}

**hyde360** · 06-07-2009, 11:20 AM

You could use something like for the right container, as I assume you want the right container to level up with the left container if so. This should work.

Code:

.right_box{
clear: right;
float: right;
}

Then just add whatever you need in there, and set a width so it doesn't overlapse the left box.

BTW: For your footer I suggest you use so it stays at the bottom of the css layout:

Code:

.footer{
clear: both;
position: relative;
}

If you need any more help just ask...

Hope this helps.

**jass** · 06-07-2009, 03:28 PM

Many thanks for your kind response, Hyde. Tried but unsuccessful.
Would appreciate if you could elaborate further:

1) Do I add the following code to the existing one?

Code:

.right_box{
clear: right;
float: right;
}

2) May I know how to modify the following HTML code so that I could incoporate contents C at the bottom?

Code:

<HTML><HEAD></HEAD><BODY>
<div id="wrapper">	<div id="header"></div>	
	<div id="container"><div id="side-a">CONTENTS for side A
</div>
		
<div id="side-b"><TABLE BORDER="0" align=center>CONTENTS for side B
 </div></div></div>

<div id="footer"> </div>
</div>

</body></HTML>

**hyde360** · 06-07-2009, 04:07 PM

Right, I would suggest having a main container then you place the two divs into it e.g. right_box and left_box. Then have the footer placed underneath the main container.

To put that into coding, it would look like this:

Code:

.main_container{
margin: auto;
width: 500px; //change to whatever size you wish
}

.left_box{
clear: left;
float: left;
}

.right_box{
clear: right;
float: right;
}

.footer{
clear: both;
position: relative;
}

To have the correct output layout as you've described would work best like this in html:

HTML Code:

<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Somesite!</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
<div class="main_container">
<div class="right_box">
Content B
</div>
<div class="left_box">
Content A
</div>
</div>
<div class="footer">
Footer Text Goes Here!
</div>
</body>

</html>

Also so the both divs look leveled up together, try altering the width of them takes some time to do but it's a piece of cake!

If you need further help just ask

**jass** · 06-09-2009, 03:13 AM

Thanks so much Hyde.

I just tried using the codes that you provided but the footer text goes under content B (right side). I would like it to stretch under both content A and B (right and left side)

**forum_amnesiac** · 06-09-2009, 07:23 AM

I use CSS a lot and like the concept of the 3 boxes as described here.

I have tried the CSS and HTML here and get the result you can see in the attachment, the bottom is to the left of the screen not below the other 2 boxes.

I would like to know how to ensure that the bottom box is always directly below these other 2 boxes.

Here is the CSS I used to get the height and colours of the attached image.

Code:

.main_container{
margin: auto;
width: 500px;
height: 400px; //change to whatever size you wish
background-color:#FFF;
}

.left_box{
width: 250px;
height: 400px; //change to whatever size you wish
clear: left;
float: left;
background-color:#333;
}

.right_box{
width: 250px;
height: 400px; //change to whatever size you wish
clear: right;
float: right;
background-color:#666;
}

.footer{
width: 500px;
height: 100px; //change to whatever size you wish
clear: both;
position:relative;
background-color:#888;
}

**forum_amnesiac** · 06-12-2009, 06:39 AM

I'm still looking at this and have tried to get the boxes to size based on using % for the width.

The puzzling thing for me is that when I define the two side by side boxes as 50% each the left box will appear under the bottom box.

I then defined 1 of the boxes as 49.9% and they appeared side by side with a small strip between them.

The other thing is that although I have defined margin and padding as 0 the boxes do not fill the width of the screen.

Can anybody explain to me how to get the screen filled to 100% and the 2 columns to take 50% of the screen each.

Here is my code:

Code:

 .main_container{
margin:0;
padding:0;
width: 100%;
height: 400px; //change to whatever size you wish
background-color:#FFF;
}

.left_box{
margin:0;
padding:0;
width: 50%;
height: 400px; //change to whatever size you wish
clear: left;
float: left;
background-color:#333;
}

.right_box{
margin:0;
padding:0;
width: 50%;
height: 400px; //change to whatever size you wish
clear: right;
float: right;
background-color:#666;
}

.footer{
margin:0;
padding:0;
width: 100%;
height: 100px; //change to whatever size you wish
clear: both;
position:relative;
background-color:#888;
}

**forum_amnesiac** · 06-15-2009, 06:44 AM

In case anybody is interested in knowing the solution to this, that also works in IE, here it is :

HTML Code:

html, body {
margin:0;
padding:0;
width:100%;
}

.main_container{
margin:0;
padding:0;
width: 100%;
height: 400px; //change to whatever size you wish
background-color:#FFF;
border:0;
overflow: hidden;
}


.left_box{
  background-color: #333333;
  float: left;
  height: 400px;
  padding: 0 1em;
  width: 45%;
  }

.right_box{
  background-color: #666666;
  height: 400px;
  overflow: hidden;
  padding: 0 1em;

}

.footer{
margin:0;
padding:0;
width: 100%;
height: 100px; //change to whatever size you wish
clear: both;
position:relative;
background-color:#888;
border:0;
}

Thread: how to have 2columns on top and one column below

Thread Tools

Search Thread

how to have 2columns on top and one column below

The Following User Says Thank You to hyde360 For This Useful Post:

The Following User Says Thank You to hyde360 For This Useful Post:

The Following User Says Thank You to forum_amnesiac For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions