How to convert this to CSS

#1

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

#2

musicmouse wrote:

Quote:

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 -

#3

On Sat, 07 Jan 2006 13:26:20 +0100, musicmouse <wimroffel (AT) planet (DOT) nl> wrote:

Quote:

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: ----------.

Quote:

#4

Barbara de Zoete wrote:

Quote:

On Sat, 07 Jan 2006 13:26:20 +0100, musicmouse <wimroffel (AT) planet (DOT) 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

#5

On Sat, 07 Jan 2006 18:28:45 +0100, Gus Richter <gusrichter (AT) netscape (DOT) net>
wrote:

Quote:

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 :-)

Quote:

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: ----------.

Quote:

#6

Barbara de Zoete wrote:

Quote:

On Sat, 07 Jan 2006 18:28:45 +0100, Gus Richter
gusrichter (AT) netscape (DOT) 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

#7

Barbara de Zoete wrote:

Quote:

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

#8

On Sun, 08 Jan 2006 04:22:13 +0100, Gus Richter <gusrichter (AT) netscape (DOT) net>
wrote:

Quote:

Barbara de Zoete wrote:

On Sat, 07 Jan 2006 18:28:45 +0100, Gus Richter
gusrichter (AT) netscape (DOT) 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: ----------.

Quote:

#9

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:

Quote:

On Sat, 07 Jan 2006 18:28:45 +0100, Gus Richter <gusrichter (AT) netscape (DOT) 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 |
`-------------------------------------------------- --<--@ ------------'

#10

Quote:

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.