Auto margin?

Tanax · 09-27-2009, 05:23 PM

Hi!

I want to center some divs, and I recently learned about margin-left: auto; margin-right: auto; which worked great when i wanted to center my website!

However, it doesn't quite work here.. Possibly because I floated some things inside.

http://img136.imageshack.us/img136/4829/origz.jpg
http://img18.imageshack.us/img18/4469/orig2t.jpg

As you see, on the first picture it displays 4 products(there will always be a maximum of 3 products per row) on 2 rows. It looks pretty centered, because I matched the margins for specifically 3 products per line.

If you check the second picture, where only 2 products is displayed, it is not centered. And if there's only 1 product it's even less centered.

I want to somehow be able to center these based on nr of products on the line.

I've used a markup like this:

HTML Code:

<div id="main">
     <div id="products">

          <div class="product-line">
               <div class="product"><!-- Productinfo/img/price --></div>
               <div class="product"><!-- Productinfo/img/price --></div>
               <div class="product"><!-- Productinfo/img/price --></div>
          </div>

          <div class="product-line">
               <div class="product"><!-- Productinfo/img/price --></div>
          </div>

     </div>

     <div class="clear"></div>
</div>

CSS:

Code:

#products { padding: 10px; padding-bottom: 0; margin-bottom: 25px; margin-top: 15px; }
.product-line { margin-left: 35px; }
.product { border: 1px solid #000; float: left; width: 200px; margin: 0 10px 10px 0; padding-bottom: 5px; }
.clear { clear: both; }

As you see, I've written an exact margin-left on .product-line to match it with when it's 3 per row. I want this auto, but if I put margin-left: auto; and margin-right: auto; on .product-line it doesn't really work

Any help please?

adamdecaf · 09-27-2009, 05:33 PM

All content is natively floated left, this means that the 2 boxes will shift to the left. You could apply a special class that sets an absolute position when there are less than 3 items on a given line, or just let the content float left.

Tanax · 09-28-2009, 06:40 AM

Yes but, the 2 boxes are inside the .product-line which is not floated.. so if I'm able to center that, shouldn't the floated boxes inside be centered then aswell?

I tried absolute, but then all lines starts from the same origin(the first line) so they get all clumped up.

But I think I know how to solve this. I just set the margin-left on the .product-line based on how many products there is in the line. Requires some math, and code will be clunky, but whatever..

hjalmar · 09-30-2009, 08:57 AM

inline-block and some hacking for the browsers that doesn't support it maybe?

Tanax · 09-30-2009, 09:17 PM

Mm, yea.. I'm a complete newbie when it comes to CSS so how does inline-block work in this case?

hjalmar · 10-02-2009, 06:37 AM

Quote:

Originally Posted by Tanax

Mm, yea.. I'm a complete newbie when it comes to CSS so how does inline-block work in this case?

http://www.w3.org/TR/CSS2/visuren.html#propdef-display

"inline-block
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element. "

ETbyrne · 10-02-2009, 01:57 PM

is margin:auto; what you are looking for? Do note that margin:auto; requires that you set a width to the element.

Code:

.product-line{
    margin:auto;
    width:600px;
}

Also note that some browsers have issues with classes that include a dash in the name, so you should probably make the above:

Code:

.product_line{
    margin:auto;
    width:600px;
}

Just to be safe.

Tanax · 10-03-2009, 10:52 AM

Quote:

Originally Posted by hjalmar

http://www.w3.org/TR/CSS2/visuren.html#propdef-display

"inline-block
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element. "

Yes, but would I put that on .product ? And how will that cause them to center? o.O

Quote:

Originally Posted by ETbyrne

is margin:auto; what you are looking for? Do note that margin:auto; requires that you set a width to the element.

Code:

.product-line{
    margin:auto;
    width:600px;
}

Also note that some browsers have issues with classes that include a dash in the name, so you should probably make the above:

Code:

.product_line{
    margin:auto;
    width:600px;
}

Just to be safe.

I'll try it :)

hjalmar · 10-03-2009, 12:57 PM

Quote:

Originally Posted by Tanax

Yes, but would I put that on .product ? And how will that cause them to center? o.O

I'll try it :)

Since it flows like an inline element text-align: center; on it's parent would solve that.

Still as i said earlier comes with some quirks that you need to take into account, always easier to help with live example aswell.

Tanax · 10-04-2009, 03:33 PM

Quote:

Originally Posted by hjalmar

Since it flows like an inline element text-align: center; on it's parent would solve that.

Still as i said earlier comes with some quirks that you need to take into account, always easier to help with live example aswell.

This worked perfectly. Thanks alot!

Regarding underscore, I have quite alot of element with a dash in the name. If I get a complaint I'll change it to an underscore

Salathe · 10-04-2009, 08:26 PM

* Thread Cleaned *
Summary: claims were made that at least one older version of Opera does not like class names containing hyphens. No source was cited to back up that claim so take it with a pinch of salt and do your own research as always. Deleted posts were off-topic (ie. not dealing with Tanax's issue) and some broke our rules.

Please kindly continue the discussion on-topic, or not at all. Thank you.