Laura L. Laura L. - 10 days ago 6
CSS Question

html/css boxed content being "annoyed" by the text supposed to be under it

I am using 3 boxes with text content where next t the the last box, some text is being displayed instead of leaving a blank and appear under.
See attached screenshot:
enter image description here

.




.box_question {
float: left;
margin: 10px;
padding: 10px;
max-width: 300px;
border: 1px solid black;
padding-bottom: 1%;
}




<div class="box_question"><p class="sub-heading"> text </p></div>





float: right; does the samething but to the left...
float:center; works but doesn't not display all 3 boxes next to each others... I am not quite sure what to put between the last box and the next text. Please help me.

Answer
  1. remove float:left rule from .box_question selector in css.
  2. enclose the text which should be displayed below the boxes inside a <div></div>tag.

Tip: If it is a responsive design consider using units like em, rem or % instead of px.

.box_question {
  margin: 10px;
  padding: 10px;
  width: 300px;
  border: 1px solid black;
  padding-bottom: 1%;
  display: inline-block;
}
<p class="sub-heading">
  <span style="color: #000000;">Examples of Lorem Ipsum is simply dummy :</span>
</p>
<div class="box_question">
  <p class="sub-heading">Box1</p>
</div>
<div class="box_question">
  <p class="sub-heading">Box2</p>
</div>
<div class="box_question">
  <p class="sub-heading">Box3</p>
</div>
<div>
  Large text goes here which is below the boxes always...
</div>