getting columns to expand 100%

40 New Member

Hi, I'm back with an almost finished template that is pretty accessible :-)

My only woe at this point is to get all three columns (leftcol, midcol, rightcol) to expand vertically 100%. As you can see from the code I tried some hacks, but that hasn't worked. My main priority is the right column. Any suggestions are appreciated. Thanks!!!

http://www.granthansen.com/test/homepage_container_test.html
http://www.granthansen.com/test/whev_test.css

Aug 7 '07 #1

Subscribe Reply

1622

lzellner

New Member

Hello,

I think if you start with this you will be able to do what you want.

I hope it helps.

Larry

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 3 Column - fw-37-3-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>


<div id="wrapper">


<div id="header">

This is the Header

</div>



<div id="navigation">

This is the Navigation

</div>



<div id="leftcolumn">

Left Column

</div>



<div id="content">

<a href="#">Download this CSS Layout</a>

</div>



<div id="rightcolumn">

Right Column

</div>



<div id="footer">

This is the Footer

</div>


</div>


</body>
</html>

CSS

*/

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: #E7DBD5;
}
#navigation {
float: left;
width: 900px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 0px 5px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 456px;
display: inline;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
}

Aug 15 '07 #2

Similar topics

getting a submatrix of all true

by: John Hunter | last post by:

I have a largish data set (1000 observations x 100 floating point variables), and some of the of the data are missing. I want to try a variety of clustering, neural network, etc, algorithms on the...