Friday, March 13, 2015

Divs positioning

Today we ran into an interesting case of div within div positioning. Imagine you want to position child div within parent with some margin-top of the child div:


So the first solution was quite obvious:

<head>


<style type="text/css">
.Test
{
background-color: Black;
width: 1000px;
height: 250px;
margin-left: auto;
margin-right: auto;
}
.Test2
{
width: 1000px;
height: 25px;
background-color: Yellow;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}

</style>
</head>
<body>
<div class="Test">
<div class="Test2">
</div>
</div>
</body>

The ony thing was that this was putting a wrong result:


So a little trick was needed:


        .Test

        {

            background-color: Black;

            width: 1000px;

            height: 250px;

            margin-left: auto;

            margin-right: auto;

            /*try with or without this: display: table;*/

        }

Any ideas why?
Posted by at
Labels: ,

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)