Member Avatar for chrisjb

I have a wrapper with two columns using float: left to align them and a clear: both on an hr tag underneath them. When I used to work in html 4.0 this method used to work allowing the background images in the div of each column to stretch to the same height. However the clear: both doesn't seem to work in XHTML 1.0 strict (unless I'm just doing something wrong).

If anyone would be kind enough to take a look it would be hugely appreciated. If you know what you're doing you'll probably see my errors quickly.

I'm using these styles:

html { min-height: 100%; }

body {
    margin: 0px;
    padding: 0px;
    background-image: url(images/autumn/body_bg.gif);
    text-align: center;
    height: 100%;




}
#wrapper {
    margin: 0px auto;
    padding: 0px;
    width: 800px;
    background-color: #CCCCFF;
    background-image: url(images/autumn/right_col_bg.gif);
    background-repeat: repeat-y;
    background-position: right;
    height: 100%;




}
#content-area {
    margin: 0px;
    padding: 0px;
    width: 552px;
    text-align: center;
    float: left;
    background-image: url(images/autumn/content_bg_slice.gif);
    background-repeat: repeat-y;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #333366;
    min-height: 100%;

}
#content-area-top {
    background-image: url(images/autumn/content_area_top.gif);
    margin: 0px;
    padding: 0px;
    height: 20px;
    width: 552px;
}
#right-col {
    background-image: url(images/autumn/right_col_bg.gif);
    background-repeat: repeat-y;
    margin: 0px;
    padding: 0px;
    width: 248px;
    text-align: center;
    background-color: #333366;
    color: #CCCCFF;
    float: left;
    height: 100%;



}

As it is the left column - content-area - does not stretch to 100% screen height. As you can see I've got the background image for the right column in the wrapper so that when the left column is longer than the right they both stretch to 100% and that is how I want it. But when the right column content is longer than the left column the left column background image stops where the content stops.

I'm not sure if I'm allowed to post url's but this will probably help:

Any suggestions?

Thanks in advance.

Edited by TrustyTony because: fixed formatting
  • 4 Contributors
  • 4 Replies
  • 269 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by jeweline

Dani AI

Generated

Two things are colliding in the original thread: percentage heights and floats. A percent height (for example height:100% or min-height:100%) only works when the element’s containing block has an explicit height; otherwise the percent computes to auto. Floated elements are removed from normal flow, so a parent can appear to “collapse” around them unless you explicitly contain/clear those floats. (developer.mozilla.org)

Practical fixes that avoid tables (and that respond to and ): contain the floats or stop using floats for layout. The usual, robust ways to contain floats are a modern clearfix or creating a new block formatting context with display: flow-root (or overflow:auto with the usual scrollbar caveat). Example clearfix:

/* modern micro-clearfix */
.wrapper::before,
.wrapper::after { content: ""; display: table; }
.wrapper::after { clear: both; }

Or simply:

#wrapper { display: flow-root; }

These approaches let the wrapper expand to the taller column instead of relying on an inserted <hr> clear. (nicolasgallagher.com)

A better long-term approach is to drop float-based columns and use Flexbox (or Grid). With Flexbox the two side-by-side children stretch to the same height automatically:

#wrapper { display: flex; align-items: stretch; }
#content-area { flex: 1; }   /* fluid column */
#right-col    { width: 248px; } /* fixed sidebar */

This removes the percent-height and float fragility and is the recommended modern solution. (devdoc.net)

The “faux columns” background trick (as mentioned by ) is a valid fallback for fixed-width designs: a vertically repeating background on the wrapper simulates equal-height columns, but it’s inflexible for responsive layouts. For legacy pages keep the wrapper background + clearfix/flow-root; for new work prefer flexbox/grid. (css-tricks.com)

Recommended Answers

All 4 Replies

Member Avatar for zippee

The 100% height is always refer to the screen height, NOT the height of your content. If you are using 1024x768 screen resolution, the 100% height will be 768 pixels, eventhough you have your content more than this height.

I look through your script and found you control the layout using css alone, which is NOT what many programmers will do. I would suggest you use HTML table tags to align the two columns so that they stretch together when one of the column is longer than the other. As you are using dreamwaver and template to control the consistency of your pages, it will not be too difficult to change this for all your pages.

By the way, I really like the simple yet freash deisgn of your site.

Member Avatar for chrisjb

Thanks Zippee,

But I can't go back to tables - too much effort and I'm a CSS man now. You're right about the 100% being for the screen size - that's what happened when I set html as height: 100% instead of min-height: 100%.

It seems to me that one of CSS's strongest flaws is vertical layout - whether it is aligning vertically or defining heights CSS has problems. In this case tables would be easier, but I would rather find the solution than use a fix.

Thanks for your help anyway.

Member Avatar for felgall

Sometimes setting overflow makes a difference in how the height is treated.

Member Avatar for jeweline

Hi,

I'm new to CSS (still working on my first layout)! I don't know if the following link will help, but here it is:

http://www.alistapart.com/articles/fauxcolumns/

CJ

Thanks Zippee,

But I can't go back to tables - too much effort and I'm a CSS man now. You're right about the 100% being for the screen size - that's what happened when I set html as height: 100% instead of min-height: 100%.

It seems to me that one of CSS's strongest flaws is vertical layout - whether it is aligning vertically or defining heights CSS has problems. In this case tables would be easier, but I would rather find the solution than use a fix.

Thanks for your help anyway.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.