CODEWITHSUNDEEP
htmlcss
Supergogoman91
Supergogoman91

Reputation: 205

Problems using inline-block on <div> to fit to content

I'm having problems with unwanted whitespace within a div that I've applied inline-block to. I'm trying to shrink the div to fit it's contents. Any help would be appreciated.

Code below: 

<div class="wrap">
    <div class="content1">
            <p>Lorem ipsum dolor sit amet, sed ex elitr perfecto, noluisse 
            intellegam definitionem ad sed. Mei at aliquip pertinacia. Novum
            omnes incorrupte ei vix, ad oratio mediocrem iracundia nec, 
            ea possit prompta sed. Liber sapientem no eam, in nulla persius 
            volumus eum. Pro alienum indoctum liberavisse te. Verear 
            aliquam cotidieque mei te, ea sed debet aperiam comprehensam, 
            causae facilis neglegentur ei mea.</p>
    </div>
    <div class="content2">
      <ul>
        <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
        <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
        <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
        <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
      </ul>
    </div>
  </div>




*{padding: 0;
  margin: 0;
  }

.wrap {border: 1px solid yellow;
 display: inline-block;}

.content1 {
 width: 30%;
 border: 1px solid blue;
 display: inline-block;}

.content2 {
 width: 30%;
 border: 1px solid red;
 display: inline-block;}

Upvotes: 0

Views: 45

Answers (3)

shatskiym
shatskiym

Reputation: 31

There are a few ways to fix this. One of them is the font-size: 0; in wrapper.

HTML:

<div class="wrap">
  <div class="content1">
    <p>Lorem ipsum dolor sit amet, sed ex elitr perfecto, noluisse   intellegam definitionem ad sed. Mei at aliquip pertinacia. Novum omnes incorrupte ei vix, ad oratio mediocrem iracundia nec, ea possit prompta sed. Liber sapientem no eam, in nulla persius volumus eum. Pro alienum indoctum liberavisse te. Verear aliquam cotidieque mei te, ea sed debet aperiam comprehensam, causae facilis neglegentur ei mea.</p>
  </div>
  <div class="content2">
    <ul>
      <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
      <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
      <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
      <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
    </ul>
  </div>
</div>

CSS:

*{padding: 0;
  margin: 0;
}

.wrap {border: 1px solid yellow;
 display: inline-block;
 font-size: 0;}

.content1 {
 width: 30%;
 border: 1px solid blue;
 display: inline-block;
 font-size: 15px;}

.content2 {
 width: 30%;
 border: 1px solid red;
 display: inline-block;
 font-size: 15px;}

Also this may help you: https://css-tricks.com/fighting-the-space-between-inline-block-elements/.

Upvotes: 0

Trikucian
Trikucian

Reputation: 26

First off, why does it need to be inline-block? Can you provide more examples of what you're trying to do? I assume that the content blocks are supposed to be 30% of page width, but they are going to be 30% width of the thing they're inside. Here's a better method: 

.wrap {
      display: block;
      width: 30%;
      height: auto;
      position: relative;
}

.wrap .content1, .wrap .content2 {
      position: relative;
      width: 100%;
}

In css, unless specifically styled, any element inherits the elements of its parent.

Upvotes: 1

Banzay
Banzay

Reputation: 9470

You need to set float: left; to .content1:

*{padding: 0;
  margin: 0;
  }

.wrap {border: 1px solid yellow;
 display: inline-block;}

.content1 {
 width: 30%;
 border: 1px solid blue;
 display: inline-block;
  float: left;
 }

.content2 {
 width: 30%;
 border: 1px solid red;
 display: inline-block;}
<div class="wrap">
    <div class="content1">
      <p>Lorem ipsum dolor sit amet, sed ex elitr perfecto, noluisse intellegam definitionem ad sed. Mei at aliquip pertinacia. Novum omnes incorrupte ei vix, ad oratio mediocrem iracundia nec, ea possit prompta sed. Liber sapientem no eam, in nulla persius volumus eum. Pro alienum indoctum liberavisse te. Verear aliquam cotidieque mei te, ea sed debet aperiam comprehensam, causae facilis neglegentur ei mea.</p>
    </div>
    <div class="content2">
      <ul>
        <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
        <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
        <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
        <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
      </ul>
    </div>
  </div>

Upvotes: 0

Related Questions