CODEWITHSUNDEEP
htmlcss
John Leo
John Leo

Reputation: 55

jQuery image loading issue

I'm trying to figure out how to prevent boxes on new lines from indenting on the first element.

As a test, I'm merely hard coding the boxes in html like such:

<ul id="box_container">
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
</ul>

CSS:

#box_container {
    height: auto;
    width: 100%;
}

.box {
    height: 300px;
    width: 23.5%;
    display: block;
    background: black;
    float: left;
}

.box + .box {
    margin-left: 2%;
}

The margin-left in the .box + .box is working as I'd like but how do I prevent it from adding the margin when the next element is forced onto another line?

I know for a fact I'll only be showing four boxes per row if that makes any difference. I was hoping to find a way to do this without having to wrap the box elements in some type of div every 4 elements but if that's the only way then I suppose I have no choice.

Here's an image of what's currently happening to give you all a better idea: enter image description here

Upvotes: 0

Views: 48

Answers (4)

Nikhil Eshvar
Nikhil Eshvar

Reputation: 495

Use-margin right instead of margin-left

.box {
        height: 300px;
        width: 22.5%;
        display: block;
        background: black;
        float: left;
        margin-right: 2%;
        margin-bottom: 2%;
    }

    .box + .box {
        margin-right: 2%;
    }

Or in real basic terms, you can use this:

.box:nth-child(5) {
    margin-left: 0%;
}

But this code is not optimal...

As Bhuwan said, use this instead of static value given above if you don't know how many inputs you might get like this:

.box:nth-child(4n+1) {
     margin-left: 0%;
}

margin-right Codepen link: https://codepen.io/anon/pen/JMEvmE

margin-left codepen link: https://codepen.io/anon/pen/LexmaL

Upvotes: 1

Haroon R.
Haroon R.

Reputation: 302

Instead of adding a margin to the left of each element, add half the margin to each side (remove the .box + .box selector entirely):

.box {
    height: 300px;
    width: 23.5%;
    display: block;
    background: black;
    float: left;
    /* ADD HALF MARGIN ON EACH SIDE OF THE BOX */
    margin: 0 1%;
}

You will now have vertical alignment, but with an extra 1% pushed in on either side of the container. To rectify this, pull the container back out by 1% on the left and right:

#box_container {
    height: auto;
    width: 100%;
    /* PULL THE SIDES OUT BY 1% TO NEGATE BOX MARGINS */
    margin: 0 -1%;
}

This should achieve what you're trying to do, without needing to target a specific number of boxes per row.

Upvotes: 2

Bhuwan
Bhuwan

Reputation: 16855

You can try nth-child css pseudo selector to remove the margin-left.

.box:nth-child(4n+1) {
  margin-left: 0;
}


#box_container {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
}

.box {
  height: 100px;
  width: 23.5%;
  display: block;
  background: black;
  float: left;
  margin-bottom: 2%;
}

.box+.box {
  margin-left: 2%;
}

.box:nth-child(4n+1) {
  margin-left: 0;
}

body {
  margin: 0;
}
<ul id="box_container">
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>

Upvotes: 2

Malik Adil
Malik Adil

Reputation: 152

you can do like this 

<ul id="box_container">
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
</ul>

    #box_container {
        height: auto;
        width: 100%;
    }

    .box {
        height: 300px;
        width: 22.5%;
        display: block;
        background: black;
        float: left;
        margin-bottom: 2%;
    }

    .box + .box {
        margin-right: 2%;
    }

Upvotes: 1

Related Questions