3 columns: fixed center column

[Mark]

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

So the left and right column are fluid and the width wil change when the
browser window width is changing.

I don't know how to do this. Anyone?

Here is some code:

http://www.keyone.nl/temp/

[Mark]

Spartanicus wrote:

Mark <sc*****@xs4all .nl> wrote:

I don't think you understand my question.

I understood the question you posted just fine.

It is not about 3 columns

The question you posted was.

, but
about the width of the side columns

div.column{widt h:12em}

and how to get a image in these side
columns which strech:

column with streched image | content column | column with streched image

Background images can't be stretched with CSS 2.x, only tiled.

My english may be not that good that i get my question right i guess.

I meant "It is not about the 3 columns". Forgot "the".

My question:
<q>
- 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
</q>

And especially this part: "must take all the available space there is
left." And must contain the tiled background picture (100px high, 1 px
width). So width:12em does not do what i want.

[Spartanicus]

Mark <sc*****@xs4all .nl> wrote:

My question:
<q>
- 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
</q>

And especially this part: "must take all the available space there is
left." And must contain the tiled background picture (100px high, 1 px
width). So width:12em does not do what i want.

I'm still not sure what you want, after having looked at your demo I'm
guessing that what you actually want is to create a masthead.

Based on my best guess, see if this works for you:
http://homepage.ntlworld.ie/spartanicus/keyone.htm

--
Spartanicus

[Gus Richter]

Mark wrote:

kchayka wrote:

Mark wrote:

> http://www.keyone.nl/temp/
What i want to know is how to get my 1px images in both side columns
to show up and take all the space there is left.

It seems to me that you don't really want 3 columns at all, you just
want a background. You can easily do this with some nested divs, rather
than separate divs for the space on either side of the content area. And
it's pretty much a waste to use a 1px image for a background. Use the
background-color property instead.

<div>
<div class="content" ></div>
</div>

Set the background of content's container. Nest another div if need be
and/or use borders on the content to get different spacing effects.

What i want is on the left and right an image. This image is 100px high
and 1px width. So it is not about the color. Because the left and right
are different images, i like to know how to do this.

I had a go since nobody else had a suggestion.

First, I rearranged the html so that "container" came first.
Then, what I fudged is to position the banner absolutely with left:10%;
since the banner has a fixed width.
Then I gave left and right div a random width of 20% each and floated
each left and right respectively.
This way the banner overlays the left and right divs' horizontally tiled
background images and limited flex is provided.

Subsequent material will have to include a clear:both; and/or additional
top margin in order to be decently positioned below the extended banner
image.

--
Gus

[Jim Moe]

Mark wrote:

i like to make the following lay out:

So the left and right column are fluid and the width wil change when the
browser window width is changing.

I don't know how to do this. Anyone?

Basically there is no way to do that. Not with floats. Either fix the
width of all the columns or make them all fluid.
For the floated columns to have more than one pixel width you must
supply a percentage width, a percentage of the viewport. Since the center
column is fixed, either there is a gap between the end columns and the
center, or the columns wrap because there is no space in a single row.

You have not told us *why* you require this odd layout. That would help
us offer a reasonable alternative.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Gus Richter]

Gus Richter wrote:

Mark wrote:

kchayka wrote:

Mark wrote:

>> http://www.keyone.nl/temp/
>
>
>
What i want to know is how to get my 1px images in both side columns
to show up and take all the space there is left.


It seems to me that you don't really want 3 columns at all, you just
want a background. You can easily do this with some nested divs, rather
than separate divs for the space on either side of the content area. And
it's pretty much a waste to use a 1px image for a background. Use the
background-color property instead.

<div>
<div class="content" ></div>
</div>

Set the background of content's container. Nest another div if need be
and/or use borders on the content to get different spacing effects.

What i want is on the left and right an image. This image is 100px
high and 1px width. So it is not about the color. Because the left and
right are different images, i like to know how to do this.

I had a go since nobody else had a suggestion.

First, I rearranged the html so that "container" came first.
Then, what I fudged is to position the banner absolutely with left:10%;
since the banner has a fixed width.
Then I gave left and right div a random width of 20% each and floated
each left and right respectively.
This way the banner overlays the left and right divs' horizontally tiled
background images and limited flex is provided.

Subsequent material will have to include a clear:both; and/or additional
top margin in order to be decently positioned below the extended banner
image.

I put it up on a web space here to show that it can be done, using
floats, and for those that could not understand my writings:
<http://www.home.golden .net/~richterf/keyonemark/keyoneMark_x.ht m>

(I used top padding instead of top margin for subsequent material.)

--
Gus

[Mark]

Spartanicus wrote:

Mark <sc*****@xs4all .nl> wrote:

My question:
<q>
- 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
</q>

And especially this part: "must take all the available space there is
left." And must contain the tiled background picture (100px high, 1 px
width). So width:12em does not do what i want.

I'm still not sure what you want, after having looked at your demo I'm
guessing that what you actually want is to create a masthead.

Based on my best guess, see if this works for you:
http://homepage.ntlworld.ie/spartanicus/keyone.htm

A masthead it is! Thanks, this did work out.

So far i have this result: http://www.keyone.nl/temp/site05/

The content is scale-able. Also the pictures are scale-able.
I want the left and right picture also scale-able (if possible), but for
now: thanks.

