473,626 Members | 3,291 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 7066
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
5465
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 (151px) as it contains an image, while everything else is fluid. However this only works in IE 6.0. In Netscape and Opera I found that the auto width of the right column is 100% so it jumps down below the menu if the left column is fixed - not...
15
2314
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 on-point, but no one responded to it.) I have a two column layout with a header and a footer. If the "content" is longer than the "navigation", there is no problem. However, if the content is shorter than the navigation, the navigation menus...
7
2610
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, primarily due to the footer not being aware of the columns due to me floating / positioning them. I have the following (very simple) markup: <div id="head">...</div> <div id="left">...</div>
40
4456
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 column has a background picture - right column has another background picture
1
2088
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 column. Without nesting containers, here's the best cross-browser version I could come up with: http://www.singley.org/test/two_cols2.html I see what's wrong - the right column is getting offset by the left column which pushes the viewport out...
9
3100
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
6051
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, footer. Naturally I want liquid main contents, and I have float: right; img, and clear: both; paragraphs in the main contents div. Fixed width right navigation column is probably essential. There is a confounded logo graphic to go at the top...
31
3085
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 like the middle column just to use up that space instead. Any way this is possible? Thanks for your help, it is highly appreciated!
3
3766
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 the 2nd and 3rd columns fill the remaining space but I've given up on that and am willing to settle for the second row to have a fluid 3-column layout (or something else simple). Anyway, I've developed a page where the second row has this 3...
0
8637
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8364
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8502
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7192
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6122
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5571
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4090
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4196
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
1507
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.