7 replies [Last post]
doddster
Offline
newbie
Last seen: 9 years 49 weeks ago
Joined: 2004-11-18
Posts: 4
Points: 0

So, after completing my first CSS layout last week I've been dropped right in the deepend by having to fix a site that doesnt work on macs. I've got it to work on mac, now it wont work on windows/IE!!!

Rather than simply wade through the CSS changing things, I'm tryin to strip it down to the basics so I have a better understanding of the layout and problems it may be having.

For all intents and purposes, this is the layout I'm trying to fix/create.

I also have a complete version that isnt working, but thought it would be easier to show this diagram than ask you's to look through lots of code. If you would like to see it all please PM me and I'll send you the link.

Many thanks
Matt

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 50 weeks 3 days ago
Halifax, Canada
Timezone: GMT-4
Joined: 2004-03-22
Posts: 828
Points: 0

Help with 3 column/ multiple rows layout

Dodster, it is all about how you nest your different page layout objects so that they play nice with each other with no need for absolute positioning and such. See the diagram below which simply outlines your different divs and shows critical bits of the CSS. Outer containers control the behaviour of inner containers. The one tricky bit is with the two parallel columns that need to be enclosed in their own div with a clear afterward. That can be done with a clearing break or div below the box containing the two OR, now my preferred option, look up Tony's use of the :after pseudoclass to create a self-clearing container.

I am a great proponent of pencil and paper design. Lay out what you want your design to look like and then draw the necessary boxes to contain and constrain the content.

Good luck.

DE

(PS: As an exercise for extra points - what would you have to do if you wanted the footer to be full width?)

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

doddster
Offline
newbie
Last seen: 9 years 49 weeks ago
Joined: 2004-11-18
Posts: 4
Points: 0

Help with 3 column/ multiple rows layout

Hi DE

Thanks alot for your comments and help - much appreciated. I've been skecthing it out (I always do) - I guess with this being my first proper attempt I'm still figuring out how divs affect each other. This was how far I'd got :

http://www.thirdplanet.co.uk/clients/dbi/3column03.html

fine on mac - nowhere near on pc!

I'll have a look at your diagram and see how I get on.

In terms of the 'clear', how would you go about that?

div#clear {
clear:both;
}

<div id="clear"></div>

????

Many thanks
Matt

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 50 weeks 3 days ago
Halifax, Canada
Timezone: GMT-4
Joined: 2004-03-22
Posts: 828
Points: 0

Help with 3 column/ multiple rows layout

The clear technique developed by Tony, this forum's fearless leader, is superior to all methods used in the past and is described in great detail with examples in this article from the excellent site Position is Everything (PIE).

Basically the clearing is handled entirely by the CSS as a class with no additional markup as required by traditional float clearing methods.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

doddster
Offline
newbie
Last seen: 9 years 49 weeks ago
Joined: 2004-11-18
Posts: 4
Points: 0

Help with 3 column/ multiple rows layout

Hi DE (or anyone else who reads this!)

This making much more sense to me now, thanks.

However, I'm still coming across a problem with IE/Win, and the positioning of the right containing DIV

http://www.thirdplanet.co.uk/clients/dbi/structure.html

any ideas why?

many thanks
matt

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 50 weeks 3 days ago
Halifax, Canada
Timezone: GMT-4
Joined: 2004-03-22
Posts: 828
Points: 0

Help with 3 column/ multiple rows layout

I have appended an example that does your design.(HTML and an image of what it looks like) You can vary the #wrapper width and the content resizes proportionately (may have to adjust the width of the inner column floats if they wrap). The dark borders are actually the background of the main container divs exposed by giving 5px of padding - can sometimes work better than doing borders themselves.

This should put you on the right track if you study it very carefully.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

doddster
Offline
newbie
Last seen: 9 years 49 weeks ago
Joined: 2004-11-18
Posts: 4
Points: 0

Help with 3 column/ multiple rows layout

Hi

Thanks again DE for all your help. I've been lokking at what you sent me and it seems to make good sense.

However,I was still having issues with the the 'clear' div jumping out on IE/Win and placing itself outide of the #right DIV.

I read through the linked articles which covered the 'clear' class you had included, which for some reason didnt quite seem to be working.

However, something in the article prompted me to try something - if I specified a height for the 'right' div, it all worked!

Its not ideal - but its the first workaround I have that has worked cross-platform/browser.

Fortunately - none of the containers need a bg color, so the fact that they dont all meet up might not be too big a problem.

I know it's probably not the best way to go about it, but at least its working now!

http://www.thirdplanet.co.uk/clients/dbi/structure05.html

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 50 weeks 3 days ago
Halifax, Canada
Timezone: GMT-4
Joined: 2004-03-22
Posts: 828
Points: 0

Help with 3 column/ multiple rows layout

I noted the same thing in further exploration of the code I came up with for your design. I've posted here in discussion regarding Tony's clearing method. There are a couple of ways to get around the problem. but this is what I used:

.clear:after { content: "."; display: block; height: 0pt; clear: both; visibility: hidden; }

.clear { }

* html .clear { height: 1%; }

.clear { display: block; position:relative;}

#head, #nav, #featured, #iplaySoon, #iplayNow, #foot { padding: 5px; }

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS