Hi All
I am trying to create a three column layout and have so far been unable to do so.I’ve tried altering the widths of the left and right columns but that didn’t seem to work. 
Below is my html and css code.
<%@ Master Language=“VB” CodeFile=“MasterPage.master.vb” Inherits=“MasterPage” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head id=“Head1” runat=“server”><link href=“App_Themes/Stylesheet2.css” rel=“Stylesheet” />
<title>Extra-Time Website The Public Facing Page</title>
</head>
<body>
<form id=“form1” runat=“server”>
<div class=“container”>
<!--Site Header-->
<asp:Image ID="Image1" ImageUrl="~/Archive/Images/TitleWide.jpg" AlternateText="Site Header" runat="server" />
<!--Code for tabstrip and breadcrumb trail-->
<div class="tabstrip">
<br />
<asp:ContentPlaceholder
ID="ContentPlaceholder1"
runat="server" />
<asp:ContentPlaceholder
ID="ContentPlaceholder2"
runat="server" />
<div id="leftside; width=20%;">
<h2>Left Hand Navigation Menu</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer cursus eros et ligula porttitor scelerisque. Mauris eget lorem quis ante pharetra semper. Quisque sed nibh at neque faucibus vestibulum.
</p>
<p>
Nulla interdum nunc turpis, sit amet sollicitudin libero. Donec at erat vitae nibh molestie ullamcorper quis ac sem. Mauris eu sodales massa. Mauris turpis neque, gravida ac scelerisque non, consectetur quis dolor.
</p>
<p>
Duis eget velit at turpis consectetur vulputate. Nam dui massa, eleifend id commodo sed; rhoncus vitae velit. Donec elementum tristique magna at dignissim.
</p>
</div>
<asp:ContentPlaceholder
ID="ContentPlaceholder3"
runat="server" />
<div id="rightside">
<h2>Latest News and Featured Products</h2>
<p>
Proin pretium tempus turpis non faucibus. Nullam venenatis, purus euismod sagittis pulvinar, metus elit sodales odio, id consectetur lorem est sed leo. Vivamus vehicula, diam sed congue ullamcorper, libero lorem ullamcorper arcu, ut pulvinar nunc erat vel felis. In gravida tincidunt ante sit amet ullamcorper. Vestibulum ullamcorper blandit nibh vel commodo.
</p>
<p>
Nam metus enim, accumsan non posuere quis, condimentum in felis. Ut vestibulum enim vitae mauris pharetra non congue erat rhoncus. Phasellus in sagittis quam.
</p>
</div>
<!-- Notice the centre column comes last -->
<!-- This is because only content occuring AFTER a float will lie adjacent to the float -->
<!-- So, we need to make sure that the centre column occurs AFTER the LEFT and RIGHT columns -->
<asp:ContentPlaceholder
id="ContentPlaceholder4"
runat="server"/>
<div id="midfield">
<h2>Main Content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer cursus eros et ligula porttitor scelerisque. Mauris eget lorem quis ante pharetra semper. Quisque sed nibh at neque faucibus vestibulum. Nulla interdum nunc turpis, sit amet sollicitudin libero. Donec at erat vitae nibh molestie ullamcorper quis ac sem. Mauris eu sodales massa. Mauris turpis neque, gravida ac scelerisque non, consectetur quis dolor. Duis eget velit at turpis consectetur vulputate.
</p>
<p>
Nam dui massa, eleifend id commodo sed; rhoncus vitae velit. Donec elementum tristique magna at dignissim. Aliquam auctor posuere vulputate. Donec fringilla elit in magna sollicitudin vel consectetur lacus dignissim. Nulla vitae mi vel mi pulvinar pellentesque venenatis et nunc. Fusce adipiscing ultricies facilisis. Pellentesque convallis varius purus at placerat? Integer placerat felis quis felis pretium laoreet tempus nibh adipiscing. Etiam eu ipsum metus! Pellentesque facilisis aliquam dui, non sodales mi accumsan et. Sed velit urna, tempus in euismod eget, ullamcorper vel erat.
</p>
</div>
</div></div>
</form>
</body>
</html>
CSS Code
body {
}
/* The ‘*’ selector is a wild card. /
/ Used on it’s own like this it means ‘Target all elements’ /
/ Have done this here to zero margin, padding, outline and border for ALL elements for convenience */
*
{
margin:0;
padding:0;
outline:none;
border:none;
}
/* This following rule ensures there is allways a vertical scrollbar /
/ Preventing the annoying ‘jog right’ when moving to a page shorter than sceren height */
html
{
overflow-y:scroll;
}
body
{
font-family:“Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
font-size:12px;
}
h1
{
margin-top:1em;
text-align:center;
text-shadow:0 0 2px #00f;
}
p
{
margin:1em;
padding:0em;
border:none;
text-align:justify;
text-shadow:0 0 1px #090;
}
.container
{
width:900px;
margin:2em auto;
padding:1em;
overflow:auto; /*fixes height when we have floating children */
background:#CCC;
text-align:center;
}
.tabstrip
{
border-top:solid 1px #ffffff;
border-bottom:solid 1px #ffffff;
}
.midfield
{
width:48%;
height:41em;
padding:1%;
background-repeat:repeat-y;
background-color:#000000;
color:#FFFFFF;
text-align:center;
border:1px solid #aaa;
}
.leftwing
{
float:left;
width:20%;
}
.rightwing
{
float:right;
width:20%;
}
Any help would be greatly appreciated.