Help with html columns

HTML & CSS
1

I’ve got three vertical columns on a web page that look pretty good.
I’d like to put a horizontal box across the top of column 2 and 3, and below columns 2 and 3. Can you help me with this? I appreciate any help. Thanks

Here’s what I have right now:

<table class="tab1">
<tbody>
<img src="temp/images/Q1.png" border="0" />
</tbody>
</table>

<table class="tab2">
<tbody>
Text TEXT text Text TEXT text
</tbody>
</table>

<table class="tab3">
<tbody>
Text TEXT text Text TEXT text
</tbody>
</table>
</td>

.tab1 {  
width:260px;  
float: left;  
text-align:left;
margin:0px 0px 0px 50px;
font-size: 12px;
}

.tab2 {  
width:260px;  
float: left;  
text-align:left;
margin:0px 0px 0px 20px;
font-size: 12px;
}
						
.tab3 {  
width:260px;  
float: left;  
text-align:left;
margin:0px 0px 0px 20px;
font-size: 12px;
}
2

put a horizontal box across the top of column 2 and 3, and below columns 2 and 3
Hi,
So you want three columns but you just want the box to extend across columns 2 & 3.

That can be done without using tables. Just nest col-2 an col-3 in a wrapping div (#inner) and then float it next to col-1.
That #inner div is just to help with the IE6/7 broken float model. It could be done without it for good browsers.

From there just nest your top and bottom boxes above and below col-2 & 3.

Something like this :wink:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
#wrap {
    width:780px;
    margin:0 auto;
}
#head {
    width:100%;
    min-height:100px;
    background:#CCC;
}
#main { /*wrap floated columns*/
    overflow:hidden;/*contain child floats*/
    width:780px; /*IE6 haslayout*/
    background:orange;
}
#inner {
    float: left;
    width:520px;
}
    #col-1, #col-2, #col-3 {
        float: left;
        width:260px; 
        min-height:200px;
    }
    #col-1 {
        background:orange;
    }
    #col-2 {
        background:lime;
    }
    #col-3 {
        background:cyan;
    }
    .box {
        min-height:80px;
        background:#EEF;    
    }
    .clear {clear:both;}
#foot {
    width:100%;
    background:#CCC;
}
</style>

</head>
<body>

<div id="wrap">
    <div id="head">Header Stuff</div>
    
    <div id="main">
        <div id="col-1">Column 1</div>
        <div id="inner">
            <div class="box">Col-2,3 top box</div>
            <div id="col-2">Column 2</div>
            <div id="col-3">Column 3</div>
            <div class="box clear">Col-2,3 bottom box</div>
        </div>
    </div>
    
    <div id="foot">Footer Stuff</div>
</div>

</body>
</html>
3

That #inner div is just to help with the IE6/7 broken float model. It could be done without it for good browsers.
Actually I can make it work in IE without the extra div. I just need to float #col-1 outside of the #main div and then float #main also.

This works in all browsers now with one less div :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
#wrap {
    width:780px;
    margin:0 auto;
    overflow:hidden;/*contain child floats*/
    background:orange;
}
#head {
    width:100%;
    min-height:100px;
    background:#CCC;
}
#col-1 {
    float: left;
    width:260px; 
    min-height:200px;
    background:orange;
}
#main { /*wrap columns #2 and #3*/
    float:right;
    width:520px;
}
#col-2, #col-3 {
    float: left;
    width:260px; 
    min-height:200px;
    background:lime;
}
#col-3 {
    background:cyan;
}
.box {
    clear:left;
    width:520px;
    min-height:80px;
    background:#DDF;    
}
#foot {
    clear:both;
    width:100%;
    background:#CCC;
}
</style>

</head>
<body>

<div id="wrap">
    <div id="head">Header Stuff</div>
    
    <div id="col-1">Column 1</div>    
    
    <div id="main">
        <div class="box">Col-2,3 top box</div>
        <div id="col-2">Column 2</div>
        <div id="col-3">Column 3</div>
        <div class="box">Col-2,3 bottom box</div>
    </div>
    
    <div id="foot">Footer Stuff</div>
</div>

</body>
</html>