468,119 Members | 1,838 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

Fluid and Fixed 2 Column Layout

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!

May 17 '06 #1
9 2872
TristaSD wrote:
How do I accomplish the following:
This template may help:
http://benmeadowcroft.com/webdev/css...ht-column.html
http://benmeadowcroft.com/webdev/css...ght-column.css
In a two-column layout, the right column is 200px wide, and the left
column is fluid?


Best not to set a column width in pixels. Use em instead. When a visitor
resizes your text (vision problems), IE users who cannot resize pixels
will see the contents of that column bulge outside of it (assuming the
text itself was not hard-coded in size).

--
-bts
-Warning: I brake for lawn deer
May 17 '06 #2
Got it. How do I rock something like that in em's?

I got a fixed-width 200px calendar in the right column, but the left
column contains data that needs to be fluid. Right now I'm using
floats and percentages, left 75%, right is 200px / 800px = 25%. On
larger resolutions there is a lot of white space in the right
(calendar) column.

May 17 '06 #3
TristaSD wrote:
Got it. How do I rock something like that in em's?

I got a fixed-width 200px calendar in the right column, but the left
column contains data that needs to be fluid. Right now I'm using
floats and percentages, left 75%, right is 200px / 800px = 25%. On
larger resolutions there is a lot of white space in the right
(calendar) column.


In Ben's CSS, note the width for the .sidebar class: 10em
Try changing that to something around 20em.

Note also the margin-right in the .contentText class, at 12em. Change
that to 1 em more than the above sidebar class, or 21em.

Why 800px? Are you attempting fixed-width size for overall? Note how
Ben's page fits in any browser window. Think fluid design.
http://allmyfaqs.net/faq.pl?AnySizeDesign

--
-bts
-Warning: I brake for lawn deer
May 17 '06 #4
800px because that's the lowest common denominator, so if I make the
right navigation less than 25%, it will be clipped on 800x600.

Never would have guessed absolute positioning works so well. Thanks a
bunch.

May 17 '06 #5
TristaSD wrote:
800px because that's the lowest common denominator, so if I make the
right navigation less than 25%, it will be clipped on 800x600.
No, 800px isn't the "lowest". I frequently have a browser window open at
650-700px. You're thinking screen resolution, which isn't important, as
lots of people do not browse with maximized browsers. Think PDAs and
mobile phones, too. That's why I suggested the 'any-size-design' page.
Never would have guessed absolute positioning works so well. Thanks a
bunch.


You're welcome.

--
-bts
-Warning: I brake for lawn deer
May 17 '06 #6
Beauregard T. Shagnasty wrote:
TristaSD wrote:
How do I accomplish the following:


This template may help:
http://benmeadowcroft.com/webdev/css...ht-column.html
http://benmeadowcroft.com/webdev/css...ght-column.css


That's cool; the red box on the right side of the screen is transparent
when you move it over the background image. How does that work?
--
Brian O'Connor (ironcorona)
May 18 '06 #7
ironcorona wrote:
Beauregard T. Shagnasty wrote:
TristaSD wrote:
How do I accomplish the following:


This template may help:
http://benmeadowcroft.com/webdev/css...ht-column.html
http://benmeadowcroft.com/webdev/css...ght-column.css


That's cool; the red box on the right side of the screen is transparent
when you move it over the background image. How does that work?


It's a semi-transparent gif background image assigned in the CSS:

..other {
text-align : center;
background-image : url(images/redfilter.gif);

Here's the original image:
http://k75s.home.att.net/show/redfilter.gif
and enlarged; the non-red parts are set as transparent:
http://k75s.home.att.net/show/redfilter-large.gif

--
-bts
-Warning: I brake for lawn deer
May 18 '06 #8
Beauregard T. Shagnasty wrote:
ironcorona wrote:
Beauregard T. Shagnasty wrote:
TristaSD wrote:

How do I accomplish the following:
This template may help:
http://benmeadowcroft.com/webdev/css...ht-column.html
http://benmeadowcroft.com/webdev/css...ght-column.css

That's cool; the red box on the right side of the screen is transparent
when you move it over the background image. How does that work?


It's a semi-transparent gif background image assigned in the CSS:

.other {
text-align : center;
background-image : url(images/redfilter.gif);

Here's the original image:
http://k75s.home.att.net/show/redfilter.gif
and enlarged; the non-red parts are set as transparent:
http://k75s.home.att.net/show/redfilter-large.gif


That's truly a beautiful thing. Personally I've been gagging for the
opacity property [which you can try out in FF using -moz-opacity]:

http://www.w3.org/TR/css3-color/#transparency

Christmas may just have come early. It's not exactly the same but it
might be useful.

--
Brian O'Connor (ironcorona)
May 18 '06 #9
To further the education of mankind, ironcorona <ir*********@gmail.com>
vouchsafed:
That's truly a beautiful thing. Personally I've been gagging for the
opacity property [which you can try out in FF using -moz-opacity]:


You can use straight "opacity" in Firefox now and IE has a filter. I fade
thumbnails to 50% on visited.

--
Neredbojias
Infinity has its limits.
May 18 '06 #10

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

179 posts views Thread by SoloCDM | last post: by
5 posts views Thread by Alex Bell | last post: by
22 posts views Thread by Jam Pa | last post: by
4 posts views Thread by Rob Freundlich | last post: by
3 posts views Thread by Spondishy | last post: by
12 posts views Thread by JB | last post: by
4 posts views Thread by Jeff | last post: by
13 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.