CODEWITHSUNDEEP
htmlcss
Sweet_Cherry
Sweet_Cherry

Reputation: 333

How to make a div one on the top and one on the bottom touching

I'd like to make the headbar touch the jumbotron, but not sure how. And one more question. Should the headbar be called navbar or does it not make a difference? Here is my HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CherryPlaysRoblox1</title>
        <link rel="stylesheet" type="text/css" href="basic.css">
        <link href="https://fonts.googleapis.com/css?family=Happy+Monkey" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <div class="headbar"> <p>CherryPlaysRoblox</p></div>
        <div class="jumbotron">
            <h1>Welcome!</h1>
            <p>Hey there! Welcome to my webpage! My name is Cherry and this website is `enter code here`99.999% <br> made by me! (If you're wondering, that 0.001% is bootstrap. Hmm, is        that advertising???)</p>
        </div>
        <h2 id="Firsth2">About me</h2>
    </body>
</html>

And my Css:

p {
    color: black;
}

.jumbotron {
    background-color: Sandybrown !important;
    float: top;
}

.jumbotron, p + h1 {
    color: black !important;
}

.headbar p {
    color: black !important;
    font-family: 'Happy Monkey', cursive;
    font-size: 20px;
}

.headbar {
    margin-bottom: 30px;
    background-color: hotpink !important;
}
#Firsth2 {
    color: black;
}

body {
    background-color: Peachpuff !important;
}

Upvotes: 0

Views: 51

Answers (2)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

Remove margin-bottom: 30px; from .headbar and set margin:0 in .headbar p:

p {
color: black;
}

.jumbotron {
background-color: Sandybrown !important;
  

}

.jumbotron, p + h1 {
color: black !important;
   
}

.headbar p {
color: black !important;
font-family: 'Happy Monkey', cursive;
font-size: 20px;
   margin:0;
}

.headbar {
background-color: hotpink !important;
}
#Firsth2 {
color: black;
}

body {
background-color: Peachpuff !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <body>
    <div class="headbar"> <p>CherryPlaysRoblox</p></div>
    <div class="jumbotron">
    <h1>Welcome!</h1>
    <p>Hey there! Welcome to my webpage! My name is Cherry and this website is `enter code here`99.999% <br> made by me! (If you're wondering, that 0.001% is bootstrap. Hmm, is        that advertising???)</p>
</div>
    <h2 id="Firsth2">About me</h2>
    </body>

Upvotes: 1

Phillip Chan
Phillip Chan

Reputation: 983

You're using a p for your .headbar, which has margin-bottom. Either don't use a p or get rid of the margin-bottom.

HTML:

<div class="headbar">CherryPlaysRoblox</div>

See: https://jsfiddle.net/y1tytq8u/

Upvotes: 0

Related Questions