Jump to content

[SOLVED] 50% Divs flowing for no reason


DarkxPunk

Recommended Posts

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 by DarkxPunk
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...