Re: equal height floated columns

On 16 Mar, 17:50, Spartanicus <inva...@xxxxxxxxxxxxxxx> wrote:
zzpat <zzpatr...@xxxxxxxxx> wrote:
I've come to the conclusion that float was never made for designing a
page

Did you check the many CSS layout templates that are out there?

The optimum solution wouldn't include absolute positioning

That limits your options to about nil as ABS positioning is the only CSS
method that can be considered as suitable for creating a layout that is
also supported by IE. Why are you poised against ABS positioning?

Absolute positioning breaks on extreme screen sizes (eg PDAs) and on
text-resizing usually forcing images and text to flow one over the top
of another and so make a page unreadable - for unreadable read
inaccessible, defeating the point of going to a DIV and float
structure. Ditto hacks like negative margins.

From what I can see there are no proper answers to this question. It's
been asked a lot on discussion boards and everyone always points you
at 'templates' in the generic and never at an answer. The reason is
that all the templates break or collapse at some point. If you are
producing a static site, a simple table layout for the basic structure
will be cleaner, simpler, more compatible and more robust, or you have
to choose not to use this particular style of page layout if you
definitely need to have a DIV and float structure. If you are
producing a dynamic site, you can modify the output to the browser and
accessibility needs of your visitors and it's acutally better IMO to
switch the output to the user, rather than just rely on CSS. The main
problem is the inability to choose how to force DIVs to take the
height and width either of the content _or_ of their container in CSS
- these are allocated automatically so you don't have the control you
need over the DIV box-structure to make 'proper' layouts work..

The closest I've seen is rolling pair - you never divide a container
DIV into more than two sub divs and use left and right floats to
unfold the page. From memory this works sort of as follows (and I
can't remember if this is right and I can't recall if it is possible
to fix the heights too, you might want to try height 100% for the
inner divs)

<div class='container' style='width:100%'>
<div class='inner1' style='float:left; width: 20%'>
LEFT COLUMN
</div>

<div class='inner2' style='float:left'>
<div class='main' style='float:left'>
MAIN CONTENT
</div>
<div class='right' style='float:right; width: 25%'> // 25%
of the inner2 width which is 80% ie 20%
RIGHT CONTENT
</div>
</div>
</div>


Saul
www.notanant.com
communities of websites

.

Relevant Pages

  • Re: CSS Positioning in FP2003
    ... That's why you will find that unless the user indicates some level of understanding of html/css and cross browser design, ... It is not necessary to use tables as a layout tool ... | in most cases now that CSS positioning is as well supported as it is. ... |>> You need to set up a "shell" div to contain everything. ...
    (microsoft.public.frontpage.programming)
  • Re: Css-Layout vs Table-Layout
    ... instead of tables, with many css classes. ... Designing in div layers is ... right but never use them to layout structuring." ... semantic markup is better food for search engines. ...
    (alt.html)
  • Re: New to non-table layout trying CSS div layout with difficulties.
    ... I've been using CSS for style for several years now, ... attempted a layout using CSS. ... I'm hoping to have a large cell with the ... My problem is I simply can't get the DIV tags to align side by ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Help Request about 4.01 Strict
    ... an equally simple css driven organization of material. ... Imagine a table layout that has just two cols and one row, ... All this compared to say a navigation list in one div ("floated ... "Table has 6 colums and 17 rows. ...
    (alt.html)
  • Re: Why shouldnt I use Frontpage? >> drifting OT to CSS
    ... My full page div is ... and your CSS is so convoluted I don't know what all's going ... because of the number of screens and resolutions out there in ... hbbqrffw = Heavy Border, Blockquote Replacement, Fixed Font, White ...
    (alt.html)