3 Columns of DIVs (I think this one stumps all CSS newbies.) Help?

by 5 replies
7
I have Googled everything I could think of to make my three DIV columns to line up evenly and I haven't found a solution. I just want three evenly aligned places to place a H3 and some text. Just like on this theme below the slider.


Here's everything I have in my body.
Code:
<body>
	<div id="wrap">
		<div id="header">
			<img id="logo" src="images/logo.png" alt="Logo">
		<ul>
			<li><a href="contact.html">Contact</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="services.html">Services</a></li>
			<li><a href="index.html">Home</a></li>
		</ul>
		</div>
		

			<div id="left">
				<h3>Feature One</h3>
			</div>

			<div id="right">
				<h3>Feature Three</h3>
			</div>

			<div id="mid">
				<h3>Feature Two</h3>
			</div>

	</div>
</body>

And here's my CSS for the three DIVs that I'm trying to get to line up.
Code:
#left {
	width: 300px;
	float: left;
	clear: none;
	position: absolute;
}

#right {
	width: 300px;
	float: right;
}

#mid {
	width: 300px;
	padding: 10px;
	margin: 0 150px;
}
I've tried everything I can find and think of. Any help is appreciated. I'm not working on anything important, I'm just learning by experience and so far, this is the only thing that stumps me. I hope to settle this and learn from the solution so I can place columns fluently in the future!
#programming #columns #css #divs #newbies #stumps
  • Just float all three of them left, then put an appropriate amount of padding on each. You MUST, however, clear your floats, so they don't mess up the elements below them. That means either having an element after them that has style="clear:both", or wrapping all three with a DIV that has style="overflow:auto" or style="overflow:hidden". Of course it is better to do this on a stylesheet than with inline styles.
    • [ 1 ] Thanks
  • Do yourself a favor and cut down on your Google time: install and get familiar with Firebug for Firefox. 30 seconds of drilling on your example URL shows that the author did exactly as wayfarer suggested.

    Firebug is invaluable - indispensable, IMHO - for people who build web sites. You can single out elements on the page and see the exact cascade of style rules that are affecting the element. It will also help you learn about CSS specificity (how conflicting CSS rules are applied by the browser) and so many other things.
    • [ 1 ] Thanks
    • [1] reply
    • Or just use Chrome, like I do. Right click and "Inspect Element" or 'F10' (CMD-option-I on Mac), and it brings up the Web Inspector, which is just like Firebug.
  • I got it all done. Then, to make sure I understood how to do it, I went back and wrote a tutorial on it. I figure one day I will run across someone who could benefit from learning all that I learned in just trying to figure out this one little thing.
Join the discussion

Next Topics on Trending Feed