margin top to div inside another div

Question

I have two divs which have background images and I would like to add margin to the the 2nd div but it is creating white space.

How can I add a top margin while keeping the div inside the other div?

<div class="background">
    <div class="logo">
    </div> 
</div>

.logo {
   background-image: url(image/logo2.png);
   height:40px;
   width:400px;
   margin-left:100px;
   display:block;
   margin-top:20px;
}

.background {
   background-image: url(image/empback.png);
   width:100%;
   height:94px;
   min-width:1345px;
}

You should take a look at `Mr.Alien's` answer. – Roko C. Buljan Aug 21 '13 at 05:45 — Roko C. Buljan, Aug 21 '13 at 05:45

score 12 · Answer 1 · edited May 23 '17 at 10:29

12

You can use overflow: auto on the parent element

.background{
    background: #f00;
    width:100%;
    height:94px;
    min-width:1345px;
    overflow: auto;
}

Demo

Just got a link to share which is related to this issue.

Also, a better approach towards this is instead of using position: absolute; you should use position: relative; with top, left, right and bottom properties, which will not only keep the element in float, it will also save you from positioning other elements in the same block.

Demo 2

edited May 23 '17 at 10:29

Community

1
1

answered Aug 21 '13 at 05:19

Mr. Alien

153,751
34
298
278

@RokoC.Buljan Would love to see if this has any bad side, I usually go for relative absolute thing, but this solution works as well... – Mr. Alien Aug 21 '13 at 05:41
2

you got +1 from me, setting a position absolute to a child in not always desirable. Good catch – Roko C. Buljan Aug 21 '13 at 05:42
@RokoC.Buljan yes, than if your parent element has multiple elements,if you set 1 to absolute, you need to set other as well or use explicit margins and paddings or floats, and anyways thanks :) – Mr. Alien Aug 21 '13 at 05:43
1

Exactly, setting overflow to `auto` does absolutely nothing bad. Actually now, thinking a bit more about it this should be the accepted answer. – Roko C. Buljan Aug 21 '13 at 05:44
1

@Mr.Alien upset on your behalf for the downvote, +1 my friend :) – Ian Clark Jun 03 '14 at 16:23

score 5 · Accepted Answer · answered Aug 21 '13 at 05:17

You can make a use of css position property here.

Sample Code

<div class="background">
    <div class="logo">
    </div> 
</div>

.logo
{
    background-image: url(image/logo2.png);
    height:40px;
    width:400px;
    margin-left:100px;
    display:block;
    position:absolute;
    top:20px;
}

.background
{
    background-image: url(image/empback.png);
    width:100%;
    height:94px;
    min-width:1345px;
    position:relative;
}

remove margin-top:20px; and add position and top property for .logo.

score 2 · Answer 3 · edited May 26 '18 at 17:21

Just Go through the code.

By just changing position and top value we can get the result.

.logo{
    position: relative;
    top: 10px;
    background-color: black;
    height: 40px;
    width: 400px;
    margin-left: 100px;
    display: block;
    margin-top: 20px;
}

.background{
     position: absolute;
     background-color: green;
     width: 100%;
     top: 50px;
     height: 94px;
     min-width: 1345px;
}

score 1 · Answer 4 · answered Oct 12 '18 at 15:16

1

How about not changing position and still get desired result?

Add this line to background class:

.background{
    border-top: 1px solid transparent;
}

answered Oct 12 '18 at 15:16

Johny Gates

75
1
9

margin top to div inside another div

4 Answers4