7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

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

by Neodism
5 replies
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!
#columns #css #divs #newbies #stumps
  • Profile picture of the author wayfarer
    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.
    {{ DiscussionBoard.errors[7605093].message }}
  • Profile picture of the author SteveJohnson
    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.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[7606381].message }}
    • Profile picture of the author wayfarer
      Originally Posted by SteveJohnson View Post

      Do yourself a favor and cut down on your Google time: install and get familiar with Firebug for Firefox.
      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.
      {{ DiscussionBoard.errors[7606470].message }}
  • Profile picture of the author Neodism
    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.
    Signature
    Free Web Design from Neodism.
    {{ DiscussionBoard.errors[7608398].message }}

Trending Topics