Hi, I am new to the forum as well as to web designing. I am using asp.net master pages and I am trying to make a basic template to use in future projects. However I am new to this and need an experienced eye to show me my errors and offer suggestions.
My goal is to have a 3 column fluid design with header and footer. The left and right column I want 150px. Other thoughts I have yet to do is actually work on the header section. Basicly I want a logo area (on the left side) a place for login registration on the right and below a menu div.
I would like someone to take a look at what code I have. One major problem is there is a space between the left and center content area I would like to free up, but I haven't been able to figure it out yet in the css. So if you would take a look and please show me how to clean it up. Thanks in advance. Just be warned it is an ugly settup as is, and I am trying to figure things out.
CSSCode:<body> <form id="form1" runat="server"> <div id="header"> <div id="logo" style="background-color: #808080"><h1>SiteName</h1></div> </div> <div id="container"> <div id="center" class="column"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div> </form> </body> </html>
Code:body { min-width: 550px; /* 2x LC width + RC width */ background-color: Gray; } #container { padding-left: 200px; /* LC width */ padding-right: 150px; background-color:white; /* RC width */ } #header { Width: 100%; height: 90px; background-color: yellow; } #container .column { position:relative; float: left; top: 0px; background-color:White; } #center { width: 100%; } #left { width: 150px; /* LC width */ right: 200px; /* LC width */ margin-left: -100%; height: 600px; } #right { width: 150px; /* RC width */ margin-right: -150px; /* RC width */ background-color: blue; height: 600px; } #footer { clear: both; background-color:Teal; } /*** IE6 Fix ***/ * html #left { left: 150px; /* RC width */ }