CODEWITHSUNDEEP
htmlcss
Jonathan
Jonathan

Reputation: 724

Float without overriding padding

I'm making a site that has 3 different span that sits next to each other by using a float:left parameter. But this messes up the padding I have on the wrapper the two elements are contained in. How can I make them sit next to each other without messing with the padding?

Example

.wrapper {
  width: 100%;
  padding: 10px 0;
  background: red;
}

.box-A {
  width: 49%;
  float: left;
}

.box-A {
  width: 49%;
}
<h1>Not working but aligned</h1>
<div class="wrapper">
  <div class="box-A">
    Lorem
  </div>
  <div class="box-A">
    Ipsum
    <br> Ipsum
    <br> Ipsum
    <br> Ipsum
    <br>
  </div>
</div>

<h1>Working, but not aligned</h1>
<div class="wrapper">
  <div class="box-B">
    Lorem
    <br> Lorem
    <Br>
  </div>
  <div class="box-B">
    Ipsum
    <br> Ipsum
    <br>
  </div>
</div>

Upvotes: 1

Views: 186

Answers (4)

Sunil Singh Rawat
Sunil Singh Rawat

Reputation: 96

Make following changes in your css, I hope this should be work.

.wrapper {
  width: 100%;
  padding: 10px 0;
  background: red;
}
.box-A {
  width: 49%;
  float: left;
}

.box-A {
  width: 49%;
}

.wrapper:after {
    content:"";
    clear:both;
    display:block;
}

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14179

Add overflow:hidden on wrapper

.wrapper {
  width: 100%;
  padding: 10px 0;
  background: red;
  display: inline-block;
  overflow: hidden;/*Add This Property*/
}

Upvotes: 1

Kinjal Akhani
Kinjal Akhani

Reputation: 168

<h1>Not working but aligned</h1>
<div class="wrapper">
  <div class="box-A">
    Lorem
  </div>
  <div class="box-A">
    Ipsum<br>
    Ipsum<br>
    Ipsum<br>
    Ipsum<br>
  </div>
</div>
<style>
.wrapper {
  width: 100%;
  padding: 10px 0;
  background: red;
  display: inline-block;
}
.box-A {
  width: 49%;
  float: left;
}

.box-A {
  width: 49%;
}
</style>

Upvotes: 1

Alex
Alex

Reputation: 8695

There are two solutions to be fixed the issue.

  1. Using display:inline-block instead of float:leftand remove the spaces which is occured by inline-block
  2. Adding clearfix to wrapper

Upvotes: 3

Related Questions