468,107 Members | 1,325 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,107 developers. It's quick & easy.

Two column layout - Fixed right column

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.

Nov 11 '05 #1
3 6825
Els
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 -
Nov 11 '05 #2
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.

Nov 11 '05 #3
Els
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 -
Nov 11 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Doug McCrae | last post: by
15 posts views Thread by Tamblyne | last post: by
40 posts views Thread by Mark | last post: by
1 post views Thread by ChitownE | last post: by
9 posts views Thread by TristaSD | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.