coco243 Posted September 15, 2013 Share Posted September 15, 2013 Hi! Why if I set a div as floating:right it goes out from it's container div. I will put the code: <html><body><div> <!-- CONTENT --><div style="background-color:red"> <!-- UPPER --><div style="float:left;"> <!-- FLOAT DIV --><p> gogu </p></div> <!-- END FLOAT DIV --></div> <!-- END UPPER --><div style="background-color:green"> <!-- DOWN --><p> cucu </p></div> <!-- END DOWN --></div> <!-- END CONTENT --></body></html> The "gogu" paragraph it's getting out from the UPPER div. It hasn't have red background color. Why that? How I fix? Thank you. Link to comment Share on other sites More sharing options...
Don E Posted September 15, 2013 Share Posted September 15, 2013 Try adding: overflow:hidden to the UPPER div. Just to add, using a doctype is also a good idea. Link to comment Share on other sites More sharing options...
coco243 Posted September 16, 2013 Author Share Posted September 16, 2013 Now the gogu paragraph it's included in the upper div, but appears a distance between upper div and down div, it's not ok. How do I manage the problem? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 16, 2013 Share Posted September 16, 2013 collapsing margins, means the p margin extends beyond top edge of down div, giving it the margin instead, fix use overflow: hidden; on down div as well. Link to comment Share on other sites More sharing options...
rajivdevkk Posted September 17, 2013 Share Posted September 17, 2013 I think you have given good scripting. Link to comment Share on other sites More sharing options...
davej Posted September 17, 2013 Share Posted September 17, 2013 (edited) Float is a strange thing. When float is used on an element the container div surrounding that element will collapse to a horizontal line and only define the container width. A height can be assigned to the container but only for visual purposes. Once float is applied elements below that point in the document will behave oddly. If everything is floated things return to normal when an element with a clear property is reached. If some elements are floated and some aren't -- such as what you are doing -- then things can get confusing. <!DOCTYPE html><html><head><title>Float damy 0</title><style>*{margin:0;padding:0;}#content{background-color:gray;}#upper{background-color:red;height: 10px;}.float{width: 100px;float:left;border:1px dotted black;}#lower{clear:both;background-color:green;}</style></head><body> <div id="content"> <div id="upper"> <div class="float"> <p>float1</p> </div> <div class="float"> <p>float2</p> </div> <div class="float"> <p>float3</p> </div> <div class="float"> <p>float4</p> </div> </div> <div id="lower"> <p>lower</p> </div></div> </body></html> Mixing floated with non-floated... <!DOCTYPE html><html><head><title>Mixing float and nofloat - damy</title><style>*{margin:0;padding:0;}#content{background-color:gray;}#upper{background-color:red;height: 78px;overflow:hidden;}.float{width: 100px;float:left;border:1px dotted black;}.nofloat{width: 100px;border:1px dotted black;}#lower{clear:both;background-color:green;}</style></head><body> <div id="content"> <div id="upper"> <div class="float"> <p>float1</p> </div> <div class="nofloat"> <p>nofloat2</p> </div> <div class="nofloat"> <p>nofloat3</p> </div> <div class="nofloat"> <p>nofloat4</p> </div> </div> <div id="lower"> <p>lower</p> </div></div> </body></html> A practical mix of floated photos and unfloated text which flows around them... <!DOCTYPE html><html><head><title>Mixing text and floated photos</title><style>*{margin:0;padding:0;}p{/*margin: 5px 15px;*/}#content{background-color:gray;}#upper{background-color:#fcc;/*min-height: 400px;*/}.float{width: 200px;height: 150px;float:left;margin-right: 10px;background-color:white;border:1px dotted black;opacity:0.6;}#lower{clear:both;background-color:green;}</style></head><body> <div id="content"> <div id="upper"> <p>Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?" </p> <div class="float"> <p>float1</p> </div> <p>Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?" </p> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasureitself... </p> </div> <div id="lower"> <p>lower</p> </div></div> </body></html> Edited September 18, 2013 by davej Link to comment Share on other sites More sharing options...
dsonesuk Posted September 17, 2013 Share Posted September 17, 2013 Any non floated element not given clear: both;, will try to move up to merge with floated elements, as shown in my example where the unfloated element was the middle, and it merged between left and right floated elements. Link to comment Share on other sites More sharing options...
davej Posted September 18, 2013 Share Posted September 18, 2013 (edited) Will it merge with it or crawl around it? I guess the only time I mix floated and non-floated is when I want to wrap text around photos, so the text is not floated and the photos are mixed into the text and floated left or right. --EDIT-- No, you're right. It does merge. Also, I was not aware of the overflow: hidden solution. That is good to know. Edited September 22, 2013 by davej 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