CODEWITHSUNDEEP
htmlcss
gollyzoom
gollyzoom

Reputation: 549

Changing div width causes all the content to go to the bottom of the div

I want my div to appear as a rectangle floating in the top right region of the page.
I also want it to cover 90% of the page vertically and about 20% horizontally.
I can get it into the top right corner, but when I try to narrow its width to 20%, all the content gets stuck to the bottom and nothing I do moves it.

This is the html I'm using:

<div id="test">
    <input id=search type="text" placeholder="Search name" name="firstname">
   <h1> More Stuff </h2>
</div>

And here's the CSS:

#test{
    position:relative;
    z-index:1000;
    max-width:20%;
    left:80%;
    border-radius:10px;
    background-color:blue;
}

Upvotes: 0

Views: 35

Answers (2)

Landon
Landon

Reputation: 359

The <h1> gets stuck on the bottom because it has a margin which is pushing it to the bottom. Try removing it's margin by using the CSS code margin: 0:

#test{
    position:relative;
    z-index:1000;
    max-width:20%;
    left:80%;
    top:0px;
    margin-top: 8px;
    border-radius:10px;
    background-color:blue;
}
h1.test.header {
    margin: 0;
    padding-left: 3px;
}
<div id="test">
    <input id="search" type="text" placeholder="Search name" name="firstname">
    <h1 class="test header">More Stuff</h1>
</div>

Upvotes: 1

OPTIMUS PRIME
OPTIMUS PRIME

Reputation: 1325

You can add class to H1 like this:

<h1 class="BUBU"> More Stuff </h2>

And then move it upper with margin:

<style> .BUBU {margin-top: -5%} </style>

Upvotes: 0

Related Questions