473,394 Members | 1,813 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

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 7045
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Doug McCrae | last post by:
http://www.btinternet.com/~doug.mccrae/go4learning/index.html As it says in the subject, a two column layout (plus header and footer boxes). I feel the left column really needs to be fixed width...
15
by: Tamblyne | last post by:
This problem has got to have a simple solution and I can't be the first person who has ever handled it. Perhaps Google is no help because I'm not using the right terms? (I did find one post...
7
by: Andrew | last post by:
I've been struggling to achieve the following layout for some time now and I'm not getting anywhere. I've tried several approaches including floats & absolute positioning and none seem to work,...
40
by: Mark | last post by:
Hello i like to make the following lay out: - 3 columns - center column = fixed width - left and right columns are not fixed and must take all the available space there is left. - left...
1
by: ChitownE | last post by:
Here's what I'm looking to do: fixed left column and a right column that fills the remainder of the space. I need the ability to position other elements relative to the borders of the right...
9
by: TristaSD | last post by:
Hi, How do I accomplish the following: In a two-column layout, the right column is 200px wide, and the left column is fluid? Thanks!
2
by: Eric Lindsay | last post by:
I hope someone can help, before I start thinking tables have a lot of merit after all. I am trying to achieve a two column layout, with source code div order main content, right side navigation,...
31
by: Sarita | last post by:
Hello, this might sound stupid, but I got a really nice homepage template which unfortunately is a 3-Column Fixed Width CSS format. Now I don't have any content for the right column and would...
3
by: hzgt9b | last post by:
I want a page with a centered div containing two rows. Top row has an image and some text. The bottom row needs to have three columns. I'd love to have the 1st column set to a fixed width then have...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.