10 replies [Last post]
munsaer
Offline
newbie
Last seen: 15 years 48 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 4
Points: 0

Hello

I have made a page with three columns. See my example 1. Code further down.
But sometimes I only want two columns, the left and the center. See example 2. And that's where the problem begins. I want the second column to expand and take up the space that the right column was taking up earlier.

Suggestions?

I guess I have to leave the position: absolute that I am using now and go for float:left I guess. I have tried some different examples but they have always ended up like putting the right column beneath the two others. So I have always returned to what I have posted below because that works for most of the pages.

Example 1

testing example

body
{
margin:0;
padding:0.5em;
}

#left
{
border-right: #000 1px solid;
border-top: #000 1px solid;
border-left: #000 1px solid;
border-bottom: #000 1px solid;
left: 0.5em;
position: absolute;
width: 10em;
background-color: #bbb;
margin-right: 0;
}

#center
{
border-right: #000 1px dashed;
border-top: #000 1px dashed;
border-left: #000 1px dashed;
border-bottom: #000 1px dashed;
position: absolute;
left: 12em;
right: 13em;
padding: 0em;
}

#right
{
border-right: #000 1px solid;
border-top: #000 1px solid;
border-left: #000 1px solid;
border-bottom: #000 1px solid;
position: absolute;
right: 0.5em;
width: 11em;
margin-left: 0em;
margin-top: 0;
background-color: #bbb;
margin-bottom: 1em;
padding: 0em;
}

left

center

Example 2

testing example 2

body {
margin:0;
padding:0.5em;
}

#left
{
border-right: #000 1px solid;
border-top: #000 1px solid;
border-left: #000 1px solid;
border-bottom: #000 1px solid;
left: 0.5em;
position: absolute;
width: 10em;
background-color: #bbb;
margin-right: 0;
}

#center
{
border-right: #000 1px dashed;
border-top: #000 1px dashed;
border-left: #000 1px dashed;
border-bottom: #000 1px dashed;
position: absolute;
left: 12em;
right: 13em;
padding: 0em;
}

#right
{
border-right: #000 1px solid;
border-top: #000 1px solid;
border-left: #000 1px solid;
border-bottom: #000 1px solid;
position: absolute;
right: 0.5em;
width: 11em;
margin-left: 0em;
margin-top: 0;
background-color: #bbb;
margin-bottom: 1em;
padding: 0em;
}

left

center

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 48 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

For starters, I wouldn't use

For starters, I wouldn't use absolute positioning (well I may for one of the outer columns if I could guarantee other column length). I would probably use floats or other 3 column layouts (using negative margins, etc - do a search).

But for your different layout types, I would add an ID to the body for each type of layout. Then you can style accordingly using descendant selectors. So the #center column under body#twocol would have different rules than #center under body#threecol.

tobto
tobto's picture
Offline
newbie
Last seen: 15 years 27 weeks ago
Joined: 2007-02-20
Posts: 2
Points: 0

absolute not is good

I agree, absolute position isn't good. Float is better. In general float:left makes things alive Wink

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Are you saying that you

Hi

Are you saying that you want a site design that with only a minor change in css only a right column will appear or disappear? Because if you do, I have just done that with a site of mine and can give you a hand if you want.

munsaer
Offline
newbie
Last seen: 15 years 48 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 4
Points: 0

ClevaTreva wrote:Hi Are you

ClevaTreva wrote:
Hi

Are you saying that you want a site design that with only a minor change in css only a right column will appear or disappear? Because if you do, I have just done that with a site of mine and can give you a hand if you want.

Kind of. I want the center column to take the space the previously was taken up by the right column.

But anyway, so besides my problem the suggestion is to move away from absolute position and go for width in percent and float (like http://www.glish.com/css/2.asp ) ...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Yes indeed That is what my

Yes indeed

That is what my site does, the center column expands to take the missing column's space.

Is your design idea full width or fixed width?

munsaer
Offline
newbie
Last seen: 15 years 48 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 4
Points: 0

My design is with full

My design is with full width. It would be nice to take a look at your site to see how it works. Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi I'm busy re-writing and

Hi

I'm busy re-writing and tidying the code right now. I've finished the 2 column version and so I have uploaded a template of it here:

It has a shady border around the page that is 9px wide AND an extra 21px wide margin left and right, all of which can be easily changed or removed. Similarly, it is a full height (ie minimum of 100% browser window high) design. Again, this can easily be removed.

I have tested it in everything except IE6 and below, and I am nipping in to work to do that right now.

This is the url:

Link Here

I'll get back to you with the other link and any other questions, like does it work with IE6?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Had to make two minor

Had to make two minor additions to the code for IE6 and earlier, so I have re-posted the stylesheet to my website.

Working on adding back in the right column bit now (won't take long I would guess).

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Done the full

Done the full version:

Click Here

If you download the page (I use the FF scrapbook extension, although it has the annoying habit of renaming the html and css files, converting css imports to links, removing xhtml tag endings and converting colors to rgb) you will see that the right column is present.

In the head you will see two css files that add the right column being called (one for all browsers, and an extra one for IE7). Simply comment out these css files and hey presto, the right column disappears and the center column fills the gap.

munsaer
Offline
newbie
Last seen: 15 years 48 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 4
Points: 0

Thank you. It looks nice and

Thank you. It looks nice and have given me some ideas how to solve it on my site.