Hello, Can you clear a float div that as a specific id? Therefore not clearing all floats, just 1 particular one? Thank you.
thanks bud, but I don't understand. Plug this into your browser and you'll see what I am after cheers. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- #page_container #right { float: right; width: 300px; background: red; } #page_container #left { padding-right: 300px; } #page_container #left #left-right { float: right; width: 200px; background: lightblue; } #page_container #left #left-left { padding-right: 200px; background: blue; } #clear1 { clear: both; background: green; } --> </style> </head> <body> <div id="page_container"> <div id="right"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi leo pede, fringilla sit amet, rutrum ut, posuere eget, sapien. Vivamus mauris ligula, cursus in, vulputate nec, mollis in, diam. Cras nonummy, nibh quis tempor ultrices, enim libero auctor risus, ac viverra diam tortor eget magna. Cras sed diam. Nunc sit amet pede. Quisque interdum enim non lacus. Pellentesque eu mi sed nibh venenatis posuere. Proin condimentum purus in pede suscipit facilisis. Duis malesuada ipsum mollis sem. Etiam dictum elit vel dolor. Sed velit. Proin vulputate euismod nisi. Nullam quis lacus. Proin et leo. Maecenas quis nibh eu pede facilisis rhoncus. Donec lorem diam, interdum a, condimentum mattis, dictum ut, metus. Pellentesque massa urna, suscipit ut, hendrerit non, hendrerit id, nisl. Proin tristique eros nec nulla. Pellentesque vel mauris fringilla est tincidunt dignissim. </div> <div id="left"> <div id="left-right"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi leo pede, fringilla sit amet, rutrum ut, posuere eget, sapien. Vivamus mauris ligula, cursus in, vulputate nec, mollis in, diam. Cras nonummy, nibh quis tempor ultrices, enim libero auctor risus, ac viverra diam tortor eget magna. Cras sed diam. Nunc sit amet pede. Quisque interdum enim non lacus. </div> <div id="left-left"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi leo pede, fringilla sit amet, rutrum ut, posuere eget, sapien. Vivamus mauris ligula, cursus in, vulputate nec, mollis in, diam. Cras nonummy, nibh quis tempor ultrices, enim libero auctor risus, ac viverra diam tortor eget magna. Cras sed diam. Nunc sit amet pede. Quisque interdum enim non lacus. </div> </div> <div id="clear1"> Here I want to clear only id=left-right (the light blue one) and not id=right (the red one). How do i do this? </div> </div> </body> </html> HTML:
nope. that give me the image first attached image I'm looking for the second one. Perhaps I'm just misunderstanding. Can you repost the whole html file?
You can also clear to one side, if that will help. clear: left; clear: right; are both perfectly valid options .
Okay, so if I'm understanding correctly, you're wanting a 3-column layout. Here's how I'd do it. HTML: <div id="container"> <div id="left"></div> <div id="middle"></div> <div id="right"></div> <div class="clear"></div> </div> Code (markup): CSS: #container { width:760px; margin:0 auto; } #left { float:left; width:whatever; } #middle { float:left; width:whatever; } #right { float:right; width:whatever; } .clear { clear:both; } Code (markup): I also have a tutorial on this at my blog: http://blog.popstalin.com/2006/04/16/so-you-want-a-three-column-layout/ Hope this is helpful.
cheers mate I got what I tried to accomplish and thanks for the link! But, just to settle some curiosity, can you clear a specific div? For instance what I wanted to clear id="left" and not id="middle" that are both floated left. Is that even possible? Thanks again to everyone who posted!
I appreciate the reply, but you're not giving me anything. Just saying "yes" doesn't really help. But i think you are missing the point. How about using the html i posted above and showing me?
That's a really convincing point It can't be done and you are still misunderstanding the question. I repeat, for anyone else who google's this thread, it can't be done.