Jump to content

Overflow Issues


cyber0ne

Recommended Posts

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

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

  • 2 weeks later...

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

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

I added style="clear:both" to the <p> following the float image that is not being contained.

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

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

        <br style="clear:both" />

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...