Infokus: divs

Showing posts with label divs. Show all posts

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>

.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>

</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?