CODEWITHSUNDEEP
csstwitter-bootstrap
JanDotNet
JanDotNet

Reputation: 4016

Why does the css positioning not work as expected

Regarding to the positioning section of w3schools.com or that SO question, it should be possible to align a div element on bottom by applying the following rules:

Please find example code in the following bootply.

.container-btn is the green box that should be placed on buttom, but instead it is placed 10px above the container element. However the settings top/left/right: 10px work as expected.

Could anybody explain that behavior? I am just learning CSS and want understand why it behaves that way...

Upvotes: 0

Views: 67

Answers (1)

clmarquart
clmarquart

Reputation: 4711

The container-btn is actually 10px from the bottom of it's parent, col-md-4, it just happens that the parent doesn't have any height. Giving that column a height like the other, for example, .col-md-4 { height: 500px; } you will see the green box move down as you'd expect.

Upvotes: 2

Related Questions