Forum Moderators: not2easy
I am fairly new at CSS and have been following the examples and posts here. I just wanted to get some opinions as to whether I can go ahead and use this template I made (modified from others really) or if there are some fatal flaws I need to fix first.
The goal is to have a nice two column layout- fixed left, floating right, appearing in their own boxes under a header and over a footer, with high level nav bars running full width. And of course it would be nice if it worked in most browsers without mucking up the design- it seems to work in my IE 6 right now.
Thanks for the help :)
<style>
html, body {
margin:10px;
padding:0;
}
#wrapper {
width:100%;
float:right;
margin-left:-180px;
}
#content {
margin-left:180px;
background: #fff;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 25px;
}
.topnav, .botnav {
background: #ccc;
margin: 0;
clear: both;
width: 100%;
height: 8px
}
#nav {
width: 180px;
float: left;
background:#fff;
padding-bottom: 15px;
padding-top: 15px;
padding-right: 5px;
}
#box {
background: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
padding-top: 15px;
padding-right: 15px;
padding-left: 15px;
}
.footer, .header {
background: #fff;
margin: 0;
clear: both;
width: 100%;
}
</style>
</head>
<body>
<div class="header"><h1>Header Logo </h1></div>
<div class="topnav"><CENTER>Nav links</CENTER></div>
<div id="wrapper">
<div id="nav">
<div id="box">
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua......</p>
</div>
</div>
<div id="content">
<div id="box">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse molestaie cillum. Tia non ob ea soluad incommod quae egen ium improb fugiend. Officia deserunt mollit anim id est laborum Et harumd dereud facilis est er expedit distinct. </p>
</div>
</div>
</div>
<div class="botnav"><CENTER>Bottom Nav Links</CENTER></div>
<div class="footer"><p><BR><h3>Footer text</h3> </p></div>
</body>
</html>
if there are some fatal flaws I need to fix first
You need to specify the mime type for the style sheet:
<style type="text/css">
Don't use the <center> tag... at all. Also, remove the break and h3 tag from the footer. Adjust font size and padding using CSS instead.
And of course it would be nice if it worked in most browsers without mucking up the design- it seems to work in my IE 6 right now
You realize that IE is usually the browser "mucking up the design", right? Test in other browsers first, then tweak whatever doesn't work in IE. Also, make sure you test in both IE6, 5.5, and 5, since they all render the page differently.
Which doctype are you using? Does your page validate [validator.w3.org]?
