CODEWITHSUNDEEP
html
Steve1286
Steve1286

Reputation: 29

New div goes on top of header

I'm trying to add a new div that will put text below my header I already made. But when I add the new div with text, it goes on top of my header, not sure why. Please tell me what I'm doing wrong.

<body>
    <header>
    <span class="image">
            <img src="logo.png">
        </span>
        <span class="text">
            <h1>Text Here</h1>
        </span>
        <h3>Text Here</h3>
        <h3>Text Here</h3>
        <h3>Text Here</h3>
    </header>

    <div class="text1">
        <h2>Text Here</h2>
    </div>

</body>

Hi,

Here is my css code.

.text {
    font-family: sans-serif;
    font-size: 32px;
    color: rgb(26,30,170);
}

.image {
    display: inline-block;
}

.text {
    display: inline-block;
    vertical-align: 25px;
    padding-right: -100px;
}

header {
    border-bottom: solid;
    border-color: rgb(26,30,170);
    border-radius: 25px;
    width: 1550px;
    margin-top: -11px;
    margin-left: -15px;
    position: fixed;
    height: 130px;
}

h3 {
    display: inline-block;
    margin-left: 50px;
    color: rgb(92,194,242);
}

Upvotes: 1

Views: 113

Answers (4)

user10241151
user10241151

Reputation:

I took a look at your code and made some changes. I think I got the result you're looking for. You may use it.

header {
    border-bottom: solid;
    border-color: rgb(26,30,170);
    border-radius: 25px;
    width: 1550px;
    margin-top: 0px;
    margin-left: -5px;
    position: static;
    height: 130px;

}

img {
    display: inline;
    margin-left: 15px;
    margin-top: 100px;

}

h1 {
    font-family: sans-serif;
    font-size: 32px;
    color: rgb(26,30,170);
    display: inline;
    margin-top: 25px;
    margin-left: 10px;
}



h2 {
    margin-top: 5px;

}



h3 {
    display: inline;
    margin-left: 50px;
    color: rgb(92,194,242);
}
<body>
    <header>
      <img src="logo.png">
      <h1>Text Here</h1>
      <h3>Text Here</h3>
      <h3>Text Here</h3>
      <h3>Text Here</h3>
    </header>

    <h2>Text Here</h2>


</body>

Upvotes: 1

Prakash Software
Prakash Software

Reputation: 141

Your header position fixed, change some css property & add some css like 

body{
  padding-top: 130px; /*Add this*/
}

header {
    border-bottom: solid;
    border-color: rgb(26,30,170);
    border-radius: 25px;
    width: 1550px;
    margin-top: -11px;
    margin-left: -15px;
    position: fixed;
    height: 130px;
    top:0; /*Add This*/
}

https://jsfiddle.net/z3nL18a9/

Upvotes: 0

Hammad tariq
Hammad tariq

Reputation: 184

you are using position:fixed; on header thats why div below the header goes up

use position: sticky; instead of fixed

JSFIDDLE: https://jsfiddle.net/m3kqgfvy/1/

i hope it works

Upvotes: 0

Justin Saints
Justin Saints

Reputation: 97

As you can see from this codepen.

your new div outside the header is on the bottom of it, just like what you wanted.

it's the same code as yours

    <body>
    <header>
    <span class="image">
            <img src="logo.png">
        </span>
        <span class="text">
            <h1>Text Here</h1>
        </span>
        <h3>Text Here</h3>
        <h3>Text Here</h3>
        <h3>Text Here</h3>
    </header>

   <div class="text1">
        <h2>New Div</h2>
   </div>

   </body>

https://codepen.io/anon/pen/ZZQJrz

Upvotes: 0

Related Questions