Ever made a site or just part of a site that never looked like the design because of a rendering problem where the height of parent element would cease to exist if you floated the child elements, so you have to give it a fixed height? Well fear no more, there is a fix! Continue Reading...
Please Note: This has only been tested in FireFox because I work with FireFox the most. However I’ve had the same problem with Safari and Opera. I know this trick works, I’ve used it many times.
I’d like to take this chance to explain to the younger-in-mind CSS coders out there, (It means your at the beginner/intermediate level), how to solve the strange no-height issue when floating child elements. I’ve seen this problem affect many advanced coders as well as the newbies, and this is it:
I set my Child Divs’ to Float and now the Parent Div has lost it’s height…WTF?!
Or
I set my Child Divs’ to Float and now the Parent Div’s height is only as high as the Child elements Paragraph tags…WTF?!
Yes, We’ve all been there. It’s a problem where the Parent element doesn’t recognise the Child elements, only the Child element’s Paragraph tags. Your code will look something like this:
<div id="parent_element"> <div class="child_element"> <p>Left</p> </div> <div class="child_element2"> <p>Right</p> </div> </div>
#parent_element {
width:600px;
padding:20px;
border:1px solid #ccc;
background:#e6e6e6;
}
.child_element {
width:260px;
height:50px;
float:left;
background:#666;
}
.child_element2 {
width:260px;
height:50px;
float:right;
background:#666;
}
Not Pretty, Is It?
We only need to add one thing. Take a look, I think I’ve made it pretty obvious 
:
#parent_element {
width:600px;
padding:20px;
/***Right Here***/ display:inline-block; /***That's Right!***/
border:1px solid #ccc;
background:#e6e6e6;
}
All I can say is that it works perfectly. However you can’t center the Div using margin:0px auto; so just add another wrapper. I also realize that there are other ways to fix this issue. However this one works best for me because I’m used to using it. If you enjoyed this or think I’ve failed epically, leave a comment below!
Subscribe to our RSS Feed and E-Mail for the latest updates on all of our content.
Firefox is one of the most popular browsers in the world. The secret behind this popularity is thousands of small apps available with firefox which is also free.
With all the modern browsers starting to support CSS3 (including Mozilla Firefox 4, Apple Safari 4, Internet Explorer 9), it’s time to take a real look at CSS3 and see what it can do, and what it’s capable of doing. CSS3 has a lot of new properties to use, including gradients, border images, transitions, animations, border radius, @font-face, shadows, and more.
Since HTML5 has been in development, there has been a lot of speculation that the introduction of mixed with JavaScript means flash will have no place on the internet. I’ve taken some time to have a look at what developers have created using a combination of the JavaScript and , and it is starting to look rather impressive.
Today we are showcasing “Best of the Web”. We have scoured the internet in search of other design driven blogs and websites to showcase what they have to offer for the month of June, 2010. There is plenty of great stuff out there such as tutorials, freebies, resources and lots of inspirational pieces. I am confident that your designs will benefit from these hot new finds.
Today’s web treat is a free combo pack of large, high resolution (2400px * 1600px) Hot Pink Industrial Grunge Textures in .jpg format.
As we mentioned before, logos are a very important part of building your brand’s identity. “Branding” yourself, is the best way to represent who you are and what you are all about. If designed properly, logos can have an enormous impact on your company’s success.
For the moment we don´t approve any guest writer applications, please check back later or subscribe to our feed for notice.
Stay updated with:
4 Comments
“overflow: hidden” to the parent elements works too, and it is the standard solution these days, as far I know.
Good tip anyway.
From what I understand you mean to hide the child elements outside of the parent right?
For example on my site http://kayrosedesign.com/blog/ I used a seperator background image to keep the seperator between the left and right columns the entire height of the page, (from the bottom of the featured area to the top of the footer). Sorry if that was confusing
Also I see your point beacuse my example doesn’t work in FireFox 2.0. Then again it’s not to much of a worry.
Clearing the floated divs inside the container would also fix it, and it’s good practice to always clear floated containers anyway.
Yeah, clearing the float is the best way to fix this issue. The overflow:auto fix also works, though I prefer to clear the floats.