0

I know it's a super-basic question, but I'm not able to find a solution. I have 2 div and I would like to display them as blocks (one below the other) without having 100% width. Here's my code.

HTML

<div id="container">
    <div class="test">one</div>
    <div class="test">two</div>
</div>

CSS

.test {
    display:inline-block;
    clear: both;
    border:1px solid;
}

#container {
    clear:both;
    text-align:center;
}

Unfortunately this answer doesn't fit to me, since I need to center blocks horizontally (so float cannot be applied in my case). Here's the fiddle. Thanks in advance.

Community
  • 1
  • 1
Giorgio
  • 1,940
  • 5
  • 39
  • 64
  • I don't see why you're using `clear:both` in your CSS since nothing is floated. Plus, wouldn't a simple `
    ` between your divs do what you want?     – j08691 Mar 17 '14 at 13:36
  • You're right @j08691, `clear:both` is from the answer I cited. As first choise, I would like to avoid adding extra html (like `
    `) but style everything with CSS.     – Giorgio Mar 17 '14 at 13:38
  • 1
    http://jsfiddle.net/b8LuQ/4/ and
    isn't really centered ^^     – ReeCube Mar 17 '14 at 13:40
  • 2
    @ReeCube - You have white space in your code that is factored into the centering. Remove it and you'll see that it centers. – j08691 Mar 17 '14 at 13:41
  • @j08691 ah you're right, ok then i think it's a good solution :) – ReeCube Mar 17 '14 at 13:46

4 Answers4

4

to center them on top of each other without taking 100% width and still use margin:auto; use : display:table;

.test {
display:table;
margin:auto;
border:solid;/* to see it */
}
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • 1
    The only drawback with this approach is compatibility with older versions of IE. – j08691 Mar 17 '14 at 13:50
  • I think you got it, @GCyrillus! That's what I was looking for. Nice note also from @j08691 but as stated in this [compatibility page](http://caniuse.com/css-table), the proposed syntax is compatible with IE8, which is my goal. Thanks! – Giorgio Mar 17 '14 at 13:59
1

You can specify the width of the divs, change display to block, and use margin: 0 auto to center them.

JSFiddle

thosetinydreams
  • 980
  • 1
  • 13
  • 22
0

You can also center the div by adding 50% left offset, and then negative margin in amount to half width of the div. I do not know how much is this applicable to your case, but here is an example:

.test {
    position: relative;
    border:1px solid;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}

You can see it in action here: http://jsfiddle.net/b8LuQ/7/

dkasipovic
  • 5,930
  • 1
  • 19
  • 25
  • This can be a way, but I don't want to declare fixed widths. Divs should adapt to their contents. – Giorgio Mar 17 '14 at 13:47
0

display:inline-block; is not allow the second line. Therefore I removed it and define width for both div test one two you can resize it and margin:auto is align center the both div in container here is an example

Ayaz Shah
  • 435
  • 1
  • 5
  • 24