Thread

I have a two column divs nested inside a main-content div, and I’ve styled all three divs trying various combinations of: height:auto, height:inherit; and height:100%, but there is always one of the columns that will not expand its background or the parents background and the text ends up running off the bottom of the page. From what I’ve read on the internet, others have problems with this and there are consistency problems with different browsers. Does anyone have a good suggestion or work-around?

If you mean text flowing out of container, then .(JavaScript must be enabled to view this email address) is it.

If you mean background color in a column is not going to bottom then alistapart - faux backgrounds

There is also a javascript at http://www.dynamicdrive.com and a css solution at positioniseverything.com, or maybe it’s quirksmode.org (check them both out}. I have tried all methods, but it’s more work than the rewards are. It’s not very cross-browser and as browsers change you have to change your scripts and stylesheets.

Best way is to find new ways of designing, or always use a white background as so many sites do. Otherwise why not use the ‘old’ table designs?

Otherwise why not use the ‘old’ table designs?

You’re kidding, right? 😊

To clarify: I want my web page height to expand dynamically as the text increases. That means the height of every container/background the touches the bottom border. In other words, if a customer adds another weblog entry or adds more static text, that text or any of the backgrounds keep the same look, and only the page appears longer with no overlapping.

From what many of you are suggesting, it sounds like there is no sure-fire way to have the height of the document expand when the number of lines of text increases, and also have it work on all browsers. That’s pretty much what I’ve found people saying on the internet.

If someone can post a simple css/html of how they made this work that would be helpful.

Otherwise why not use the ‘old’ table designs?

You’re kidding, right? 😊

Mmm, maybe… But I often ask myself why we so readily buy into all the hype. Of course, a table in table in table design is out of the question, but I used to use a table as a framework and layer/floats inside. I had at once better control and more creative freedom. The pages were XHTML compliant and accessible to screen readers etc. But, the search engines don’t like tables, or so I’m told…. so, out went the framework.

To clarify: I want my web page height to expand dynamically as the text increases. That means the height of every container/background the touches the bottom border. In other words, if a customer adds another weblog entry or adds more static text, that text or any of the backgrounds keep the same look, and only the page appears longer with no overlapping.

the link I gave will solve that, positioniseverything.
else there are probems with your code…

I agree with Bruce, can we see some code and/or a link to an actual page?

Try visiting a friend:

W3C Validator

Willl show errors that cause it
.
.

I read some of that positioniseverything article, but it is not very well written. From what I can tell they give two solutions, one they’re calling “bloated”, and then a better solution. I just added the following line from the bloated solution as the last thing in my container div and that seems to fix the problem.

<div [removed]></div>

Their second solution says that in order for it to work the container has to have its size specified. So I’m not sure if it will even work for my situation. I want the page to expand dynamically when text is added, so I don’t think that specifying a height for the container that borders the bottom of the page will work.

a link to the page in question would help the most.
This is not normal behavior so there must be something wrong.

Did you use the validator above for errors? One does not usually need to specify height for the main bosy of the page.

It does validate and adding <div [removed]></div> seems to fix the problem in FF and IE, I haven’t tested it elsewhere. If I remove that line the right column float sticks out off the bottom. (so there’s a white flag with text sticking out past the left column)

Let me know if you have a better solution. This seems to work, and I’m okay with this solution unless there’s something about it that will cause other issues.

link to page in question
http://www.jumpthecurve.net

Just do:

div.footer {clear: both;}

and you’re set, no need for that extra div.
If you want to use a div like a “wedge” to clear floats then give it a class so you don’t have to write inline styles everywhere, e.g.

div.clearfloat {clear: both;}

A good article on floats in css is this one: Float Tutorial
There’s also no need to add a class to every nav item and a class to every span inside those. Just use descendant selectors.
And are you sure it validates? The w3c vaildator throws up 55 errors.😊

well, there are 56 errors, but if you close all your p tags it may…
css is valid. In xhtml you have to close all tags.
[code text….</code></pre>
That may do al the errors, minor but nice to see valid and then if there are other errors not caused by that they will show. Otherwise looks good.

Thanks for the tips. I was thinking the same thing about just putting a clear in the footer, that should accomplish what I’m looking for. I don’t understand all the complicated work-arounds that were suggested when all I needed was a simple clear statement.

I didn’t realize it, but I was only using the css validator and not the xhtml validator. The css validated but the xhtml didn’t. I didn’t use closing tags on p and others that don’t require it in html, but maybe it’s a good idea to use closing tags on everything.