Page 2 of 2
Posted: Sun Mar 20, 2005 8:18 am
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?
Posted: Sun Mar 20, 2005 9:07 am
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):

With borders:

Posted: Sun Mar 20, 2005 12:04 pm
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
Posted: Sun Mar 20, 2005 2:02 pm
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
Thanks for all the help guys!
Posted: Sun Mar 20, 2005 2:46 pm
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="e;main"e;>
lalalala
<div class="e;leftcol"e;>Here is a left column, yay</div>
<div class="e;rightcol"e;>Here is a right column, w00t</div>
<div class="e;columnfix"e;> </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