cyber0ne Posted November 21, 2005 Share Posted November 21, 2005 I'm working on a new layout for my website and have run into a little snag with some divs. As you can see here:http://www.cyber0ne.com/test/css/screenshot.pngThe problem is, of course, the (floated) user avatar images running outside the divs when there is very little text. Now, if I set the class for those divs to overflow: hidden then that fixes the problem, but presents another one: Then the divs no longer go under any of the floated divs around them (right side of the page in the screen shot). In the provided screen shot, it's not a big deal. But elsewhere on the page and on other pages it is.Is there a way, either in CSS or in the page's HTML, to get those non-floated grey divs to extend enough to encompass the floated image contained within them, while still allowing them to horizontally stretch beneath other floated divs?-cyber0nehttp://www.cyber0ne.com Link to comment Share on other sites More sharing options...
cyber0ne Posted November 29, 2005 Author Share Posted November 29, 2005 Not having received a reply on this, I put up a highly simplified test page (using a previous test made by someone else here as a template) to demonstrate the problem, so you can see the HTML and CSS involved:http://www.cyber0ne.com/test/css/test.htmlThe problem is visible between the second and third "articles." I need to get that div to fully enclose the image, but still extend underneath the floated divs on the right. Any ideas?-cyber0nehttp://www.cyber0ne.com Link to comment Share on other sites More sharing options...
cyber0ne Posted December 12, 2005 Author Share Posted December 12, 2005 I hate doing this but... *bump*I've been working mostly on the code driving my website and the actual layout has been on the backburner for a while. But I've been noticing this issue still and tried again to come up with some way to resolve it, but it always ends up being a trade-off between wrapping the div around the image or extending the div beneath other floated divs. Is there any way to accomplish both?-cyber0nehttp://www.cyber0ne.com Link to comment Share on other sites More sharing options...
aspnetguy Posted December 12, 2005 Share Posted December 12, 2005 change this code.... </div> <div class="Article"> <img class="BlogImage" src="avatar.jpg" alt="image" /> <p>Lorem ipsum dolor sit amet </p> </div> <div class="Article"> to </div> <div class="Article"> <img class="BlogImage" src="avatar.jpg" alt="image" /> <p style="clear:both">Lorem ipsum dolor sit amet </p> </div> <div class="Article"> I added style="clear:both" to the <p> following the float image that is not being contained.this should work...if not I will do some deeper tests. Link to comment Share on other sites More sharing options...
cyber0ne Posted December 12, 2005 Author Share Posted December 12, 2005 I added style="clear:both" to the <p> following the float image that is not being contained.<{POST_SNAPBACK}> Then the text doesn't wrap around the image, leaving lots of blank space across the page for each "article." That much can be done by simply not floating the image, but I need that wrapping to fill in that space too.Perhaps there's another way to accomplish the text wrapping that would allow all these things?-cyber0nehttp://www.cyber0ne.com Link to comment Share on other sites More sharing options...
aspnetguy Posted December 12, 2005 Share Posted December 12, 2005 duh..of course it would..i wasnt thinking.Try this </div> <div class="Article"> <img class="BlogImage" src="avatar.jpg" alt="image" /> <p>Lorem ipsum dolor sit amet </p> <br style="clear:both" /> </div> <div class="Article"> Link to comment Share on other sites More sharing options...
cyber0ne Posted December 13, 2005 Author Share Posted December 13, 2005 <br style="clear:both" /><{POST_SNAPBACK}> It didn't even occur to me to apply a style to a br tag. Clear:left does the trick perfectly (clear:both also clears it for those floated divs on the right, so that's a no-go). For some reason I had wanted to avoid using br tags in general and just keep everything in p tags, but I've already had to change that rule elsewhere on the site so I might as well here, too. Thanks!One more thing... Is there a pseudo-class/pseudo-element that I can use on my divs that would append the text of that tag before the close of the div? For example, I use :before and :after elsewhere in my site, is there something like that which would allow me to insert some content from the stylesheet before the closing tag of the element (the "Article" div)?-cyber0nehttp://www.cyber0ne.com Link to comment Share on other sites More sharing options...
aspnetguy Posted December 13, 2005 Share Posted December 13, 2005 sorry, CSS is formatting only, you can't use it to add content. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now