Fluid and Fixed 2 Column Layout

[TristaSD]

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!

[Beauregard T. Shagnasty]

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

[TristaSD]

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.

[Beauregard T. Shagnasty]

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

[TristaSD]

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.

[Beauregard T. Shagnasty]

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

[ironcorona]

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)

[Beauregard T. Shagnasty]

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

[ironcorona]

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)

[Neredbojias]

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.