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/

[Spartanicus]

Re: 3 columns: fixed center column

Mark <scheper@xs4all .nl> wrote:
[color=blue]
>i like to make the following lay out:
>
>- 3 columns[/color]

http://www.google.com/search?q=3+column+css+layout

--
Spartanicus

[Mark]

Re: 3 columns: fixed center column

Spartanicus wrote:[color=blue]
> Mark <scheper@xs4all .nl> wrote:
>
>[color=green]
>>i like to make the following lay out:
>>
>>- 3 columns[/color]
>
>
> http://www.google.com/search?q=3+column+css+layout
>[/color]

As i stated, i want to to have two fluid columns left and right and 1
fixed in the middle. Also i have backgroun images (1px width) and these
have to fill out the two columns, left and right. I do not know how to
do that too.

I can not find the solution. It is all about fixed columns left and
right and a fluid one in the middle...

[Spartanicus]

Re: 3 columns: fixed center column

Mark <scheper@xs4all .nl> wrote:
[color=blue][color=green][color=darkred]
>>>i like to make the following lay out:
>>>
>>>- 3 columns[/color]
>>
>> http://www.google.com/search?q=3+column+css+layout
>>[/color]
>
>As i stated, i want to to have two fluid columns left and right and 1
>fixed in the middle. Also i have backgroun images (1px width) and these
>have to fill out the two columns, left and right. I do not know how to
>do that too.
>
>I can not find the solution. It is all about fixed columns left and
>right and a fluid one in the middle...[/color]

Plenty of those to be found using the provided link, use it.

--
Spartanicus

[kchayka]

Re: 3 columns: fixed center column

Mark wrote:[color=blue]
>
> 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.[/color]

Hmmm... what do you expect to happen when the window isn't wide enough
for the fixed width column, let alone 3 columns?
[color=blue]
> Here is some code:
>
> http://www.keyone.nl/temp/[/color]

This seems a good example of the drawbacks. In my usual window width
(often 800px or less) there is no room available for side columns at
all. Put some content in your test page and see what happens in
different window and text sizes. You might not like it.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Mark]

Re: 3 columns: fixed center column

kchayka wrote:[color=blue]
> Mark wrote:
>[color=green]
>>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.[/color]
>
>
> Hmmm... what do you expect to happen when the window isn't wide enough
> for the fixed width column, let alone 3 columns?
>
>[color=green]
>>Here is some code:
>>
>>http://www.keyone.nl/temp/[/color]
>
>
> This seems a good example of the drawbacks. In my usual window width
> (often 800px or less) there is no room available for side columns at
> all. Put some content in your test page and see what happens in
> different window and text sizes. You might not like it.
>[/color]

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.
The rest is working all right basically, but i don't know how to get the
result i want.

Mark

[kchayka]

Re: 3 columns: fixed center column

Mark wrote:[color=blue][color=green]
>>[color=darkred]
>>>http://www.keyone.nl/temp/[/color][/color]
>
> 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.[/color]

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.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Mark]

Re: 3 columns: fixed center column

kchayka wrote:[color=blue]
> Mark wrote:
>[color=green][color=darkred]
>>>>http://www.keyone.nl/temp/
>>>[/color]
>>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.[/color]
>
>
> 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.
>[/color]

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.

[Mark]

Re: 3 columns: fixed center column

Spartanicus wrote:[color=blue]
> Mark <scheper@xs4all .nl> wrote:
>
>[color=green][color=darkred]
>>>>i like to make the following lay out:
>>>>
>>>>- 3 columns
>>>
>>>http://www.google.com/search?q=3+column+css+layout
>>>[/color]
>>
>>As i stated, i want to to have two fluid columns left and right and 1
>>fixed in the middle. Also i have backgroun images (1px width) and these
>>have to fill out the two columns, left and right. I do not know how to
>>do that too.
>>
>>I can not find the solution. It is all about fixed columns left and
>>right and a fluid one in the middle...[/color]
>
>
> Plenty of those to be found using the provided link, use it.
>[/color]

I don't think you understand my question. It is not about 3 columns, but
about the width of the side columns and how to get a image in these side
columns which strech:

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

[Spartanicus]

Re: 3 columns: fixed center column

Mark <scheper@xs4all .nl> wrote:
[color=blue]
>I don't think you understand my question.[/color]

I understood the question you posted just fine.
[color=blue]
>It is not about 3 columns[/color]

The question you posted was.
[color=blue]
>, but
>about the width of the side columns[/color]

div.column{widt h:12em}
[color=blue]
>and how to get a image in these side
>columns which strech:
>
>column with streched image | content column | column with streched image[/color]

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

--
Spartanicus

[Mark]

Re: 3 columns: fixed center column

Spartanicus wrote:[color=blue]
> Mark <scheper@xs4all .nl> wrote:
>
>[color=green]
>>I don't think you understand my question.[/color]
>
>
> I understood the question you posted just fine.
>
>[color=green]
>>It is not about 3 columns[/color]
>
>
> The question you posted was.
>
>[color=green]
>>, but
>>about the width of the side columns[/color]
>
>
> div.column{widt h:12em}
>
>[color=green]
>>and how to get a image in these side
>>columns which strech:
>>
>>column with streched image | content column | column with streched image[/color]
>
>
> Background images can't be stretched with CSS 2.x, only tiled.
>[/color]

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]

Re: 3 columns: fixed center column

Mark <scheper@xs4all .nl> wrote:
[color=blue]
>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.[/color]

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]

Re: 3 columns: fixed center column

Mark wrote:[color=blue]
> kchayka wrote:
>[color=green]
>> Mark wrote:
>>[color=darkred]
>>>>> 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.[/color]
>>
>>
>>
>> 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.
>>[/color]
>
> 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.
>[/color]

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]

Re: 3 columns: fixed center column

Mark wrote:[color=blue]
>
> 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?
>[/color]
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]

Re: 3 columns: fixed center column

Gus Richter wrote:[color=blue]
> Mark wrote:
>[color=green]
>> kchayka wrote:
>>[color=darkred]
>>> 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.
>>>[/color]
>>
>> 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.
>>[/color]
>
> 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.
>[/color]

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