Page 1 of 2
[56K WARN] Table free layouts with CSS
Posted: Sat Mar 19, 2005 3:19 pm
by Chris Corbyn
I'm working on my own website at the moment and I'm aiming to avoid tables as much as possible using plenty of CSS.
One question:
To achieve a band across the page containing two adjacent boxes I previously did this.
Code: Select all
<table width="e;100%"e; height="e;100"e; cellpadding="e;0"e; cellspacing="e;0"e;>
<tr>
<td width="e;500"e; bgcolor="e;#EEEEEE"e;>Something here</td>
<td bgcolor="e;#FAFAFA"e;>This is at the right and fills the remaining width</td>
</tr>
</table>
See it fills the entire page width, shows as two blocks but the left one is a fixed width. With CSS I'm pulling my hair out trying to get it working in both IE and CSS using XHTML Strict. I'm trying (except I'm using an external stylesheet):
Code: Select all
<div style="e;width:500px; height:100px; padding:0px; margin:0px; background-color:#EEEEEE; display:block; float:left"e;>
Something here
</div>
<div stlye="e;height:100px; padding:0px; margin:0px; background-color:#FAFAFA; display:block; float:left"e;>
This is at the right and fills the remaining width
</div>
Can somebody help me out please

It's getting the right hand side DIV to fill the remaining width that's causing me the headeache.
Posted: Sat Mar 19, 2005 4:08 pm
by John Cartwright
Code: Select all
<div style="e;width:500px; height:100px; padding:0px; margin:0px; background-color:#EEEEEE; display:block; float:left"e;>
Something here
</div>
<div stlye="e;height:100px; padding:0px; margin:0px; background-color:#FAFAFA; display:block; float:right"e;>
This is at the right and fills the remaining width
</div>
notice.. float: left; has been changed to float: right; in the second div
Posted: Sat Mar 19, 2005 4:17 pm
by Chris Corbyn
Thanks... I still can't get it to work. It doesn't fill the width of the page, just sits there at the right only filling whatever width the contents of it take.
DOCTYPE is strict
Code: Select all
<!DOCTYPE html PUBLIC "e;-//W3C//DTD XHTML 1.0 Strict//EN"e;
"e;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"e;>
Posted: Sat Mar 19, 2005 4:28 pm
by John Cartwright
try
Code: Select all
<div style="e;width: 100%; height: 100px; background-color:#FAFAFA; padding: 0px;"e;>
<div style="e;width:500px; height:100px; padding:0px; margin:0px; background-color:#EEEEEE; display:block; float:left"e;>
Something here
</div>
This is at the right and fills the remaining width
</div>
Posted: Sat Mar 19, 2005 4:40 pm
by Chris Corbyn
Ok thanks that gives the right effect so I'll have it like that but let's say each div needed a border around it.... Then it would appear as one div nested inside another, not two blocks side-by-side.
Tables were so much easier LOL
At least you could predict where content would appear. I'm sure after a while of practising this table free stuff I'll get to know all the workarounds
I've been using CSS for ages, just not for structuring a layout

Posted: Sat Mar 19, 2005 4:43 pm
by John Cartwright
d11wtq wrote:
Tables were so much easier LOL
..
I've been using CSS for ages, just not for structuring a layout

I am in the same boat as you, all my layouts are now 100% fully CSS driven, but for the love of god I do miss tables.. especially for doing simple things

. Long live CSS
Posted: Sat Mar 19, 2005 5:12 pm
by timvw
<troll>
i've noticed that most people that use css for layout start adding div containers to the text (for layout reasons). Why would that be any "better" than tables? with tables you know atleast how it will work in virtually every browser...
</troll>
Posted: Sat Mar 19, 2005 5:19 pm
by Chris Corbyn
timvw wrote:<troll>
i've noticed that most people that use css for layout start adding div containers to the text (for layout reasons). Why would that be any "better" than tables? with tables you know atleast how it will work in virtually every browser...
</troll>
Obviously there are some situations where tables are a definite requirement but I'd like to move with the times and try to keep to XHTML and CSS where possible. Also, smaller file size (generally) if you need to repeat a certain layout feature over and over

Posted: Sat Mar 19, 2005 5:26 pm
by John Cartwright
Plus tables render slower

, right?
Posted: Sat Mar 19, 2005 5:56 pm
by hawleyjr
I must say I disagree. Unless this is for a class where you are required to only use CSS tables are much more efficient. Every mainstream browser is going to recognize tables the same and development time of a table is super quick. I appreciate the use CSS and XHTML where appropriate however, just because using Div tags and CSS works doesn’t mean you’re “moving with the times”
…Just my two cents…
Posted: Sat Mar 19, 2005 9:02 pm
by Chris Corbyn
I guess it's just personal preference but I just think that CSS oriented layouts look and feel cleaner and (generally) easier to manage.
I'd be a lot happier if I could competently code all my layouts 100% XHTML strict and use tables only for their "intended" purpose - data presentation. As I say, it's a personal preference I guess
PS: Guys, please don't disregard the original question. Phenom, provided a (sort of) workaround but it doesn't do what I originally needed. I need the DIV blocks side-by-side, not nested, but with a total width of 100%.
Posted: Sun Mar 20, 2005 1:11 am
by John Cartwright
it is possible to have them side by side.. just have them both as float left and other as float right .. and make sure their width percentage is equal to 100.. so it will fill the screen.
Posted: Sun Mar 20, 2005 4:12 am
by Chris Corbyn
Phenom wrote:it is possible to have them side by side.. just have them both as float left and other as float right .. and make sure their width percentage is equal to 100.. so it will fill the screen.
Yes I know this but that's where the trickiness comes in... the left box has a fixed width (500px) so what % do I give the right one?
I've tried inherit, not specified and float left and right but still no luck

Posted: Sun Mar 20, 2005 6:47 am
by phpScott
The way I have always made the difference is to use CSS for basic layouts then use tables for dynamic data.
Then I sit around with my CSS XHTML book, cry, pound my head into the keyboard, and ask the inevitable question of "WHY WON'T YOU WORK" when trying to get the css working across different browsers.
Shouldn't 100% finish taking up the rest of the allocated space.
Posted: Sun Mar 20, 2005 7:04 am
by Chris Corbyn
No, it seems to take it as 100% the width of the page not 100% of the available width. This has two possible outcomes on IE and Moz (can't remember which does what). Either: a) The page has a horizontal scrollbar or b) The div's overlap one another
I think if I change to transitional I could avoid it but I'm trying to learn to code to XHTML strict and continue this practise in all furture client work. I may be bald by this time next week however....