Jump to content
robox45

floating divs

Recommended Posts

hey guys. i want to put 2 or more divs next to each other, and that to be in one big container div. but i have a problem. as you can see by the code, the container div doesn't go around the floating divs. what am i missing?

<!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=utf-8" /><title>Untitled Document</title><style type="text/css">.container { width:940px; height:auto; padding:20px; background-color:#CCC; }.floating_div_1 { float:left; width:300px; height:200px; background-color:#0F0; }.floating_div_2 { float:left; width:300px; height:300px; background-color:#CC6; margin:0px 20px; }.floating_div_3 { float:left; width:300px; height:250px; background-color:#FC3; }.below_div { width:980px; height:50px; margin-top: 10px; background-color:#999; clear:both; }</style></head><body><div class="container">	<div class="floating_div_1"></div>        <div class="floating_div_2"></div>        <div class="floating_div_3"></div></div><div class="below_div"></div></body></html>

Share this post


Link to post
Share on other sites

Wow, never knew that.

 

So if you have a container containing divs which are all floated, usually causing the height of the container to drop, we can use overflow: hidden to set the height of container?

 

I've always set a fixed height in pixels to find the height of the containing div, when floating elements inside.

 

Kind regards,

 

Lab.

Share this post


Link to post
Share on other sites

I didn't know that either.

 

Overflow: hidden or auto seems to work in FF23.

Edited by davej

Share this post


Link to post
Share on other sites

Indeed,

 

I thought overflow:hidden would have hid the floating divs past the heights of the container, instead it makes the container find the height of the floating divs....?

 

Regards,

 

Lab.

Share this post


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...