why div within div doesn't position well within

Question

<div id="progressbarr"> still did not wrap well within its ancestor div when I use margin-top :50%, and expecting it will be placed at the middle horizontally.

HTML box

css

#col3wrap{
    height: 50px;
    background: #DDD;
}

.profilepic {
    width: 50px;
    height: 50px;
    background: red;
    float: left;
    margin: 0 10px 0 0;
}

#progressbarr {
    float: left;
    width: 300px;
    height: 20px;
    background: #eee;
    margin: 50% 0 0 0;
}

#progressbarr > div {
    background-color: green;
    width: 40%;
    height: 20px;
}

http://jsfiddle.net/Xdwhk/

can you please revise your question.. I just could not get what are you trying to do. — HTTP, Sep 26 '13 at 02:04
Ulises Colen is trying to vertically centre the progress bar inside the container box. — 3dgoo, Sep 26 '13 at 02:10

score 0 · Accepted Answer · edited May 23 '17 at 12:05

Your margin value is calculated using the parent elements width. Why? Good question. I don't know but here is some discussion on the topic: Why are margin/padding percentages in CSS always calculated against width?

Here is your demo with the #col3wrap with a width set: http://jsfiddle.net/Xdwhk/1/

Try adjusting the width to see how the margin-top value changes with it.

So you're going to have to find a different method, other than using margin-top, to vertically centre your progress bar.

Here is one way, using position: relative and calc to set the top value:

CSS

#col3wrap{
    height: 50px;
    background: #DDD;
    position: relative;
}

.profilepic {
    width: 50px;
    height: 50px;
    background: red;
    float: left;
    margin: 0 10px 0 0;
}

#progressbarr {
    float: left;
    width: 300px;
    height: 20px;
    background: #eee;
    position: relative;
    top: 30%;
    top: -webkit-calc(50% - 10px);
    top: calc(50% - 10px);
}

#progressbarr > div {
    background-color: green;
    width: 40%;
    height: 20px;
}

Demo

Note calc is not supported by all browsers so we must have a fall back.

@UlisesColen - Well yes, because your items are floated and your parent div has a fixed height. When there is not enough width to fit your 2 elements side by side, the progressbar will drop below the profilepic. That is what float will do. If this is not what you want to happen, you could remove float from the progress bar, and give it a max-width so that it will reduce in size if it is too wide. Like this: http://jsfiddle.net/Xdwhk/4/ — 3dgoo, Sep 26 '13 at 02:51

why div within div doesn't position well within

1 Answers1