Forum Moderators: not2easy
My other, real struggle is the following:
I try to trim-down a rather overstuffed CSS-oriented, fluid 2 column-design within a "drop-shadow box".
My (working but unelegant) approach today is that I nest the 2 columns in each another <div>, and format these (so I have to float only 1 object): A left, 25%-wide column, and a right, 75%-wide one, both containing <p>aragraphs, <img>, <ul>ists etc. The left column is basically an abstract ("at a glance") of the right column's content.
<div class="container"><div class="inhalt">
<div class="leftcolumn">
<p>left column</p>
more...
</div>
<div class="rightcolumn">
<p>right column</p>
much more...
</div>
</div>bottom border-stuff here</div>
So far so good, but I'd like to trim down the nesting, and am at the point where I have
<div class="container"><div class="inhalt">
<p>right column (quite long paragraphs in here)</p>
<p class="left">left column (abbr. only)</p>
</div>bottomstuff</div>
where the default <p>aragraphs float right, while the left-column <P> are "float: none"
I believe that I have to float the right-column-paragraphs because the left column elements are 25% wide and thus would sit 4 in a row, and here comes my problem: the floated elements height isn't catched and overflows the bottom if the left (unfloated) column isn't longer. So, best would be to completely avoid floats, or to know how to get the container to catch up with the height of the floated elements...
Or, would it be more "reasonable" to create a left-floated container which holds all the stuff (of the left column)?
Thanks very much for insight, hints, directions and whatever else: david: )
know how to get the container to catch up with the height of the floated elements
Floats are removed from the flow, so other elements cannot interact with them (except in limited ways), including their containers. This means that the float cannot dictate the container's height. This is the proper implementation of the float property. (You may have noticed that IE displays this part of your design correctly? That's because IE ignores this part of the float specifications.) So it's not that you're triggering a bug or doing anything wrong. You just need a technique to change the normal behavior into something useful for your layout.
To get a container to wrap around it's floated children, you need to either (a)float the container or (b)add a clearing element [webmasterworld.com] to the bottom of the container.
float the right-column-paragraphs
You are better off leaving the container div for the right column and just floating that, than you are floating every paragraph, img or other element on that side of the page. (One float VS Many floats).
cEM
Thanks for clearing things/opinions up!
I already tampered around with floating the containers, but this didn't work, and things got quite weird ...
(no, I didn't try <body style="float: left"> ;^).
Also, "closing" the bottom with a <p style="clear: all"> didn't the trick, it got overflowed too (don't know why, though), so I too think it'll (sadly) be best to nest one of the two columns into a floating div, and then have the other paragraphs / elements run in the <div class="inhalt">
Or... is there another way to get "classed" objects (you know, <p class="left or right">, <ul ... > etc) to align next to each other?
Oh, and, concerning MSIE, no, I didn't see it ignoring this specific CSS-rule... I usually invest a painful lot of time trying to make my (standard-compliant, AFAIK) CSS work for this beast too, and so I'm tempted not to look at as long as possible...
<p style="clear: all">
The value options for the clear property are: none, left, right, and both [w3.org], indicating which sides of an element should not be allowed to sit adjacent to a floated box.
Try replacing "all" with "both."
cEM
thanks again!
Actually, once this bug (clear: all) was removed, and after de-nesting the footer-part, it's all working, even the max-width AND min-width in Safari! Ha-HAA!
I feel like a happy camper, ready to meet the week-end (or try out other layout adventures)!
again, thanks many times!
