CSS rounded corners div, footer placement position with "absolute"

Question

I'm trying to create rounded corners with a header and a footer. I was able to force the header to be on top, but I don't understand why I can't force to footer to be at the bottom.

In fact, position absolute; bottom:0; does that but my footer in only the lenght of the text. When I add width:100%;, the footer becomes larger then the ???

Here you can see my code: http://jsfiddle.net/fleduc/GN9q5/

Ana · Answer 1 · 2012-05-25T16:18:01.090

You set left: 0 and right: 0, not width: 100%; - see test http://jsfiddle.net/thebabydino/GN9q5/3/

You might also want to read this http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

It's true that you have absolute positioning here and width: auto won't do the trick in this case, but you have to understand that width: 100% means the width of the container without paddings and borders (unless you use box-sizing: border-box)

score 1 · Answer 2 · answered May 25 '12 at 16:09

1

You have specified the div's width in px, so can you just specify the footer's width in px? Example: http://jsfiddle.net/GN9q5/4/

answered May 25 '12 at 16:09

Grezzo

2,220
2
22
39

Ignore my answer, Ana got the best solution. – Grezzo May 25 '12 at 16:16

score 1 · Answer 3 · answered May 25 '12 at 16:10

Only change this css and it is gonna work ;-)

.rcs .ftr {                        
        margin:110px 0 0 0; 
        font-size:1.2em; 
        padding:5px 0px 5px 10px;        
        border-bottom-left-radius: 0.35em;
        border-bottom-right-radius: 0.35em;
        border-top:1px solid #AAAAAA;
    }

See the test http://jsfiddle.net/GN9q5/5/

score 0 · Answer 4 · answered May 25 '12 at 15:59

0

Absolutely-positioned elements are no longer part of the layout. They have no idea how big the parent element is, so you have to set the width to a static value.

answered May 25 '12 at 15:59

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 5 · answered May 25 '12 at 16:03

0

You must set your width with a absolute value and calculate the padding.

For exemple:

If you have a width of 960px and a padding of "5px", your with must be 950px.

You SHOULD remove it for reason that I don't exactly know.

answered May 25 '12 at 16:03

Frederick Marcoux

2,195
1
26
57

score 0 · Answer 6 · edited May 23 '17 at 11:49

/*footer*/
.rcs .ftr {                        
    margin:0; 
    font-size:1.2em; 
    padding:5px 5px 5px 10px;
    position: absolute; 
    bottom: 0px;
    width: 385px;          
  border-bottom-left-radius: 0.35em;
  border-bottom-right-radius: 0.35em;
    border-top:1px solid #AAAAAA;
}

You have the container width set to 400px. Left & right padding = 15px, so subtract that and set your width at 385px.

More info: absolute vs relative position width & height

Also, make sure to close all of your declarations.

CSS rounded corners div, footer placement position with "absolute"

6 Answers6