How to add margin next to a float element-CodePudding

I have text between 2 block float elements and I want to add an additional indentation to the right for a quote id element inside the p paragraph. The problem is that margin-left doesn't work next to a float element and if I use the position: relative method, like in the shown example, then the text will clip the right float block. Is there a way to move the quote text to the right without the clipping?

#left-block{
  height: 150px;
  width:50px;
  float: left;
  background-color: #000;
  margin-right: 10px
}

#right-block{
  height: 150px;
  width:50px;
  float: right;
  background-color: #000;
  margin-left: 10px
}

#quote{
  position: relative;
  left: 30px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="left-block"></div>
  <div id="right-block"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
  <p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
    Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>

</body>
</html>

Edit:

For an exact example you can look at en.wikipedia.org/wiki/Hercules at the line Tacitus records a special affinity of the Germanic peoples for Hercules. In chapter 3 of his Germania, Tacitus states: You can see that the indented text that follows is essentially between 2 floating images.

CodePudding user response：

The margin is correctly applied. The problem is that your block is before in your html and it you should be after. So, for what you are trying to achieve it is better to use display:flex

So I restructure your html, by placing a "container" and applying the flex. Then, I put all your p into a div and place the right block below.

As you added a left to your #quote you need to adjust width of it too.

So I could remove your float.

DEMO

#left-block{
  height: 150px;
  width:50px;
  /*float: left;*/
  background-color: #000;
  margin-right: 10px
}

#right-block{
  height: 150px;
  width:50px;
  /*float: right;*/
  background-color: #000;
  margin-left: 10px
}

#quote{
  position: relative;
  left: 30px;
  width: calc(100% - 30px);
}

.d-flex{
  display:flex;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div >
    <div id="left-block"></div>
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?</p>
      <p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
      <p>
        Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
    </p>
    </div>
    <div id="right-block"></div>
  </div>

</body>
</html>

CodePudding user response：

You can use a margin, but the value has to be larger than the width of the floated elements, since the margin is measured from to side of the parent element, not taking the floated element into account:

(no need for relative position BTW)

#left-block{
  height: 150px;
  width:50px;
  float: left;
  background-color: #000;
  margin-right: 10px
}

#right-block{
  height: 150px;
  width:50px;
  float: right;
  background-color: #000;
  margin-left: 10px
}

#quote{
  margin: 0 100px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="left-block"></div>
  <div id="right-block"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
  <p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
    Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>

</body>
</html>