Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   column layout with css - what am I missing? (http://www.velocityreviews.com/forums/t162142-column-layout-with-css-what-am-i-missing.html)

Greg N. 06-29-2005 12:41 PM

column layout with css - what am I missing?
 
Hi folks,

Look at the small example at http://coolhaus.de/misc/test5.htm .
It looks OK at first glance, but when I resize the window to make it
narrower, the section below the columns overlays the columns.

The reason is, obviously, that there is a discreet height assigned to
the columnn part (style="height:100px;").

But without that discreet height specification, it does not work at all,
that is, the columns and the stuff below always overlay each other.

This can't be the correct way to do it. What am I missing?

Below is the html at http://coolhaus.de/misc/test5.htm :

<html>
<style type="text/css">
BODY { width:60%; }
.columns { position:relative; width:100%; }
.col { position:absolute; top:0; height:100%;}

.c31 { left:0; width:32%; }
.c32 { left:33%; width:32%; }
.c33 { left:66%; width:33%; }
</style>
<body>
<h3> this is how I do a 3-column layout</h3>

<div class="columns" style="height:100px;">
<div class="col c31">
this stuff goes to the left column, this stuff goes to the left column,
</div>

<div class="col c32">
here something that goes into column 2! here something that goes into
column 2!
</div>

<div class="col c33">
This is column 3. This is column 3. This is column 3. This is column 3.
</div>
</div>

<h3>This section should go below the column part</h3>
This section should go below the column part. But watch what happens
when you resize the window to make it narrower.
</html>


Els 06-29-2005 12:56 PM

Re: column layout with css - what am I missing?
 
Greg N. wrote:

> Look at the small example at http://coolhaus.de/misc/test5.htm .
> It looks OK at first glance, but when I resize the window to make it
> narrower, the section below the columns overlays the columns.
>
> The reason is, obviously, that there is a discreet height assigned to
> the columnn part (style="height:100px;").


Indeed - don't do that.

> But without that discreet height specification, it does not work at all,
> that is, the columns and the stuff below always overlay each other.


That's because you used position:absolute.

> This can't be the correct way to do it. What am I missing?


You are misunderstanding the effect op absolute positioning.

> Below is the html at http://coolhaus.de/misc/test5.htm :


<snip>

> .columns { position:relative; width:100%; }
> .col { position:absolute; top:0; height:100%;}


I can only advise you to try and make your page without using any
'position:absolute;'. Use floats.

> <h3> this is how I do a 3-column layout</h3>


Don't do it that way ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Spider Murphy Gang - Skandal Im Sperrbezirk

Greg N. 06-29-2005 02:42 PM

Re: column layout with css - what am I missing?
 
Els wrote:

> I can only advise you to try


I tried a million things :)

> and make your page without using any
> 'position:absolute;'. Use floats.


Can you be a bit more specific?

Thanks!
Greg

Els 06-29-2005 02:53 PM

Re: column layout with css - what am I missing?
 
Greg N. wrote:

> Els wrote:
>
>> I can only advise you to try

>
> I tried a million things :)


million and one is the answer ;-)

>> and make your page without using any
>> 'position:absolute;'. Use floats.

>
> Can you be a bit more specific?


More specific?
Go through your CSS styles, snip every line that starts with
'position:'.

Then look up a nice CSS tutorial or read the specs on "float".
Then rewrite your styles, but you may not use 'position'. :-)

Of course, a quick (but dirty) way is to look up '3-col CSS layout
with footer' in Google, and see what comes up, and just copy that.
The dirty in that, is that it won't help you understand what you're
doing, whereas a tutorial does.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Sweet - The Ballroom Blitz


All times are GMT. The time now is 12:36 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.