CODEWITHSUNDEEP
htmlcsscss-position
Omer Aviv
Omer Aviv

Reputation: 284

Placing a div below another absolute div

I'm trying to make some header for my website and another div below it, to contain a colored rectangle. Is it possible? I tried it like this so far, but no luck:

    .logo {
      width: 100%;
      left: 0%;
      right: 0%;
      position: absolute;
    }
<div class="logo" onclick="location.href='<%= DefaultPath %>'" style="height:15%; top:0%; background-image:url('<%= LogoPath %>'); background-size: 100% 100%; background-repeat:no-repeat">
</div>
<div style="padding:0%">123</div>

The div that contains "123" should be below the header div. How can I do this?

Upvotes: 0

Views: 4444

Answers (3)

Doml The-Bread
Doml The-Bread

Reputation: 1771

First of all you should not use so much inline styles. rather use it within a css class (like you did for some code in .logo)

you could use something like this to achieve your positioning: 

.header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background-color: grey;
    background-image: url('');
    background-position: center center; 
    background-size: 100% 100%;
}
.numbers {
    margin-top: 50px;
    height: 100px;
    background-color: blue;
    width: 100%;
}

and the html is simply this: 

<div class="header"></div>
<div class="numbers">123</div>

you would simply place your relative container with a margin-top with the height of your absolute container

i don't really like those absolute px solutions with margins. if this header should always look like this ( with the triangle and the numbers etc) i would suggest to wrap those two containers into one absolute container and position them both relative like you can find here: 

.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.header {
    display: block;
    height: 50px;
    width: 100%;
    background-color: grey;
}
.numbers {
    height: 100px;
    background-color: blue;
    width: 100%;
}
<div class="wrapper">
    <div class="header"></div>
    <div class="numbers">123</div>
</div>

Upvotes: 2

Tony Gustafsson
Tony Gustafsson

Reputation: 888

Not easy to fix... if you set something absolutely, like you logo there, you break it out of the document flow. Hence, the rest of the page won't care where it is and cannot place itself next to it. It will just be under or over it.

You could detect the position of the logo with javascript and place the other one next to it if it too is aboslute.

I THINK you want to set the logo to position: fixed instead, and add margin-top to the body, so that it always starts where the logo ends. That way the logo would always be on top and follow you when you scroll, and the body wont be covered by the logo.

Upvotes: 0

Tim Bunch
Tim Bunch

Reputation: 86

The div below, in this scenario, would need the have a margin-top value equal to the height of the absolute positioned div.

<div class="logo" onclick="location.href='<%= DefaultPath %>'" style="height:100px; top:0%; background-image:url('<%= LogoPath %>'); background-size: 100% 100%; background-repeat:no-repeat">

123

Upvotes: 0

Related Questions