CODEWITHSUNDEEP
htmlcsscss-floatcss-position
xkcd
xkcd

Reputation: 2590

Div positioning - Css

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,

Upvotes: 0

Views: 73

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157284

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

Upvotes: 4

Related Questions