In the two markup examples below, when the “featured” element is present in the markup, I want it to create a margin (equal to its width) down the entire height of its parent container. Like the example of the image here > http://www.ourskinny.com/the-easiest-diet-ever/healthy-dieting/
Can this be done with float:left; height:100%?
Example 1: elements within the “content” div extend full width of the “content” container. Similar to the layout here > http://www.ourskinny.com/privacy-policy/
<div class="content">
<p>Elements go here</p>
</div>
Example 2: elements within the “content” div have a left margin defined by the width of the “featured” div’s image
<div class="content">
<div class="featured"><img src="foo.png" /></p>
<p>Elements go here</p>
</div>
No. AND height:100% doesnt work unless you explicitly set the height of the parent element. So that’s a fail on two counts. Do you you not know the WIDTH of the featured element? you could “make room” within the content by padding it and then moving the featured element into that area.
Another method, but one that would require additional markup is to wrap the non-feature content in content and give that wrap overflow:hidden.
<div class="content">
<div class="featured">
<img src="foo.png" /></p>
<p>Elements go here</p>
</div>
<div class="cWrap">the actual content</div>
</div>
One advantage of this method is that the clear space will vary to accommodate WHATEVER width of the feature ( even if you don’t give it explicit width) automatically and it doesn’t matter which side you float .featured.
.content would be you page wrapper (you would probably need overflow;hidden also to clear the floated children) .
.featured would be your floated image block.
.cWrap holds the content and just has overflow:hidden and zoom:1.0 added to it.
Elements with overflow other than visible (and those with haslayout in IE) will form a rectangular block to the side of floats almost like another float.
I often use it for two columns where one column may not be present and then the other column just spans the available space.
Thanks Paul. In your example, I’m curious what happens when the content length is longer and taller than the image. Does the left margin stay intact or does it collapse to fill the space below the image?
I’m expecting, from your comments, that it maintains the same margin all the way down the viewport, but I’m looking for visual confirmation
Exactly what I was looking for. So, I can do that with this markup, right?
<div class="main">Width here will be 960px
<!--left column may or may not be present-->
<div class="leftColumn">toggle image goes here</div>
<!--content div will always be present and just needs to expand/collapse left margin to accomodate the leftColumn width-->
<div class="content">Content area here, will expand/collapse depending on the contents of "leftColumn"</div>
</div>
I am still hung over from the birthday thing and behind on my emails. BTW isn’t it ironic that the 8 year old link demonstrating overflow still used a clearer, the need for which would eventually be removed with OVERFLOW. LOL.
Scott:
The KEY to remember for this application is to add overflow:clear to your NON-FLOATED element, and it "shrink away " from ANY FLOAT. by WRAPPING your content… you are able yo make it appear as if it 100% height. ADDITIONALLY it auto clears all floats contained WITHIN that element)
Thanks to Paul and Dresden. This is a very powerful bit of knowledge contained in this thread. It will serve me well and save me countless hours of work (and from making my markup overly complex). I really appreciate the knowledge you are able to share.
