html - Floating Div in IE7 -
i hoped ie7 woes over, company still supports across our enterprise, alas i'm stuck fixing glitches. must overlooking incredibly silly, , wondering if fresh set of eyes can fix. in problem, text div have suppose float along side image div, isn't working.
<div id="news-container"> <div class="news-item"> <div class="news-image" style="background:url('images/site/previewimage.png') no-repeat;"> <img src="images/site/image-border.png" alt="" /> </div> <div class="news-text"> <h1>latest news</h1> <h2><a href="#">"almost, maine" tickets on sale!</a></h2> <p>text blah blah blah.</p> <div class="linkbutton redlink"><a href="#">read more</a></div> </div> </div> </div>
and css...
#news-container { width:100%; margin:20px 0; float:left; position:relative; clear:both; } .news-item { width:960px; margin:auto; position:relative; } .news-image { height:210px; width:340px; margin-right:20px; position:relative; display:block; float:left; } .news-text { width:900px; display:block; position:relative; }
thank help!
it's not really working in chrome , firefox.
what's happening is, when float element, text within elements surround float (that still in document flow) move aside float, container (in case, .news-text
still starts in same left position.
if text goes longer image, see text fall same left starting position image.
to proper "hanging indent", need assign width .news-text
remainder of width leftover image, , set left margin push away image. work in browsers including ie 7.
preview in ie 7: http://fiddle.jshell.net/eqwa4/show/
to see code: http://jsfiddle.net/eqwa4/
.news-text { width:500px; margin-left: 365px; display:block; position:relative; }
Comments
Post a Comment