So I am creating a three col. layout using the code below and it works great…maybe I should leave well enough alone but I’m not built that way…
#maincontainer{
width: 1100px; /Width of main container/
margin: 0 auto; /Center container on page/
background:#0000ff;
}
#topsection{
background: #EAEAEA;
height: 90px; /Height of top section/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 180px 0 180px; /Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth/
}
#leftcolumn{
float: left;
width: 180px; /Width of left column in pixel/
min-height:600px;
margin-left: -1100px; /Set margin to that of -(MainContainerWidth)/
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 180px; /Width of right column/
min-height:600px;
margin-left: -180px; /Set left margin to -(RightColumnWidth)/
background: #FDE95E;
}
#footer a{
color: #000;
}
.innertube{
margin: 10px; /Margins for inner DIV inside each column (to provide padding)/
margin-top: 0;
}
Are the settings for the left and right cols acceptable using negative numbers for alignment?
Is there a more straight forward code to accomplish the same three col result without using the neg numbers or am I worrying about trivial crap?
On a window of less than 1220px wide, the vertical coloured stripes are out of alignment and you get a horizontal scrollbar with content disappearing off to the right.
The absolute minimum screen size you need to support is 1024px wide - and obviously you need to take account of the pixels that are lost to scrollbars, window edges etc.
Good practice is to have a site that fits onto an 800px wide window - that allows for people who are using 800×600 resolution, or people who have a sidebar permanently open, or people who prefer not to maximise their windows. (That doesn’t mean that your site can only be <800px wide, you can have a flexible layout that adjusts to suit the screen size.
I’d also point out that your use of %/EM in the menu area is resulting in the menu being broken for large font/120dpi users.
As Stevie D said, 800 should be your least common denominator, and you should account for browser chrome (scrollbars, borders, etc) which personally I like to use 48px less than my target to account for that.
Now personally, I think fixed width layouts are the pinnacle of /FAIL/ at web design. You fix the width to the 752px needed for 800 friendly, and 1920 wide users are going to call it a crappy little stripe. You make it 1280 or even 1024 wide and netbook/tablet users are going to complain about it being too big…
Now, 100% fluid has it’s own problems – like text lines being too long on 1920 displays… so what’s the answer? Semi-fluid layout – aka min-width and max-width.
Of course for other fixes I’d swing a giant axe at the javascript for nothing garbage… some semantic markup wouldn’t be a bad idea, taking an axe to the presentational class names wouldn’t hurt either, proper heading orders might not be a bad idea, and I’d probably lose the paragraphs around the non-paragraph elements in the footer… and some sensible formatting instead of the train wrecks of stuffing everything in the header on a single line… and combining down all those separate CSS files that increase the load time to a single file wouldn’t hurt either; good rule of thumb is no more than two stylesheets per media type – common to all pages and unique to the current page – oh, and add some media types in there… and ditch the ‘single quotes because I’m using doubles in my CGI’ nonsense while at it as well.
Gimme a bit, I’ll toss together a demo of how I’d approach what you are doing with a semi-fluid layout and cleaning up all the other stuff that’s wrong with the page.
Here’s the markup I’d use +/- 5%. I’ve got to stuff my face, after which I’ll dive into CSS for that.
<!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"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<meta
name="description"
content="A directory of ezines and video magazines"
/>
<meta
name="keywords"
content="article, ezine, directory, video"
/>
<title>
FREE Online Article Directory
</title>
</head><body>
<div id="pageWrapper">
<h1>
Ar-ticles.com
<span></span>
</h1>
<ul id="topMenu">
<li><a href="members.php">Join / Register</a></li>
<li><a href="login.php">Member Log-In</a></li>
</ul>
<ul id="mainMenu">
<li><a href="index.php">Home</a></li>
<li><a href="articles.php" class="current">Submit Articles</a></li>
<li><a href="guidelines.php">Author Guidelines</a></li>
<li><a href="guidelines.php">Publisher Guidelines</a></li>
<li><a href="contentfeeds.php">Content Feeds</a></li>
<li><a href="rssfeeds.php">RSS Feeds</a></li>
<li><a href="faq.php">FAQ</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul><hr />
<div id="contentWrapper"><div id="content">
<h2>Content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- #content, #contentWrapper --></div></div><hr />
<div id="firstSideBar">
<h2>First SideBar</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- #firstSideBar --></div><hr />
<div id="secondSideBar">
<h2>Second SideBar</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- #secondSideBar --></div><hr />
<div id="footer">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="privacy.php">Privacy Policy</a></li>
<li><a href="help.php">Help</a></li>
<li><a href="sitemap.php">Site Map</a></li>
</ul>
footer text - 30px high
<div>
Copyright 2010 <a href="http://www.ar-ticles.com">ar-ticles.com</a> All Rights Reserved
</div>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
You’ll notice I fixed the heading orders and added some dummy content – the ID’s saying what things are, NOT how they appear. The double wrapper on Content is so the center column can be fully fluid.
is unlocked for easy access to the bits and pieces.
Tested working IE 5.5 through 9 beta, FF 2 and 3, and the latest flavors each of Opera, Safari and Chrome.
If I have time later I’ll toss together a breakdown of the markup and CSS to explain the how/why of the choices I made… though those choices are why it’s 3.5k of markup vs. 5k despite the addition of dummy content, 3k of CSS vs. 19k, and ditching the pointless javascript.
– edit – Oh, I also re-optimized the logo image to a 6k .png instead of the 18k jpeg you were using.