DarkxPunk Posted April 12, 2014 Share Posted April 12, 2014 (edited) Hi everyone, So I got a container, and two divs inside. The inner divs are set to 50% each and inline-block. Now for some reason they do not stay side by side, but rather flow underneath. Like I can check the sizes and together they equal the parent div, so why the flowing underneath? Here is the HTML: <div id="footer"> <div class="footerContent"><p>Content</p> </div> <div class="footerContent"><p>Content</p> </div> </div> And the CSS: #footer {width: 960px;}.footerContent {display: inline-block;width: 50%;} Thanks for any help. Edited April 14, 2014 by DarkxPunk Link to comment Share on other sites More sharing options...
dsonesuk Posted April 12, 2014 Share Posted April 12, 2014 (edited) Any element layout with spacing or new line break <div class="footerContent"><p>Content</p></div> <div class="footerContent"><p>Content</p></div><div class="footerContent"><p>Content</p></div><div class="footerContent"><p>Content</p></div> will add a additional width to first element div causing the following element to stack below it. <div class="footerContent"><p>Content</p></div><div class="footerContent"><p>Content</p></div> should fix it. other option zero the font-size in id="footer" but you have to reset again in class="footerContent" #footer { width: 960px; font-size: 0; } .footerContent { display: inline-block; width: 50%; font-size: 12px; } Edited April 12, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
DarkxPunk Posted April 14, 2014 Author Share Posted April 14, 2014 Thanks for that info, solved my problem. 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