CODEWITHSUNDEEP
htmlcss
uadnal
uadnal

Reputation: 11435

2 divs 50% inline block not next to each other

I'm having issues with this box model. I was having the issue only with Blackberry 4.6, but it's happening on jsbin/jsfiddle as well. These 2 divs should be 50% and therefore sit directly next to each other, but the last one is breaking down.

jsbin: http://jsbin.com/oyujof/1/edit

Thanks in advance.

Upvotes: 3

Views: 3785

Answers (5)

Alex
Alex

Reputation: 1087

Whitespace is significant when it comes to inline and inline-block elements. Remove or comment out the whitespace between the divs.

Clarification: the whitespace is the newline character and spaces between the divs:

  </div>\n
  __<div class="nav-button">

These will render as a single space when you use inline or inline-block.

Upvotes: 8

Jason McCreary
Jason McCreary

Reputation: 72991

While float can come its own issues, using floats in the case is straightforward and may be your only option in the event cleaning up whitespace and/or 49% is not an option.

.nav-button {
  float: left;
  display: block;
  width: 50%;
}

Updated jsbin: http://jsbin.com/oyujof/23/

Upvotes: 1

Omega
Omega

Reputation: 3038

You just need to specify the rules for .nav-to as well as .nav-button and also float them left. Here's the CSS that fixes it with the HTML you have given:

.nav-to {
        width: 50%;
        float:left;
    .nav-button {
        width: 50%;
        float:left;

        &:last-child {
            text-align: right;
        }
    }
}

http://jsbin.com/oyujof/32/edit

Upvotes: 1

joe sepi
joe sepi

Reputation: 589

This may not be the best answer, but if you set each to 49%, rather than 50%, then it works.

Upvotes: -1

David Souther
David Souther

Reputation: 8174

The whitespace has width, so your total layout is 50% + space_width + 50%, > 100% so the second div breaks. Either remove the whitespace, or set the width at 49%.

Upvotes: 1

Related Questions