Stylesheets - Two column layout - Fixed right column

Author

Two column layout - Fixed right column

Spondishy

2005-11-11, 7:19 pm

OK... After a previous post, I've decided that the site layout will be
two columns

The layout will be:

1) Page 100% wide

2) Right column will be fixed 150px, left column will use the rest of
the space

3) Left column needs a right border. A gap of 10px should be on both
sides of the border.

I've been playing around with this, but having issues with the fixed
right column aligning correctly and when I add the border I end up with
vertical scrollbars in firefox.

Help would be appreciated.

Thank you.

Els

2005-11-11, 7:19 pm

Spondishy wrote:

> OK... After a previous post, I've decided that the site layout will be
> two columns
>
> The layout will be:
>
> 1) Page 100% wide
>
> 2) Right column will be fixed 150px, left column will use the rest of
> the space
>
> 3) Left column needs a right border. A gap of 10px should be on both
> sides of the border.
>
> I've been playing around with this, but having issues with the fixed
> right column aligning correctly and when I add the border I end up with
> vertical scrollbars in firefox.

I'm sure you mean horizontal scrollbars, right?

> Help would be appreciated.

<div id="container">
<div id="navigation">
</div>
<div id="content">
</div>
</div>

#navigation{
width:150px;
float:right;
}
#content{
margin-right:160px;
border-right:2px solid black;
}

> Thank you.

You're welcome :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Spondishy

2005-11-11, 7:19 pm

Thanks els,

Yes, I meant horizontal scrollbars.
Just a couple of other questions if that is OK.

1) Can I make the #content have a 10px gap to the left of the
border-right
2) If I have a div that is 100% wide, with a 1px border all the way
around. How do I stop the horizontal scrollbar in that instance?
3) What is the significance of the container div?

Thanks.

Els

2005-11-11, 7:19 pm

Spondishy wrote:

> Thanks els,

Did I answer a question of yours? When? Where? What about? (see below)

> Yes, I meant horizontal scrollbars.
> Just a couple of other questions if that is OK.
>
> 1) Can I make the #content have a 10px gap to the left of the
> border-right

Yes. Just set padding:10px to #content. (I'm guessing you want padding
on all the other sides of #content too, if not: padding-right:10px;

> 2) If I have a div that is 100% wide, with a 1px border all the way
> around. How do I stop the horizontal scrollbar in that instance?

There is no horizontal scrollbar when you do that.
Unless you mean in IE?
Any div that hasn't got a width set, will take up 100% of the width.
If you add borders, it will take up 100% - border widths. So the
answer is, just don't set the width at all.

> 3) What is the significance of the container div?

You can do it without a container div, but I almost always end up
needing it because I want more than just one sidebar and one content
area. Stuff like header and footer, sometimes a margin around the
page.

> Thanks.

You're welcome.
Now it's my turn to ask something:
Can you please do as the rest of us, and quote the relevant parts of
messages when you reply to them? It makes it a lot easier for
everybody, including yourself - you'll see.

How to do it in Google Groups, is explained on this page:
http://www.safalra.com/special/googlegroupsreply/

Thanks :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -