CODEWITHSUNDEEP
htmlcsshtml-listscss-float
Mitch
Mitch

Reputation:

Floated List Margin in CSS

I have a div that is 320px wide. I'm floating list items to the left, each with a width of 100px. I then want to have a right margin of 10px to the right of each list item. All other margins and padding has been removed.

So, I basically want 3 list items per row before it goes onto the next line. But because there is a margin-right on the 3rd item (ie all items) it goes onto the next line (so only 2 items per line).

Is there a way to have 3 items per row in this instance, without creating extra classes or using scripts.

Upvotes: 4

Views: 1686

Answers (6)

wes
wes

Reputation: 1

With wordpress this can be done by adding a couple bits to the "wordpress loop"... solution here: http://wordpress.org/support/topic/368646

Upvotes: 0

Jason Berry
Jason Berry

Reputation: 2469

Here's an option that works in IE6 and up (possibly IE5+ - I haven't tested that).

Note that this will only work for 3 items. A 4th item will get the 10px left margin applied and a 6th item will be pushed to the next row at the moment. I'm sure someone smarter than me can figure it out.

I'm using expressions (which I guess are scripts - but may work for you) and conditional comments to get the first child in IE6. Enjoy:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Columns test</title>
    <style type="text/css" media="screen">
        #container {
            border: 1px solid red;
            width: 320px;
            overflow: hidden;
        }
        .column {
            margin-left: 10px;
            width: 100px;
            float: left;
            background: #ccc;
        }
        .column:first-child {
            margin-left: 0;
        }
    </style>
    <!--[if IE 6]>
    <style type="text/css" media="screen">
        .column {
            margin-left: expression((this===this.parentNode.childNodes[0])?"0":"10px");
            display: inline;
        }
    </style>
    <![endif]-->
</head>
<body>
    <div id="container">
        <div class="column">
            <p>Column 1</p>
        </div>
        <div class="column">
            <p>Column 2</p>
        </div>
        <div class="column">
            <p>Column 3</p>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Ben S
Ben S

Reputation: 69342

Using CSS3 selectors:

ul:nth-child(3n)   { margin-left: 0px; ... }
ul:nth-child(3n+1) { margin-left: 10px; ... }
ul:nth-child(3n+2) { margin-left: 10px; ... }

May not be practical due to lack of CSS3 support.

Upvotes: 4

Alan Haggai Alavi
Alan Haggai Alavi

Reputation: 74232

As far as I know, it is not possible without using classes to identify the last item in each row (which you can easily do if you generate the list using a scripting language). Else, you can divide the margin-left into 20px / 3 = 6px or increase the width of the <div> to 330px so that it would accomodate the extra margin.

Upvotes: 0

Zarel
Zarel

Reputation: 2201

Does your div have to be 320px wide? The simplest solution would be to make the div 330px wide. If its container is only 320px, you can use something like margin-right: -10px.

Upvotes: 2

xandy
xandy

Reputation: 27411

.divFloat { margin-left: 10px; ...}
.divFloat:First {margin-left: 0; ...}

If above not working, try to make the width to be 99px instead and be sure to remove any border of the divs. sometimes the browser may have some rounding or so problem that you can't really expect their behavior.

Upvotes: -2

Related Questions