CODEWITHSUNDEEP
htmlcss
gaurav jain
gaurav jain

Reputation: 1345

inline-block div wraps with width=50% and some text in it

Please look at this fiddle.

I have different behavior for following two classes.

.class2 {
    width: 49.5%;
    display: inline-block;
}

.class3 {
    width: 50%;    /* Wraps to next line */
    display: inline-block;
}

Why is it wrapping? I am working inside a particualr div.

How can I make it not wrap and keep width = 50%.

Other than 50%, I dont know how to come-up with the correct value.

Upvotes: 1

Views: 3111

Answers (7)

GeckoTang
GeckoTang

Reputation: 2785

I often use display:inline-block; .

However, display:inline-block has some problem.

I recommend Grids - Pure pattern and wrote a sample code like Pure.

.class1 {
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    *word-spacing: -0.43em;
    text-rendering: optimizespeed;
    font-family: Georgia, Times, "Times New Roman", serif;
}

.class2, .class3 {
    display: inline-block;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
    font-family: "Hiragino Kaku Gothic ProN",Meiryo,Verdana,sans-serif;
    width: 50%;
}

my fiddle

Upvotes: 0

Delmontee
Delmontee

Reputation: 2364

Don't use floats, they cause all sorts of headaches. Just add this to your CSS:

body,html{ white-space:nowrap; }
a,pre,p,span,strong,h1,h2,h3,h4,h5,h6{ white-space:normal; }

...then make sure all text on your site is contained either within 'p' or 'span'

Upvotes: 0

Hughes
Hughes

Reputation: 1055

The reason that they stack instead of sit next to one another is that display: inline-block recognizes white space. If you have a return after your first div, then it will pick that up and cause it to stack. A work around would be something similar to...

<div class="col1">

Column one content.

</div><div class="col2">

Column two content.

</div>

Upvotes: 0

Neek
Neek

Reputation: 7461

You do not need to resort to float. That is a relatively ugly workaround that introduces its own problem (having to clear floats and/or set overflow:hidden on the containing element).

You do not provide your HTML markup but I would guess you have whitespace between the elements, as in Mr Alien's answer.

See Two inline-block, width 50% elements wrap to second line for a better solution.

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157334

Use float: left; to float you 1st <div> on the left and you can also float your 2nd <div> on the right using float: right; than use <div style="clear: both;"></div> to clear your floating elements:

CSS:

.class1 {
    background-color: red;
    width: 100%;
}
.class2 {
    width: 50%;
    background-color: blue;
    color: white;
    float: left;
}

.class3 {
background-color: green;
    width: 50%;
    float: right;
}

HTML:

<div class="class1">
  <div class="class2">
      This is demo
  </div>
      <div class="class3">
          This is demo          
    </div>
  <div style="clear: both;">
</div>

My fiddle

Upvotes: 0

Huy trịnh
Huy trịnh

Reputation: 49

Put a:

margin:-2px;

into your class3. This doesn't break your div but solve your problem. Don't know why

Upvotes: -1

Rega
Rega

Reputation: 880

Try floating your divs like this:

.class1 {
    background-color: red;
    width: 100%;    
}
.class2 {
    width: 50%;
    display: inline-block;
    background-color: blue;
    color: white;
    float:left;    
}
.class3 {
    width: 50%;
    display: inline-block;
    background-color: blue;
    color: white;
    float:right;
}

Upvotes: 1

Related Questions