Center float container without width

Question

I have this HTML:

<div id="container">
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
</div>

and this CSS:

#container {
    overflow: hidden
}

article {
    float:left;
    height: 200px;
    width: 200px;
    background-color: red;
    margin: 5px;
}

I want to center the #container without specifying a width. Is it possible?
Here is the Fiddle.

Edit: I need the width of the #container to change to fit the articles. If the body is 450px width then there will be two articles per row, so the width of the container should be 400px aprox. If the body is 1100px width then ther will be five articles per row, so the width of the container should be 1000px aprox.

Something like this: [jsfiddle](http://jsfiddle.net/eSCQ5/9/)? — sooper, Dec 21 '12 at 23:22
@sooper, those have `width`... didn't the OP ask for something without a specific width? — Sparky, Dec 21 '12 at 23:23
I think he only wants `#container` to not have a defined width, right? — sooper, Dec 21 '12 at 23:24
On second thought, the question doesn't even make sense. If the width of the contents are known, why would he need to _"not specify a width"_? Does he want them all stacked up (200px)? Does he want them two wide (400px)? What? — Sparky, Dec 21 '12 at 23:28
you mean you want the contents inside `#container` centered ? — Amyth, Dec 21 '12 at 23:28
Who knows? If he wanted the contents centered, he'd know the width. — Sparky, Dec 21 '12 at 23:29
@sooper yes! like that! but is it possible to keep the `float: left`? I need it to use [masonry](http://masonry.desandro.com/) — pomber, Dec 21 '12 at 23:31
If you want the `article` elements to be aligned to the left, then what's the point in centring `#container` without a width? If you want them on the left you'd add `text-align:left` to `#container` but then you're back to square one. — sooper, Dec 21 '12 at 23:34
Yeah, what @sooper said... and now this really makes no sense. — Sparky, Dec 21 '12 at 23:34
Sorry if I'm explaining it bad. I need the #container to be centered in the body and the articles floated in the #container — pomber, Dec 21 '12 at 23:41
*sigh*.. can you draw us a picture? Why would it matter if `#container` is centred since you're not defining a width? Even if you make it an `inline-block` you would get the same result. In order for the `article` elements to appear as if they're aligned to the left, then you need to give `#container` a width. — sooper, Dec 21 '12 at 23:45
@pomber, that clears up nothing. The code you posted is already doing what you're asking about. The container is in the center, full **width** of window, but still in the center. See why you're not making sense? — Sparky, Dec 21 '12 at 23:45
Because without a specific container width, the contents simply fill the whole container to 100% of the body. So what do you really want? — Sparky, Dec 21 '12 at 23:49
I need the width of the #container to change to fit the articles. If the body is 450px width then there will be two articles per row, so the width of the container should be 400px aprox. If the body is 1100px width then ther will be five articles per row, so the width of the container should be 1000px aprox. — pomber, Dec 21 '12 at 23:56
Is it clear now? Forgive me, neither English nor HTML are my first language — pomber, Dec 22 '12 at 00:04
then put `width: 90%; text-align:left;` in `#container`. I updated my answer. — sooper, Dec 22 '12 at 00:10
what about when the body is 400px width? there should be two articles per row, and the #container should be 400px width — pomber, Dec 22 '12 at 00:14
@pomber: please update the question with the requested information. In general, respond to requests for clarifications by updating your post rather than replying with a comment. For one thing, a question should be understandable without reading comments. For another, SO is a Q&A site, not a forum, and comments aren't intended (nor are they well suited) for discussions. — outis, Dec 22 '12 at 22:14
possible duplicate of [Shrink-wrap and center a container for inline-block elements](http://stackoverflow.com/questions/8684793/shrink-wrap-and-center-a-container-for-inline-block-elements) — outis, Dec 22 '12 at 22:25

sooper · Answer 1 · 2012-12-22T00:12:19.707

4

You could try something like this (jsfiddle):

HTML:

<html>
    <body>
        <div id="container">
            <article></article>
            <article></article>
            <article></article>
            <article></article>
            <article></article>
        </div>
    </body>
</html>

CSS:

html, body { margin: 0; padding: 0; }
body { text-align: center; }

#container {
    overflow: hidden;
    margin: 0 auto;
    width: 90%;
    text-align: left;
}

article {
    display:inline-block;
    height: 200px;
    width: 200px;
    background-color: red;
    margin: 5px;
}

edited Dec 22 '12 at 00:12

answered Dec 21 '12 at 23:29

sooper

5,991
6
40
65

1

This is a very good answer, if that's what he wants. It's not yet clear. – Sparky Dec 21 '12 at 23:30
+1 for dealing with a non-sense question with a sensible answer. – Sparky Dec 21 '12 at 23:35

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

update 2015

I noticed there was a slight issue with the previous set-up. In that keeping the articles within the first placeholder doubled up the margins. This led to slight inconsistencies when resizing the page across each article wrap point.

This updated fiddle gets rid of those issues:

http://jsfiddle.net/C4fbX/4/

However, this kind of layout could very likely be achieved in a nicer way with Flexbox these days.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered 2012

The following method works, however it is a little mad. It's rather annoying that this isn't something that CSS can handle easily:

fiddle

http://jsfiddle.net/C4fbX/

method

This method works on the basic idea posted by Nick, and uses this method to then position a left floating system... which fixes the problem where you always end up with center aligned elements within the centered container.

So instead of:

[][][][]
  [][]

You get:

[][][][]
[][]

The following stipulations are required:

You need to include as many placeholder elements as you have articles. The method uses these to calculate where to indent the articles from. This also means that the width and horizontal margin/padding of the placeholder elements has to match that of the articles.
The articles need to be placed within the first placeholder.
In order to get around the whitespace issue with regard to inline-block, the font-size and line-height are zeroed out, which means they have to be manually set again for the articles. You can get around this by removing these zeroed attributes from the css and just making sure your placeholder markup doesn't have any whitespace.
I very much doubt this will work in older browsers - but seems to in the current modern ones.
Relying on position absolute means that your articles wont take up their usual space in the document, so you'd have to account for this in your design or set a fixed height on your #container element

mark up

<div class="container">
  <div class="placeholder">
    <div class="position">
      <article>a</article>
      <article>b</article>
      <article>c</article>    
      <article>d</article>
      <article>e</article>
    </div>
  </div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
</div>

css

.container {
  font-size: 0;
  line-height: 0;
  text-align: center;
}

.placeholder {
  display: inline-block;
  width: 200px;
  margin-left: 5px;
  margin-right: 5px;
  height: 0px;
}

.position {
  position: absolute;
}

article {
 font-size: 12pt;
 line-height: 1.2em;
 float: left;
 margin: 5px;
 width: 200px;
 height: 100px;
 background: red;    
}

Flex box also can't do this :( invisible placeholder divs with 0 height need to be appended — Ujjwal Singh, Dec 24 '15 at 19:15

score 1 · Answer 3 · answered Dec 22 '12 at 00:39

1

Do you mean centre the articles within the container, whilst allowing them still to wrap? In which case (jsfiddle):

#container {
    text-align: center;
}

article {
    display:inline-block;
    height: 200px;
    width: 200px;
    background-color: red;
    margin: 5px;
}

answered Dec 22 '12 at 00:39

Nick

111
2

With this approach you'll need to warn about `inline-block` taking into account surrounding whitespace around the article elements (which causes unwanted margins). +1 though as this is pretty much the best you can achieve with regards to what the OP is asking... unless you possibly look at using flexbox. You do end up with centered articles too though, annoyingy, rather than having them left aligned. – Pebbl Dec 22 '12 at 00:51

score 1 · Accepted Answer · answered Dec 31 '12 at 02:52

After considering several options, I found that using media queries is the simpler way to do it.

In this case it will be something like this:

@media (max-width: 420px) {
    #container {
        width: 210px;
    }
}

@media (min-width: 420px) and (max-width: 630px) {
    #container {
        width: 420px;
    }
}

@media (min-width: 630px){
    #container {
        width: 630px;
    }
}

Here is the fiddle.

score 0 · Answer 5 · edited Dec 21 '12 at 23:40

0

Take out float: left; and add margin:auto;

edited Dec 21 '12 at 23:40

Aviram Segal

10,962
3
39
52

answered Dec 21 '12 at 23:22

JeremiahBarrar

140
5

Center float container without width

5 Answers5

update 2015

answered 2012

fiddle

method