CODEWITHSUNDEEP
htmlcss
sandeep
sandeep

Reputation: 92813

How to avoid spacing from the first div of each row

I have DIVs which comes side by side of each other & but there only fourth DIV comes in the first row & other are shifted too the next row.

I want each row first div take no space from left side but is not happened. Here is my code

http://jsfiddle.net/25pwG/

I know i can do it with giving class manual to the new row DIV but i didn't want that. i want this with less css & i didn't want to change my markup

NOTE: i want capability till IE8.

Thanks in advance :)

UPDATED:

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

First the .parent div is a common class which is used in other section also & second thing according to the design the parent DIVs touch the row last div so, there is no space from the right side.

Upvotes: 3

Views: 150

Answers (4)

user920041
user920041

Reputation:

Suggestion A:

Add margin-left:-16px to parent

Demo: http://jsfiddle.net/25pwG/1/

Suggestion B:

Use margin-right: 16px on the inner divs, instead of margin-left

Demo: http://jsfiddle.net/25pwG/4/

Suggestion C:

If the parent div width is fixed, you can remove margin on every 4th child like this: 

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

Demo: http://jsfiddle.net/25pwG/15/

Suggestion d:

Wrap your inner divs in a wrapper, and set this to be wider that the parent div

Demo: http://jsfiddle.net/25pwG/17/

Upvotes: 5

Beatriz Oliveira
Beatriz Oliveira

Reputation: 659

It's quite simple, just change from

.feature + .feature { margin-left:16px; } /*Remove this*/

to

.feature { margin-right:16px; }

Upvotes: 0

Avenson Robles Navalta
Avenson Robles Navalta

Reputation: 57

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

I suggest trying this one. Using a negative value might cause some problems later on. So as much as possible avoid using it.

Upvotes: 0

Rohan Patil
Rohan Patil

Reputation: 2348

Avoid using negative margin and padding. In feature class use margin-right:16px and remove .feature + .feature class.

so your css will be

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

See this http://jsfiddle.net/25pwG/7/

Upvotes: 1

Related Questions