7 replies [Last post]
s15199d
Offline
newbie
NC, USA
Last seen: 15 years 30 weeks ago
NC, USA
Joined: 2005-03-01
Posts: 4
Points: 0

I'm trying to get the "main" class to load inbetween the "left" & "right" clasess in the code below. Right now the main class if it's larger than the space between the left and right...goes under the right and keeps on writing out in a straight line. I would like the "main" class to word-wrap inbetween the "left" & "right" classes. I'm using the borders just so I can see the edges of the container...they are purely for development purposes...not to be moved to my production site...any help would be appreciated!

.left
{
	position:absolute;
	left:0px;
	width:172px;
	background-color:#E9E8E4;
}
.main
{
	margin:0px;
	background-color:Red;
	padding:10px;
}
.right
{
	position:absolute;
	right:0px;
	width:172px;
	background-color:#FFFFFF;
}
.bottom
{
	margin:0px;
	background-color:#9BBBCE;
}

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

3 column layout

You need to go to a website that has a lot of three column design examples (something like http://css-discuss.incutio.com/?page=ThreeColumnLayouts or the layout demos at http://www.positioniseverything.net/) and then work through their examples.

One thing I must stress - you will be in a heap of hurt if you continue to try to use absolute positioning - it doesn't work the way you would think.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

s15199d
Offline
newbie
NC, USA
Last seen: 15 years 30 weeks ago
NC, USA
Joined: 2005-03-01
Posts: 4
Points: 0

3 column layout

FYI "Position Everything" uses absolute position in achieving a 3 column layout.

In fact they do it the same way I do.

So, no...I haven't found my problem, and no these links haven't helped. I appreciate your effort. But, this doesn't answer my question.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 1 year 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

3 column layout

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

3 column layout

True, some layout techniques use absolute horizontal positioning of columns (like Perched upon a Lily Pad) but most tend to use floats (see source ordered columns) or negative margins as in the Piefecta demo.. If you look at the Lily Pad demo carefully you will see Holly positions the columns by bringing in the #leftbox just following the header then creates a container with a margins that offset the rest of the content by the absolutely positioned column widths. #container is position:relative so that #rightbox can be positioned absolutely to the right.

In your example, you might try giving #main a position:relative or position:static and then have margin:0 172px which will place both absolutely positioned columns in the margins of #main;

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

s15199d
Offline
newbie
NC, USA
Last seen: 15 years 30 weeks ago
NC, USA
Joined: 2005-03-01
Posts: 4
Points: 0

3 column layout

DC thanks for you help! I'll give these a shot! I appologize if my last post was rude...I stayed at work until 8pm trying to figure it out...and well that's when I wrote my post. So, again thanks and sorry!

s15199d
Offline
newbie
NC, USA
Last seen: 15 years 30 weeks ago
NC, USA
Joined: 2005-03-01
Posts: 4
Points: 0

3 column layout

I got it working but I have a subsequent question. First of all my error was not in the CSS it was in my test content. I used ASDF repeating without any spaces thus not allowing word-wrap thus breaking my layout. Arrrgggh. Well at least that problem is fixed.

My next question though is this. I would like my left and right columns to extend down to the bottom of the page. Currently they only span the length of the content entered in them.

Along the same lines of this question. I would like my footer to be glued to the bottom of the page. I know how to do both of these w/ absolute positioning but I'm trying to stay away from that and be more browser friendly.

Thanks in advance, and thanks for all your help thus far!

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

3 column layout

You have to look up "faux columns" on this site or Css faux columns if you do a web search. Basically, unlike table cells, with floated divs the background stops where the content stops. You can fake it very effectively, however.

Also look at the forum thread I indicated in my PM to you.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS