How to convert this to CSS

[musicmouse]

In my website (www.classiccat.net) the basic layout consists of two
elements:
- a centered block that has a fixed with of 720
- a right-aligned Google advertising block.

When the visitor has a screen that is less than 720 wide the Google
block is simply pushed off the screen to the right. This is the
intended behaviour. With tables it was easy to make. But I cannot find
a way to get the same effect in CSS. Either it will push the
advertisement below the main block (with display:inline and float) or -
even worse - it will let the two overlap each other (with
position:absolute).

Is there a way to make this layout in CSS?

Thanks, musicmouse

[Els]

musicmouse wrote:

In my website (www.classiccat.net) the basic layout consists of two
elements:
- a centered block that has a fixed with of 720
- a right-aligned Google advertising block.

When the visitor has a screen that is less than 720 wide the Google
block is simply pushed off the screen to the right. This is the
intended behaviour. With tables it was easy to make. But I cannot find
a way to get the same effect in CSS. Either it will push the
advertisement below the main block (with display:inline and float) or -
even worse - it will let the two overlap each other (with
position:absolute).

Is there a way to make this layout in CSS?

Probably - but so far I haven't seen your attempt yet.
My first idea (based on a Google ads column width of 150px):
HTML:
<div id="container">
<div id="content">
page content
</div>
<div id="google">
googe ads
</div>
</div>

CSS:
#container{
width:870px;
margin:auto;
}
#content{
width:720px;
float:left;
}
#google{
margin-left:720px;
}

Or, if you insist on having the google ads to the far right with the
actual page centered in the remainder of the horizontal space:
HTML:
<div id="container">
<div id="content">
page content
</div>
</div>
<div id="google">
googe ads
</div>

#container{
margin-right:150px;
}
#content{
width:720px;
margin:auto;
}
#google{
position:absolute;
right:0;
width:150px;
}

None of the above tested - that's your job ;-)

#container may need an actual border (set it to the same colour as the
background if you don't want it visible) for IE, but I'm not sure. Try
that if it doesn't work without.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Barbara de Zoete]

On Sat, 07 Jan 2006 13:26:20 +0100, musicmouse <wi*******@planet.nl> wrote:

In my website (www.classiccat.net) the basic layout consists of two
elements:
- a centered block that has a fixed with of 720
- a right-aligned Google advertising block.

When the visitor has a screen that is less than 720 wide the Google
block is simply pushed off the screen to the right. This is the
intended behaviour. With tables it was easy to make.

Is there a way to make this layout in CSS?

You ask for simulating a table, so why don't you just do that:
<URL:http://home.wanadoo.nl/b.de.zoete/_test/simulating_tables.html>
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Gus Richter]

Barbara de Zoete wrote:

On Sat, 07 Jan 2006 13:26:20 +0100, musicmouse <wi*******@planet.nl> wrote:

In my website (www.classiccat.net) the basic layout consists of two
elements:
- a centered block that has a fixed with of 720
- a right-aligned Google advertising block.

When the visitor has a screen that is less than 720 wide the Google
block is simply pushed off the screen to the right. This is the
intended behaviour. With tables it was easy to make.

Is there a way to make this layout in CSS?

You ask for simulating a table, so why don't you just do that:
<URL:http://home.wanadoo.nl/b.de.zoete/_test/simulating_tables.html>

Interesting that it only looked as you wanted after I refreshed.

Try this: Clear your Fx cache and look at the page. The Ads appear below
the content. Refresh and the Ads move too the right. Reproducible every
time.

Viewed locally, this does not happen.

--
Gus

[Barbara de Zoete]

On Sat, 07 Jan 2006 18:28:45 +0100, Gus Richter <gu********@netscape.net>
wrote:

Barbara de Zoete wrote:

You ask for simulating a table, so why don't you just do that:
<URL:http://home.wanadoo.nl/b.de.zoete/_test/simulating_tables.html>
Interesting that it only looked as you wanted after I refreshed.

Interesting indeed, but unwanted :-)
Try this: Clear your Fx cache and look at the page. The Ads appear below
the content. Refresh and the Ads move too the right. Reproducible every
time.

Which browser? Anything special about the size of the viewport?

On WinXP, with IE6.0, FF1.0PR and Op8.5 I don't see that happening at all.
Cleared the cache and the history lists of the three browsers, opened the
page from the www and all shows as intended the very first time the page
opens.

