CSS Advice

Forums › Off topic › CSS Advice

ajobbins

5053 posts

Uber Geek
+1 received by user: 1279

Trusted

#18292 5-Jan-2008 13:52

I'm doing a website at the moment which I want to make fully XHTML and CSS compliant.

The layout I want will be something like this:

I want the area labled 'B' (Which will have a coloured BG) to grow automatically to the same height as 'A', which whil change in height from page to page. The width of 'B' will remain static and 'A' will dynamically adjust based on window size.

A is the main content area, B will be used for a new feed and C is where the page footer will be.

Is anyone able to give me some advise as to how my CSS should look to achieve this?

sleemanj

1514 posts

Uber Geek
+1 received by user: 315

#103923 9-Jan-2008 23:42

Personally, being a bit of a pragmatist, I'd say screw it and use a table. It doesn't make your xhtml or css invalid, tables are still part of the spec, you can still put the nice little validation image on your page in good concience, it just saves you about 2 days of farting about and loss of about half of your hair folicles trying to do what is a 1 minute job with a table.

---
James Sleeman
I sell lots of stuff for electronic enthusiasts...

ajobbins

5053 posts

Uber Geek
+1 received by user: 1279

Trusted

#104006 10-Jan-2008 13:49

I'd rather spend the time and do it properly. Its for my company website and I want it done properly.

chiefie

I iz your trusted friend
5877 posts

Uber Geek
+1 received by user: 151

Retired Mod

Trusted

Lifetime subscriber

#104017 10-Jan-2008 14:30

There is no fault in using table in XHTML... everyone seem to think that to be XHTML and CSS compliant to take out table, which is wrong thinking.

You can use table, to its most cleanest form and still use CSS to apply styles and it's still very very very much XHTML compliant.

If you want to explore DIV-based layout, then you'll need to create a faux coloured background image (say width of B x 5px high), which has the width of the B, and right aligned, repeat-y for the container that holds A and B.

Internet is my backyard...

«Geekzone blog: Tech 'n Chips Takeaway» «Personal blog: And then...»

Please read the Geekzone's FUG

ajobbins

5053 posts

Uber Geek
+1 received by user: 1279

Trusted

#104248 11-Jan-2008 16:04

I've changed the way i'm going to do this a bit.

I want to use DIV based layout.

A will be variable width and height based on the content, B will be fixed width but variable height based on the content and C will need to be below both A and B.

I currently have this working how I want in IE7 HOWEVER if I view it in Firefox or Opera the footer (Section C) appears at top, kind of behind A and B. It looks how I want it to look in IE7.

Is someone able to take a look at the code and give me an idea how I can fix this in FF/Opera?

http://www.itechsystems.co.nz/v2test/index.php for the HTML and http://www.itechsystems.co.nz/v2test/style.css for the style sheet.

ajobbins

5053 posts

Uber Geek
+1 received by user: 1279

Trusted

#104250 11-Jan-2008 16:13

Sorted it myself. DIV needed a float:left;