Jump to content

Floating div going outside it's container div


Recommended Posts

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 post
Share on other sites

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 by davej
Link to post
Share on other sites

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 by davej
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...