Log in

View Full Version : how to have 2columns on top and one column below


jass
06-07-2009, 09:12 AM
http://img145.imageshack.us/img145/4562/query.th.jpg

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.


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



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



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

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


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



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

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


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


.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, 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;
}