Page 1 of 1

3 column div

Posted: Thu Aug 02, 2007 6:42 pm
by alex.barylski
I have the following which *almost* works...not sure how to get the columns to align vertically at the top though???

Code: Select all

<div>
	<div style="position: relative; width: 33%; background-color: lightgrey;">
		<strong>Mailing Lists</strong>
		<ul>
			<li>Business</li>
			<li>Software</li>
		</ul>
	</div>

	<div style="position: relative; left: 33%; width: 33%; background-color: red">
		<ul>
			<li>Statistics</li>
		</ul>
	</div>

	<div style="position: relative; left: 66%; width: 33%; background-color: orange">
		<p style="background-color: #F8CF61">User Notes</p>
	</div>
</div>
Any help would be greatly appreciated... :)

Posted: Thu Aug 02, 2007 6:44 pm
by John Cartwright
Floats are your friend

Code: Select all

<div style="float: left; width: 33%; background-color: lightgrey;">
		 <strong>Mailing Lists</strong>
		 <ul>
					<li>Business</li>
					<li>Software</li>
		 </ul>
</div>

<div style="float: left; width: 33%; background-color: red">
		 <ul>
					<li>Statistics</li>
		 </ul>
</div>

<div style="float: left; width: 33%; background-color: orange">
		 <p style="background-color: #F8CF61">User Notes</p>
</div>

Posted: Thu Aug 02, 2007 6:55 pm
by alex.barylski
sweeet. I could have sworn I tried floating, but obviously did something wrong...

worked like a charm, thanks :)

Posted: Fri Aug 03, 2007 10:01 pm
by cade
I always have trouble with width setting. What is the best choice for setting the width by pixel or percentage?

Posted: Sat Aug 04, 2007 4:15 am
by matthijs
cade wrote:I always have trouble with width setting. What is the best choice for setting the width by pixel or percentage?
That's a broad question, but in general percentages
- are less precise
(beware of rounding errors, 50%+50% sometimes is 101%)
- allow for flexible layouts

- allow for easier adjustments
(say you change a parent elements' width, then all child elements with widths set in % scale automatically)

Pixel widths are used for fixed width layouts, and can be styled a bit more precise

Posted: Sat Aug 04, 2007 8:08 am
by superdezign
matthijs wrote:(beware of rounding errors, 50%+50% sometimes is 101%)
Percentages cause problems in IE (at least IE6) as it always seems to round up. I prefer to use padding instead of set widths.