[56K WARN] Table free layouts with CSS

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

Post by phpScott »

Is there a reason that you are nesting the <div> tags. I thought you where trying to get them to line up side my side across the page?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

It was Phenom's workaround in order to get the effect I needed, but you're right, i do need them side-by-side. My argument was that, although in this instance it looks the same since on div is a differenent color to the parent div, if both div's had a border the nesting would be obvious. I have done some more of the design now but essentially my problem stands. See I now have (what looks like) 3 divs side-by-side in the header. 2 are fixed width, but the right hand side block should just stretch to fill the remaining width of the page. This is easy if ALL the DIV's use % but the two left ones use px. However, as I say it looks right for this particular instance but there are occassions where I would have borders around these (easy with tables).

Without borders (I've used bright colors just to emphasise):
Image
With borders:
Image
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

I dont see the problem with using 50% of whatever for both the side divs..
simply align the left div to the left, and align the right div to the right

so on larger resolutions all that happens it

LOGO OVER HERE---------------[whitespaces]----------------------YOUR LINKS OVER HERE
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Phenom wrote:I dont see the problem with using 50% of whatever for both the side divs..
simply align the left div to the left, and align the right div to the right

so on larger resolutions all that happens it

LOGO OVER HERE---------------[whitespaces]----------------------YOUR LINKS OVER HERE
Yeah you're right :D

Thanks for all the help guys!
The Monkey
Forum Contributor
Posts: 168
Joined: Tue Mar 09, 2004 9:05 am
Location: Arkansas, USA

Post by The Monkey »

It appears I may be to late to be of service, but this is what I came up with (strict XHTML 1.1 Doctype):

XHTML:

Code: Select all

<div id=&quote;main&quote;>
lalalala

<div class=&quote;leftcol&quote;>Here is a left column, yay</div>
<div class=&quote;rightcol&quote;>Here is a right column, w00t</div>
<div class=&quote;columnfix&quote;>&nbsp;</div>
</div>
CSS:

Code: Select all

//IE Fix (sigh)
#main { line-height: normal !important; line-height: 1.2; }

div.leftcol
{
	font-size: 9pt;
	text-align: justify;
	width: 48%;
	float:left;
}

div.rightcol
{
	font-size: 9pt;
	text-align: justify;
	width:48%;
	float:right;
}

div.columnfix
{
	clear:left;
}
The div.columnfix may not be necessary - however in my case, it was.

NOTE: the div.columnfix only works if the left column is longer than / equal to the right column! If this is a problem, you may want to have two column fixes - columnfixleft and columnfixright - but that kindof unautomates everything and feels "hacky". Oh well.

I'm in love with how this came out... percentages are beautiful.

Tested in IE6 and FireFox 1.01

View this code in action

- Monkey
Post Reply