3 column div

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

3 column div

Post 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... :)
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post 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>
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

sweeet. I could have sworn I tried floating, but obviously did something wrong...

worked like a charm, thanks :)
cade
Forum Commoner
Posts: 55
Joined: Tue Jul 03, 2007 8:18 pm

Post by cade »

I always have trouble with width setting. What is the best choice for setting the width by pixel or percentage?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
Post Reply