PDA

Click to See Complete Forum and Search --> : [RESOLVED] Three columns layout issue

Jazztronik
02-10-2010, 06:43 AM
Ihave a layout of three columns: left (25%), main (50%), right (25%). But depending on the chosen option, the right column might be needless and only "left" and "main" would have to be displayed with 25% and 75% for their widths respectively.

So I cannot simply assign them:

#left {
float:left;
width:25%;
}

#main {
float:left;
width:50%;
}

#right {
float:left;
width:25%;
}

Because in those case in which the right column is not displayed, the other two would remain constrained to their initial widths and a right gap of 25% the width would remain.

So I tried with this:

#left {
float:left;
width:25%;
}

#main {
float:left;
min-width:50%;
max-width:75%;
}

#right {
float:left;
width:25%;
}

Now the main column expands to occupy the room left by the right column when this one is not displayed, but when this one has to be displayed, it appeard below on the left (the main column doesn't compress to the initial 50%).

How can Ï fix this with CSS?
Leebah
02-10-2010, 01:38 PM
There is probably a more elegant way of doing this, but I would suggest giving the body an id="twocolumn" or id="threecolumn". Then, specify the specific columns sizes based on the body id.
Jazztronik
02-10-2010, 02:00 PM
You mean something like this?:

#twocolumn #main {
float:left;
width:75%;
}

#threecolumn #main {
float:left;
width:25%;
}

And I would have to assign either id="twocolumn" or id="threecolumn" dynamically (with PHP) to <body> or another container.

By the way: can an ID selector be descendant of other ID selector like in the example above?
Leebah
02-10-2010, 04:41 PM
That's what I had in mind.

I'm fairly sure that an id selector can be a descendant of another id.
Leebah
02-10-2010, 04:44 PM
But i'm not sure how the PHP would work. The example I saw only had one distinct layout per page. So if you click on link A, it takes you to a specific page that happens to have a 3 column layout, and if you click on link B, that page has a 2 column layout.
Jazztronik
02-10-2010, 05:51 PM
But i'm not sure how the PHP would work. The example I saw only had one distinct layout per page. So if you click on link A, it takes you to a specific page that happens to have a 3 column layout, and if you click on link B, that page has a 2 column layout.

All right, you're talking about static HTML pages. No problem with that, I know PHP so I will consider using your suggestion dynamically. Although it would be great if there was a CSS-only solution.

Thanks again Leebah!