I have a 3 column css layout which I got from http://matthewjamestaylor.com/blog/perfect-3-column.htm
As is, everything works fine, but I'm trying to make the side columns thinner and the middle column wider. I'm just having a hard time adjusting the layout to meet my needs. Wondering if someone can help me understand this layout and help me make the needed changes.
Here is the basic code:
Stylesheet
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#fff;
min-width:600px;
font-size:90%;
}
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
.colmask {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
.threecol {
background:#eee;
}
.threecol .colmid {
right:25%;
background:#fff;
}
.threecol .colleft {
right:50%;
background:#f4f4f4;
}
.threecol .col1 {
width:46%;
left:102%;
}
.threecol .col2 {
width:21%;
left:31%;
}
.threecol .col3 {
width:21%;
left:85%;
}
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}html
<body>
<form id="form1" runat="server">
<div id="header">
<h1>Header</h1>
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<!-- Column 1 start -->
<!-- Column 1 end -->
</div>
<div class="col2">
<!-- Column 2 start -->
<!-- Column 2 end -->
</div>
<div class="col3">
<!-- Column 3 start -->
<!-- Column 3 end -->
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</form>
</body>