The only time the google ads get positioned after the text block is, when
in IE I set the font size to the largest available. In all other occations
the two blocks stay next to each other.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Gus Richter]

Barbara de Zoete wrote:

On Sat, 07 Jan 2006 18:28:45 +0100, Gus Richter
<gu********@netscape.net> wrote:

Barbara de Zoete wrote:

You ask for simulating a table, so why don't you just do that:
<URL:http://home.wanadoo.nl/b.de.zoete/_test/simulating_tables.html>

Interesting that it only looked as you wanted after I refreshed.

Interesting indeed, but unwanted :-)

Try this: Clear your Fx cache and look at the page. The Ads appear
below the content. Refresh and the Ads move too the right.
Reproducible every time.

Which browser? Anything special about the size of the viewport?

As I said, Fx (=Firefox) 1.5 and reproducable every time, the first time.

--
Gus

[Gus Richter]

Barbara de Zoete wrote:

Anything special about the size of the viewport?

Nothing special: Resolution 1024x768 on XP.
Firefox 1.5 Standard installation w/o sidebar.

For the first time the Ads appear below the content. Refresh and the Ads
move too the right. Clear your Fx cache, revisit and the Ads appear
below the content. Refresh and the Ads move too the right once again.
Reproducible every time.

Viewed locally, this does not happen.

--
Gus

[Barbara de Zoete]

On Sun, 08 Jan 2006 04:22:13 +0100, Gus Richter <gu********@netscape.net>
wrote:

Barbara de Zoete wrote:

On Sat, 07 Jan 2006 18:28:45 +0100, Gus Richter
<gu********@netscape.net> wrote:

Try this: Clear your Fx cache

Which browser? Anything special about the size of the viewport?

As I said, Fx (=Firefox) 1.5 and reproducable every time, the first time.

Well, the comon abbrevation for Firefox is FF, so I didn't recognize Fx to
be Firefox. Besides that, you didn't mention your system or the version.
You said Fx, not Firefox 1.5 on WinXP. And you didn't say anything on
other settings that might have influenced this behaviour.

Reading the other post: I'm thinking it's a bug, and not a bug in my page,
since the described behaviour doesn't happen in other situations.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Viken Karaguesian]

> For the first time the Ads appear below the content. Refresh and the Ads

move too the right. Clear your Fx cache, revisit and the Ads appear below
the content. Refresh and the Ads move too the right once again.
Reproducible every time.

FWIW: For me, FF 1.5, 1024x768 resolution. Ads appear on the right upon
opening the first time.

Viken K.

[Michael Winter]

On 08/01/2006 08:09, Barbara de Zoete wrote:

[snip]

Well, the comon abbrevation for Firefox is FF [...]
True, but it's not the officially preferred one.
<http://www.mozilla.org/support/firefox/faq.html#spell-abbreviate>

[snip]
Reading the other post: I'm thinking it's a bug, and not a bug in my
page, since the described behaviour doesn't happen in other situations.

