0

Here is the failed jsfiddle link. I want to have the buttonCenter div located in the black box in the following image:

enter image description here

How do I have to change the css class for buttonCenter:

#buttonCenter {
    width: 250px;
    height: 100px;
    margin-right:auto;
    margin-left:auto;
    margin-top:100px;
    background-color:gray;
}

Thanks in advance,

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
xkcd
  • 2,538
  • 11
  • 59
  • 96

1 Answers1

4

You will need position: relative; and add z-index (Just for a safer side) as well.. 

#buttonCenter {
    width: 250px;
    height: 100px;
    margin-right:auto;
    margin-left:auto;
    margin-top:100px;
    background-color:gray;
    border: 1px solid #000;
    z-index: 1;
    position: relative;
}

Demo

Though would like to tell you that the positioning is just weird, you are floating the elements for no good reasons.

For example, you are applying float: left; for #row1, #row2 and #buttonsContainer which isn't required as they take up entire horizontal space.

Don't use id to identify each element, better use classes, so that you can share a common class between elements holding common styles, because you cannot use same id on a single document, they should be unique.

Also, you are using huge margins, consider using position: absolute; instead

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • @anilca You welcome, and if you are looking to get rid of unnecessary floats, than make sure you clear them using `clear: both;`, especially the `#buttonsContainer` container holding floated elements, read my answer [here](http://stackoverflow.com/questions/12871710/why-clear-both-css), to know why that's necessary – Mr. Alien Mar 03 '14 at 08:40