Tips on preventing gaps between the initial div elements in each row

Question

Tips on preventing gaps between the initial div elements in each row

I have DIVs that are positioned next to each other, but only the fourth DIV is in the first row, while the others are shifted to the next row.

I want each first div in a row to not take up space from the left side, but this is not happening. Here is my code:

http://jsfiddle.net/25pwG/

I know I can achieve this by manually assigning a class to the new row DIV, but I prefer a solution with minimal CSS and without altering my markup.

NOTE: I need it to work on IE8 as well.

Thanks in advance :)

UPDATED:

http://jsfiddle.net/25pwG/8/

Firstly, the .parent div has a common class used in other sections as well. Secondly, according to the design, the parent DIVs should reach the last div of the row, leaving no space on the right side.

html css

Answer 1

Answer №1

Recommendation A:

Try adding margin-left:-16px to the parent element

See it in action: http://jsfiddle.net/25pwG/1/

Recommendation B:

Consider using margin-right: 16px on the inner divs instead of margin-left

See it in action: http://jsfiddle.net/25pwG/4/

Recommendation C:

If the width of the parent div is fixed, you may remove margin from every 4th child like this:

.feature:nth-child(4n){
    margin-right:0px;
}

See it in action: http://jsfiddle.net/25pwG/15/

Recommendation D:

Enclose your inner divs in a wrapper and make it wider than the parent div

See it in action: http://jsfiddle.net/25pwG/17/

Answer 2

Recommendation A:

Try adding margin-left:-16px to the parent element

See it in action: http://jsfiddle.net/25pwG/1/

Recommendation B:

Consider using margin-right: 16px on the inner divs instead of margin-left

See it in action: http://jsfiddle.net/25pwG/4/

Recommendation C:

If the width of the parent div is fixed, you may remove margin from every 4th child like this:

.feature:nth-child(4n){
    margin-right:0px;
}

See it in action: http://jsfiddle.net/25pwG/15/

Recommendation D:

Enclose your inner divs in a wrapper and make it wider than the parent div

See it in action: http://jsfiddle.net/25pwG/17/

Answer 3

Answer №2

Avoid using negative margin and padding. It's better to utilize the margin-right:16px rule in the feature class and eliminate the .feature + .feature class.

Therefore, your css should look like this:

.parent{
    width:480px;
}
.feature{
    width:100px;
    height:100px;
    background:red;
    display:inline-block;  
    margin-bottom:10px;
    margin-right:16px;
}

Check out the example here: http://jsfiddle.net/25pwG/7/

Answer 4

Avoid using negative margin and padding. It's better to utilize the margin-right:16px rule in the feature class and eliminate the .feature + .feature class.

Therefore, your css should look like this:

.parent{
    width:480px;
}
.feature{
    width:100px;
    height:100px;
    background:red;
    display:inline-block;  
    margin-bottom:10px;
    margin-right:16px;
}

Check out the example here: http://jsfiddle.net/25pwG/7/

Answer 5

Answer №3

.container{
    width:480px;
    text-align: center;
}
.box{
    width:100px;
    height:100px;
    background:red;
    display:inline-block;  
    margin:0 6px 10px;
}

Consider this alternative approach. Negative values could potentially lead to complications down the line. It's best to steer clear of them if possible.

Answer 6

.container{
    width:480px;
    text-align: center;
}
.box{
    width:100px;
    height:100px;
    background:red;
    display:inline-block;  
    margin:0 6px 10px;
}

Consider this alternative approach. Negative values could potentially lead to complications down the line. It's best to steer clear of them if possible.

Answer 7

Answer №4

In order to make the adjustment, all you need to do is switch from

.feature + .feature { margin-left:16px; } /*This line can be removed*/

to

.feature { margin-right:16px; }

Answer 8

In order to make the adjustment, all you need to do is switch from

.feature + .feature { margin-left:16px; } /*This line can be removed*/

to

.feature { margin-right:16px; }

Tips on preventing gaps between the initial div elements in each row

http://jsfiddle.net/25pwG/

http://jsfiddle.net/25pwG/8/

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When using JQuery Validation on a small screen, error messages can cause the button to shift downwards

Ways to manipulate the content of a div

Customizing the background color in Bootstrap 4 without impacting the container

``When the screen size is reduced, the Bootstrap columns will resize and appear next to

The footer of the website remains separate from the overlay of the modal Popup Form

What's the best way to make sure my table fits perfectly within its container's width?

Generate a spider's web beneath an hour element using CSS

When the user clicks the back button in AngularJS

When using React, the page loads and triggers all onClick events simultaneously, but when clicking on a button, no action is taken

What is the method of aligning content to the left side in a slick slider?

Swapping data between two HTML files and PHP

Content is not properly fitting in the Bootstrap modal window

Displaying information from a database in HTML dropdown menus and tables

Angular causing WKWebview to freeze

Achieve vertical centering of items without relying on absolute positioning or flexbox

A guide on retrieving values from programmatically created input elements in Java

How to make an image expand to fit the screen when clicked using HTML and CSS

How come my ejs files are all affected by the same stylesheet?

Tips for inserting text into the description field on Shopify using Python Selenium

Expanding an element to cover all columns in a grid with automatically generated columns