Yes, probably a reflow bug, though I too see it in Fx 1.5 and 1.0.7, but
not Opera 8.51 (for what it's worth).

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[Barbara de Zoete]

On Sun, 08 Jan 2006 21:33:31 +0100, Michael Winter
<m.******@blueyonder.co.uk> wrote:

On 08/01/2006 08:09, Barbara de Zoete wrote:

Well, the comon abbrevation for Firefox is FF [...]

True, but it's not the officially preferred one.
<http://www.mozilla.org/support/firefox/faq.html#spell-abbreviate>

Okay. Didn't know that. As a matter of fact I've never seen it used
before, besides by Gus. Just shows that the creators of FF can prefer all
they want, in the organized chaos of the web these sort of things take
their own direction.

Reading the other post: I'm thinking it's a bug, and not a bug in my
page, since the described behaviour doesn't happen in other situations.

Yes, probably a reflow bug, though I too see it in Fx 1.5 and 1.0.7, but
not Opera 8.51 (for what it's worth).

Hmm, I couldn't know how to begin to fix it. I don't even get to see it.
Maybe someone who does, can work on the example page
<URL:http://home.wanadoo.nl/b.de.zoete/_test/simulating_tables.html>
and/or check the bug reports with FF.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[musicmouse]

Els, Thanks for the suggestion. I tested it with colored blocks (it is
at http://www.classiccat.net/test7.htm), but unfortuately it does not
work. The Google ad is placed below the the main block.

Barbara, I suppose that the link you gave demonstrates the technique.
However, when I make the window small the Google ad switches to below
the main block and that is just what I want to avoid.

musicmouse
Barbara de Zoete schreef:

On Sat, 07 Jan 2006 18:28:45 +0100, Gus Richter <gu********@netscape.net>
wrote:

Barbara de Zoete wrote:

You ask for simulating a table, so why don't you just do that:
<URL:http://home.wanadoo.nl/b.de.zoete/_test/simulating_tables.html>

Interesting that it only looked as you wanted after I refreshed.

Interesting indeed, but unwanted :-)

Try this: Clear your Fx cache and look at the page. The Ads appear below
the content. Refresh and the Ads move too the right. Reproducible every
time.

Which browser? Anything special about the size of the viewport?

On WinXP, with IE6.0, FF1.0PR and Op8.5 I don't see that happening at all.
Cleared the cache and the history lists of the three browsers, opened the
page from the www and all shows as intended the very first time the page
opens.

The only time the google ads get positioned after the text block is, when
in IE I set the font size to the largest available. In all other occations
the two blocks stay next to each other.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Els]

musicmouse wrote:

Els, Thanks for the suggestion. I tested it with colored blocks (it is
at http://www.classiccat.net/test7.htm), but unfortuately it does not
work. The Google ad is placed below the the main block.

I forgot to add "top:0;" to the styles of the google block.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[musicmouse]

I applied the update. However, the result is that the two blocks
overlap when the window becomes too small.

musicmouse
Els schreef:

musicmouse wrote:

Els, Thanks for the suggestion. I tested it with colored blocks (it is
at http://www.classiccat.net/test7.htm), but unfortuately it does not
work. The Google ad is placed below the the main block.

I forgot to add "top:0;" to the styles of the google block.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

musicmouse wrote:

Els schreef:

musicmouse wrote:

Els, Thanks for the suggestion. I tested it with colored blocks (it is
at http://www.classiccat.net/test7.htm), but unfortuately it does not
work. The Google ad is placed below the the main block.

I forgot to add "top:0;" to the styles of the google block.

I applied the update. However, the result is that the two blocks
overlap when the window becomes too small.

Yup - so that didn't work.
I see you're saying that Barbara's example works, except for the ads
column dropping below the page on narrow windows. Maybe that could be
helped with a min-width on the outer container? "min-width" won't work
on IE though, but there are workarounds for that.

IMO, the simplest option is just to let go of the idea that the Google
ads need to be on the far right of the window. I'd just have them on
the right of the page, and have the total (page + ads) centered.
Easier to do, and better to look at ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Doug Laidlaw]

Els wrote:

musicmouse wrote:

In my website (www.classiccat.net) the basic layout consists of two
elements:
- a centered block that has a fixed with of 720
- a right-aligned Google advertising block.

When the visitor has a screen that is less than 720 wide the Google
block is simply pushed off the screen to the right. This is the
intended behaviour. With tables it was easy to make. But I cannot find
a way to get the same effect in CSS. Either it will push the
advertisement below the main block (with display:inline and float) or -
even worse - it will let the two overlap each other (with
position:absolute).

Is there a way to make this layout in CSS?

Probably - but so far I haven't seen your attempt yet.
My first idea (based on a Google ads column width of 150px):
HTML:
<div id="container">
<div id="content">
page content
</div>
<div id="google">
googe ads
</div>
</div>

CSS:
#container{
width:870px;
margin:auto;
}
#content{
width:720px;
float:left;
}
#google{
margin-left:720px;
}

Or, if you insist on having the google ads to the far right with the
actual page centered in the remainder of the horizontal space:
HTML:
<div id="container">
<div id="content">
page content
</div>
</div>
<div id="google">
googe ads
</div>

#container{
margin-right:150px;
}
#content{
width:720px;
margin:auto;
}
#google{
position:absolute;
right:0;
width:150px;
}

None of the above tested - that's your job ;-)

#container may need an actual border (set it to the same colour as the
background if you don't want it visible) for IE, but I'm not sure. Try
that if it doesn't work without.

Quite apart from the "how", presumably the Google ads are there to earn you
revenue. What does Google think of the idea?

Doug.
--
Registered Linux User No. 277548. My true email address has hotkey for
myaccess.
Love can heal the world, and forgiveness is the catalyst to make it happen.
- John Gray, author of Men are from Mars, women are from Venus.