Float without overriding padding

Question

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>

score 3 · Accepted Answer · edited May 23 '17 at 11:47

3

There are two solutions to be fixed the issue.

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

edited May 23 '17 at 11:47

Community

1
1

answered Apr 04 '17 at 11:46

Alex

8,461
6
37
49

1

That did it! Thank you. This will become useful later on! – Jonathan Apr 04 '17 at 11:51

score 1 · Answer 2 · answered Apr 04 '17 at 11:49

1

<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>

answered Apr 04 '17 at 11:49

Kinjal Akhani

168
12

Try This maybe helpful, in wrapper class set Display:inline-Block – Kinjal Akhani Apr 04 '17 at 11:50

score 1 · Answer 3 · answered Apr 04 '17 at 11:51

1

Add overflow:hidden on wrapper

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

answered Apr 04 '17 at 11:51

Lalji Tadhani

14,041
3
23
40

score 0 · Answer 4 · answered Apr 04 '17 at 12:51

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;
}

Float without overriding padding

4 Answers4