ansaurus

Question

Answer 1

A:

.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.

xandy 2009-07-10 01:41:56

Not supported by IE 6, if that matters.

Ben S 2009-07-10 01:45:31

That will only work if he only has one row. Otherwise, you need to do something like "every third div has margin-left:0", and CSS isn't complicated enough for that.

Zarel 2009-07-10 01:46:34

I have never heard of the pseudo-class :First. Are you thinking of :first-child perhaps? Even though, that won't mean "first of every line", and it won't work in IE6.

deceze 2009-07-10 01:46:39

right, I forgot about that.

xandy 2009-07-10 02:48:34

Answer 2

+2 A:

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.

Zarel 2009-07-10 01:45:48

I agree, easiest if he expands container by 10px then does a negative margin like you said

Darko Z 2009-07-10 05:08:21

Answer 3

A:

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.

Alan Haggai Alavi 2009-07-10 01:46:03

Answer 4

+2 A:

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.

Ben S 2009-07-10 01:51:09

Note that this is not supported by Firefox 3 or IE 7. It's only supported by Webkit-based browsers (Safari/Chrome) and Opera. It's otherwise a pretty clever solution.

Zarel 2009-07-10 01:55:19

Firefox 3.5 supports this as well. IE does not support at any version.

Ben S 2009-07-10 01:56:43

Answer 5

A:

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"&gt;
<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>

Jason Berry 2009-07-10 02:15:28

Read more carefully: There's more than one row. Add "Column 4" and you'll see why your code doesn't work.

Zarel 2009-07-10 02:22:38

Yep, I'm aware of that. See my edit.

Jason Berry 2009-07-10 02:23:51

At the time you posted your answer, my answer already supplied a pragmatic cross-browser solution, and Ben S supplied a "more beautiful" solution that requires a CSS3-compliant browser, both of which work for more than 3 items.

Zarel 2009-07-10 02:30:44

I have run into problems with negative margins in IE6 (such as borders disappearing when the container is the limit), and Ben S's answer isn't plausible on the majority of browsers out there in the wild. Of course I'd prefer a simpler, more-beautiful answer, but sometimes that isn't possible given existing constraints. I proposed an alternative should he not be able to use the "more-beautiful" options.

Jason Berry 2009-07-10 02:49:54

Answer 6

A:

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

wes 2010-07-11 15:02:20

ansaurus

tags:

views:

answers:

Floated List Margin in CSS

related questions