robox45 Posted September 22, 2013 Share Posted September 22, 2013 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> Link to comment Share on other sites More sharing options...
Don E Posted September 22, 2013 Share Posted September 22, 2013 Try adding overflow: hidden to .container . 1 Link to comment Share on other sites More sharing options...
Labtec Posted September 22, 2013 Share Posted September 22, 2013 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. Link to comment Share on other sites More sharing options...
davej Posted September 22, 2013 Share Posted September 22, 2013 (edited) I didn't know that either. Overflow: hidden or auto seems to work in FF23. Edited September 22, 2013 by davej Link to comment Share on other sites More sharing options...
astralaaron Posted September 23, 2013 Share Posted September 23, 2013 I am curious...why does this work? Link to comment Share on other sites More sharing options...
Labtec Posted September 23, 2013 Share Posted September 23, 2013 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. 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