467,074 Members | 961 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,074 developers. It's quick & easy.

Unusual floats?

With CSS, is it possible to produce, without making a mess, the kind of
layout shown (crudely) by

http://gavelcade.com/mockup4.gif

?

The text in the panes on the left and right should wrap around the
superimposed feature boxes in the center.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez Űter le premier point de mon adresse de courriel.

Jul 20 '05 #1
  • viewed: 1401
Share:
4 Replies
"Harlan Messinger" <h.*********@comcast.net> wrote:
With CSS, is it possible to produce, without making a mess, the kind of
layout shown (crudely) by

http://gavelcade.com/mockup4.gif

?

The text in the panes on the left and right should wrap around the
superimposed feature boxes in the center.


It's possible, but not easy. It would require using dummy blocks floated
in the 2 main columns to cause the text to wrap around, and then
absolutely positioning the feature boxes in the center.

--
Spartanicus
Jul 20 '05 #2
Spartanicus <me@privacy.net> wrote
"Harlan Messinger" <h.*********@comcast.net> wrote:
With CSS, is it possible to produce, without making a mess, the kind of
layout shown (crudely) by

http://gavelcade.com/mockup4.gif

The text in the panes on the left and right should wrap around the
superimposed feature boxes in the center.


It's possible, but not easy. It would require using dummy blocks floated
in the 2 main columns to cause the text to wrap around, and then
absolutely positioning the feature boxes in the center.


Yeah. Your HTML template should look something like this:

<body>
<div id="header">...</div>
<div id="feature">...</div>
<div id="sitemap">
<div class="featurespace">...</div>
...
</div>
<div id="main">
<div class="featurespace">...</div>
...
</div>
</body>

Using:
#feature to horizontally absolutely position.
.featurespace to set width and height to match #feature.
#sitemap .featurespace floated right.
#main .featurespace floated left.

--
Karl Smith.
Jul 20 '05 #3

"Karl Smith" <go************@kjsmith.com> wrote in message
news:3d************************@posting.google.com ...
Spartanicus <me@privacy.net> wrote
"Harlan Messinger" <h.*********@comcast.net> wrote:
With CSS, is it possible to produce, without making a mess, the kind of
layout shown (crudely) by

http://gavelcade.com/mockup4.gif

The text in the panes on the left and right should wrap around the
superimposed feature boxes in the center.


It's possible, but not easy. It would require using dummy blocks floated
in the 2 main columns to cause the text to wrap around, and then
absolutely positioning the feature boxes in the center.


Yeah. Your HTML template should look something like this:

<body>
<div id="header">...</div>
<div id="feature">...</div>
<div id="sitemap">
<div class="featurespace">...</div>
...
</div>
<div id="main">
<div class="featurespace">...</div>
...
</div>
</body>

Using:
#feature to horizontally absolutely position.
.featurespace to set width and height to match #feature.
#sitemap .featurespace floated right.
#main .featurespace floated left.


I guess this is what we call "tag soup". :-) But I'll give it a try. I'll
only be using this layout for the home page. All the others are much more
straightforward.

Jul 20 '05 #4

"Karl Smith" <go************@kjsmith.com> wrote in message
news:3d************************@posting.google.com ...
Spartanicus <me@privacy.net> wrote
"Harlan Messinger" <h.*********@comcast.net> wrote:
With CSS, is it possible to produce, without making a mess, the kind of
layout shown (crudely) by

http://gavelcade.com/mockup4.gif

The text in the panes on the left and right should wrap around the
superimposed feature boxes in the center.


It's possible, but not easy. It would require using dummy blocks floated
in the 2 main columns to cause the text to wrap around, and then
absolutely positioning the feature boxes in the center.


Yeah. Your HTML template should look something like this:

<body>
<div id="header">...</div>
<div id="feature">...</div>
<div id="sitemap">
<div class="featurespace">...</div>
...
</div>
<div id="main">
<div class="featurespace">...</div>
...
</div>
</body>

Using:
#feature to horizontally absolutely position.
.featurespace to set width and height to match #feature.
#sitemap .featurespace floated right.
#main .featurespace floated left.


I guess this is what we call "tag soup". :-) But I'll give it a try. I'll
only be using this layout for the home page. All the others are much more
straightforward.

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by Tom | last post: by
5 posts views Thread by Neal Becker | last post: by
8 posts views Thread by Madhusudan Singh | last post: by
7 posts views Thread by William S Fulton | last post: by
11 posts views Thread by Steve | last post: by
13 posts views Thread by yb | last post: by
9 posts views Thread by Thomas Nelson | last post: by
16 posts views Thread by luca bertini | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.