CODEWITHSUNDEEP
htmlcss
Dharmesh Vekariya
Dharmesh Vekariya

Reputation: 1146

How to avoid "box item" from wrapping content?

Why my box item is wrap i want align with both side and right side spacing of 2px also i attache screenshot what i want. Thanks

I want below images design

body { padding: 0 30px; }
.banner { background-color: #3b524c; height: 550px; }
.box ul { margin: 20px -2px 0 0; padding: 0; width: auto; }
.box ul li { width: 25%; margin-right: 2px; float: left; list-style: none; display: block; padding: 29px 0; font-size: 16px; line-height: 23px; text-transform: uppercase; background-color: #e57b76; color: #d8d8d8; text-align: center; }
<section class="banner"></section>
<section class="box">
  <ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
  </ul>
</section>

Upvotes: 1

Views: 48

Answers (2)

kriddy800
kriddy800

Reputation: 144

To achieve the above image you just need to add a

    display: flex;

to the "ul" element in your CSS. However depending on the intended behaviour you might not want to be using a "UL". If it's only ever going to be the four items you might want to consider using "div" instead. I've also done a codepen to show it with the flex

Upvotes: -1

Paulie_D
Paulie_D

Reputation: 115098

Because math. You can't have 4 times width:25% AND extra margins. It adds up to more than 100%.

Change the width to adjust for the extra margin using calc.

body {
  padding: 0 30px;
}

.banner {
  background-color: #3b524c;
  height: 50px;
}

.box ul {
  margin: 20px -2px 0 0;
  padding: 0;
  width: auto;
}

.box ul li {
  width: calc(25% - 2px);
  margin-right: 2px;
  float: left;
  list-style: none;
  display: block;
  padding: 29px 0;
  fnt-size: 16px;
  line-height: 23px;
  text-transform: uppercase;
  background-color: #e57b76;
  color: #d8d8d8;
  text-align: center;
}
<section class="banner"></section>
<section class="box">
  <ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
  </ul>
</section>

Upvotes: 3

Related Questions