Mark

[Mark]

Gus Richter wrote:

Gus Richter wrote:

Mark wrote:

kchayka wrote:

Mark wrote:

>>> http://www.keyone.nl/temp/
>>
>>
>>
>>
> What i want to know is how to get my 1px images in both side
> columns to show up and take all the space there is left.

It seems to me that you don't really want 3 columns at all, you just
want a background. You can easily do this with some nested divs, rather
than separate divs for the space on either side of the content area.
And
it's pretty much a waste to use a 1px image for a background. Use the
background-color property instead.

<div>
<div class="content" ></div>
</div>

Set the background of content's container. Nest another div if need be
and/or use borders on the content to get different spacing effects.
What i want is on the left and right an image. This image is 100px
high and 1px width. So it is not about the color. Because the left
and right are different images, i like to know how to do this.

I had a go since nobody else had a suggestion.

First, I rearranged the html so that "container" came first.
Then, what I fudged is to position the banner absolutely with
left:10%; since the banner has a fixed width.
Then I gave left and right div a random width of 20% each and floated
each left and right respectively.
This way the banner overlays the left and right divs' horizontally
tiled background images and limited flex is provided.

Subsequent material will have to include a clear:both; and/or
additional top margin in order to be decently positioned below the
extended banner image.

I put it up on a web space here to show that it can be done, using
floats, and for those that could not understand my writings:
<http://www.home.golden .net/~richterf/keyonemark/keyoneMark_x.ht m>

(I used top padding instead of top margin for subsequent material.)

Thanks. I have used Spartanicus' solution for now.
Now the content stays in the middle.

Mark

[Mark]

Jim Moe wrote:

Mark wrote:

i like to make the following lay out:

So the left and right column are fluid and the width wil change when
the browser window width is changing.

I don't know how to do this. Anyone?

Basically there is no way to do that. Not with floats. Either fix the
width of all the columns or make them all fluid.
For the floated columns to have more than one pixel width you must
supply a percentage width, a percentage of the viewport. Since the
center column is fixed, either there is a gap between the end columns
and the center, or the columns wrap because there is no space in a
single row.

You have not told us *why* you require this odd layout. That would
help us offer a reasonable alternative.

This is what i want:

http://www.keyone.nl//temp/site05/

Spartanicus helped me out. Now i like to have all the content
scale-able. The main content works out all right, now the left and
right side and then i am more than happy :0) I'll work on that.

Mark

[Stephen Poley]

On Sun, 27 Nov 2005 20:09:34 +0100, Mark <sc*****@xs4all .nl> wrote:

kchayka wrote:

It seems to me that you don't really want 3 columns at all, you just
want a background. You can easily do this with some nested divs, rather
than separate divs for the space on either side of the content area. And
it's pretty much a waste to use a 1px image for a background. Use the
background-color property instead.

<div>
<div class="content" ></div>
</div>

Set the background of content's container. Nest another div if need be
and/or use borders on the content to get different spacing effects.

What i want is on the left and right an image. This image is 100px high
and 1px width. So it is not about the color. Because the left and right
are different images, i like to know how to do this.

I tried to knock up a very quick attempt. I think this is approximately
what you're looking for:

http://www.xs4all.nl/~sbpoley/misc/backgrtest.html

Worked in Opera at the first attempt, but sadly not in either IE or
Firefox. Not sure what the problem is - any suggestions?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Gus Richter]

Mark wrote:

Gus Richter wrote:

Gus Richter wrote:

Mark wrote:

kchayka wrote:

> Mark wrote:
>
>>>> http://www.keyone.nl/temp/
>>>
>>>
>>>
>>>
>>>
>> What i want to know is how to get my 1px images in both side
>> columns to show up and take all the space there is left.
>
>
>
>
>
>
> It seems to me that you don't really want 3 columns at all, you just
> want a background. You can easily do this with some nested divs,
> rather
> than separate divs for the space on either side of the content
> area. And
> it's pretty much a waste to use a 1px image for a background. Use the
> background-color property instead.
>
> <div>
> <div class="content" ></div>
> </div>
>
> Set the background of content's container. Nest another div if need be
> and/or use borders on the content to get different spacing effects.
>

What i want is on the left and right an image. This image is 100px
high and 1px width. So it is not about the color. Because the left
and right are different images, i like to know how to do this.
I had a go since nobody else had a suggestion.

First, I rearranged the html so that "container" came first.
Then, what I fudged is to position the banner absolutely with
left:10%; since the banner has a fixed width.
Then I gave left and right div a random width of 20% each and floated
each left and right respectively.
This way the banner overlays the left and right divs' horizontally
tiled background images and limited flex is provided.

Subsequent material will have to include a clear:both; and/or
additional top margin in order to be decently positioned below the
extended banner image.

I put it up on a web space here to show that it can be done, using
floats, and for those that could not understand my writings:
<http://www.home.golden .net/~richterf/keyonemark/keyoneMark_x.ht m>

(I used top padding instead of top margin for subsequent material.)

Thanks. I have used Spartanicus' solution for now.
Now the content stays in the middle.

It is the one I would choose as well, although mine stays with the float
concept and accomplishes the same. As they say, "there are many ways to
skin a cat".

--
Gus