CODEWITHSUNDEEP
css
Kalanamith
Kalanamith

Reputation: 20648

How to top align a div inside another div

enter image description here

Hi

I want to place the div2 top align with the div1's border

So far I have tried this for div 2 but it did not work out well

element.style {
    float: right;
    position: relative;
    vertical-align: top;
}

this did not align the div at top position , what could be the fix to make it top aligned?

Upvotes: 3

Views: 14604

Answers (6)

Dbertovi
Dbertovi

Reputation: 51

Set your top div inside another div with sticky. Like:

.div2 {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}

It should be placed as your div2 in your div1 element in which you have (for example) overflow-y: scroll on a set height (and bellow content to be vertically scrolled).

Upvotes: 1

Matias
Matias

Reputation: 641

I would achieve this using position: absolute; on the child like said before, but instead of adding an additional div to the DOM to simulate use the space , I would use a pseudo-element (more precisely, the ::before pseudo-element).

This is the structure I used for it:

<div class="parent">
    <div class="child">

    </div>
    <h1>Start</h1>
</div>

The div with class parent needs to be position: relative;, and the child needs to be absolute to it and set to be top: 0; like the following lines explain:

.child {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    background-color: #000;
}

You will though need to set this element a fixed height and width, otherwise it will not work.

The problem of this approach is that you will have a div that will be over the first 100px of your .parent div.

To solve this we need to create a pseudo-element on the .parent div that will simulate that space and make everything work better:

.parent:before {
    display: block;
    content: ' ';
    width: 100%;
    height: 100px;
}

Here's a working fiddle with a sample code, hope this helps you!

http://jsfiddle.net/m54rxwjv/2/

PS: This will only work if you know that the height will always be 100px.

Upvotes: 3

jimish
jimish

Reputation: 684

As per Vipul's answer, I have create code snipped on jsfiddle for same behaviour:

http://jsfiddle.net/zo6jdp4b/1/

I have put one extra div on the top also so that one do not have any issue in child Div css:

.childDiv{
border: 1px solid blue;
height: 10px;
width: 30px;
position:absolute;
top: 0px;

}

Upvotes: 1

Duc Nguyen
Duc Nguyen

Reputation: 474

.div1{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:relative;
}

.div2{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:relative;
top:0;
left:0;
}

div2 always at the top

Upvotes: 0

Felix A J
Felix A J

Reputation: 6480

.div1{
box-sizing: border-box;
  border: 3px solid red;
  height: 150px;     
  width: 30px;
}
.div2{
box-sizing: border-box;
border: 3px solid green;
margin: -3px;
height: 30px;
width: 30px;
}
<div class="div1">
<div class="div2"></div>
</div>

Upvotes: 0

Vipul Hadiya
Vipul Hadiya

Reputation: 882

Give position relative to your parent div and position absolute to inner div. Don't forget to set top:0px for inner div and after this your inner div will be always at the top of your parent div.

#div1{position:relative;}
#div2{position:absolute;top:0px;}

Upvotes: 3

Related Questions