CSS - Inline-block breaks float

Question

I have a <div> that floats left and a <p> that renders to the right of it. Problem is, there is no spacing between my text and my div. I tried to add margin and padding to both the div and and p but they did not work. I read that I need to first apply inline-block to the p. This made the padding and margin work but it broke the float:left:

<div style="float: left">
  <ul>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
  </ul>
</div>
<p style="margin-left: 15px; display: inline-block;"> Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. </p>

How to add margin to text and keep float:left of div?

The inline-block element will be as wide as it needs to be to accomodate the text...therefore 100% wide given the amount of text you have. If you want it on the right you'll need to assign a width. — Paulie_D
– Paulie_D, Commented Jan 9, 2020 at 17:15
Put a right margin on the div instead of a left margin on the paragraph — j08691
– j08691, Commented Jan 9, 2020 at 17:16
You also have to remove the inline-block from the paragraph to have it work — j08691
– j08691, Commented Jan 9, 2020 at 17:21
@Paulie_D I don't want to assign a width because it's a full-width design. — xendi
– xendi, Commented Jan 9, 2020 at 17:21

Anurag Srivastava · Accepted Answer · 2020-01-09 17:19:29Z

1

Why dont you use flexbox? You will need to create a wrapping div and have the ul and p tags as children of that.

div{ display: flex; align-items: top; justify-content: flex-start;}
p {
  margin-left: 15px;
}

<div>
  <ul>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
  </ul>

  <p> Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him
    good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. </p>
</div>

edited Jan 9, 2020 at 17:19

answered Jan 9, 2020 at 17:17

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Valentin Duboscq · Accepted Answer · 2020-01-09 17:20:30Z

0

You can use flexbox by changing your HTML structure:

div {
  display: flex;
}

p {
  margin-left: 15px;
}

<div>
  <ul>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
  </ul>
  <p> Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. </p>
</div>

edited Jan 9, 2020 at 17:20

answered Jan 9, 2020 at 17:17

Valentin Duboscq

9788 silver badges20 bronze badges

1 Comment

xendi Over a year ago

This works in your example but not on my site for some reason. Probably some other style affecting it. I got it working with a margin on my div though but thanks.

j08691 · Accepted Answer · 2020-01-09 18:15:40Z

Removing the styling on the paragraph, and instead adding your margin to the right of your div seems to accomplish what you're after:

<div style="float: left; margin-right:50px;">
  <ul>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
  </ul>
</div>
<p>Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. </p>

Collectives™ on Stack Overflow

CSS - Inline-block breaks float

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related