0

How I want it to look: https://i.stack.imgur.com/LgfnJ.png

Please note: Setting a fixed width is not useful here, because that would prevent the boxes from using all available screen space. I need the boxes to stay responsive, but want them to appear centered.

The problem is not so much the centering of the element, but the fact that the element takes up 100% width when it doesn't need to.

I have a container with several boxes, which are set to float.

<div id="contentBox">
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
</div>

http://jsfiddle.net/56BJP/

The container div takes up 100% width, even if it doesn't require it all, so I can't get it centered with margin: 0 auto.

How do I get the container to not needlessly take up 100% width?

user3653087
  • 70
  • 1
  • 8
  • possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) – pstenstrm May 20 '14 at 16:34
  • Note you must clear after floating elements. And in this case it seems you don't need floating nor positioned elements. – Oriol May 20 '14 at 16:39

7 Answers7

3

Add a width to your div and center :

<div id="contentBox" style="width:500px;margin:0 auto">
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
</div>

In your fiddle , you should add width to your class :

#contentBox
{
    position: relative;
    margin: 0 auto;
    width:50%;//fixe a width
}

DEMO HERE

Charaf JRA
  • 8,249
  • 1
  • 34
  • 44
  • If you look at the layout, it's implied that the boxes are supposed to be responsive, so setting a fixed width for the container is no solution here. I clarified that in the question. – user3653087 May 21 '14 at 09:03
  • You can fixe a width using% instead of pixels , this way width will depend on the width of your screen – Charaf JRA May 21 '14 at 09:24
  • There's still empty horizontal space in the container, depending on the screen size, so the boxes don't appear centered. – user3653087 May 21 '14 at 09:34
1

Alternatively, if you do not want to set the width of the container div explicitly, you can remove float: left; from a and set the container's display to table.

Like this http://jsfiddle.net/56BJP/2/

#contentBox
{
    position: relative;
    margin: 0 auto;
    display: table;
}

a.content
{
    position: relative;
    display: block;
    width: 310px;
    height: 174px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #000 no-repeat;
    background-size: 100% 100%;
}
Yogesh Mangaj
  • 3,200
  • 6
  • 32
  • 45
1

You need fix width for margin to get worked. More importantly you always need to clear floated elements with clearfix:

<div id="contentBox">
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <div class="clear"></div> <!-- clear float elements -->
</div>

CSS

#contentBox {
  width: 300px;
  margin: 0 auto;
}

.clear{
    clear:both;
}

Demo

Dhaval Marthak
  • 17,246
  • 6
  • 46
  • 68
1

You don't need to set a width for that element to shrink to fit it's content. You can simply add the CSS display: inline-block; and it will shrink to the right size. Additionally, you can do the same with the child blocks, removing the need to float the elements in the first place.

Matthew R.
  • 4,332
  • 1
  • 24
  • 39
  • The container also needs "text-align:center", then it works! Thank you. It does add spaces at newlines though, but for now it's the best solution. – user3653087 May 21 '14 at 10:39
0
#contentBox {
  width: 300px;
  margin: 0 auto;
}

http://jsfiddle.net/56BJP/4/

gomflo
  • 171
  • 5
0

If #contentBox doesn't have a fixed width, you can add margin: 0 auto to a.content, which do have it. Then, just use

a.content {
    display: block;
    width: 310px;
    height: 174px;
    margin: 0 auto;
}

Demo

Oriol
  • 274,082
  • 63
  • 437
  • 513
0

try using the css

#contentBox {
  width: 500px;
  margin: 0 auto;  }

only because inline styling's have been deprecated in modern browers

Sam Denton
  • 465
  • 3
  • 18