[56K WARN] Table free layouts with CSS
Moderator: General Moderators
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
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:

Without borders (I've used bright colors just to emphasise):

With borders:

- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
Yeah you're rightPhenom 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
Thanks for all the help guys!
-
The Monkey
- Forum Contributor
- Posts: 168
- Joined: Tue Mar 09, 2004 9:05 am
- Location: Arkansas, USA
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:
CSS:
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
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>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;
}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