CSS overlapping - How can I seperate the <div>s?

CSS overlapping - How can I seperate the <div>s?
0

Hello! I’m trying to get it so the red and blue boxes are seperate (currently it looks like the red box is inside the blue one). This code is for the tribute page challenge.

I’ve been messing around with indentations, but can’t figure it out - I’d rather not use flexbox or grid for the basic solution (unless it’s neccessary); I’ll add flexbox later in my project so I can get used to it.

Thank you! :smiley:

HTML code:

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="tribute-styles.css" media="screen">
      <link href="https://fonts.googleapis.com/css?family=Bebas+Neue|Noto+Sans&display=swap" rel="stylesheet"> 
      <title>Page</title>
    </head>
    <body>
      <div id= "main">
        <div id="main-section" class="main-border">
          <h1 id="title">Richard Dawkins</h1> <!--Richard Dawkins title -->
          <div id="img-div">
            <img id="image" class="img-border" src="https://pbs.twimg.com/profile_images/1094327574031945729/tU8wz8DL_400x400.jpg" alt="A picture of Richard Dawkins in nature">
            <p id="img-caption"><i>Richard Dawkins in nature </i></p>
          </div>
          <div id="info">
            <p id="tribute-info"> Richard Dawkins is a famous biologist 
              and evolutionist. 
              He his probably most famous for his books, 
              including <i>The God Delusion</i> and<i>The Selfish Gene</i>, and is critical
              of the idea of intelligent design and creationism; frequently
              discussing these topics during his debates and books. </br>
              Intrestingly, he invented the term 'meme', in <i>The Selfish Gene</i>.
            </p>
          </div>
        <div id="more-info">
          <p><strong>For more information, visit his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Richard_Dawkins" target="_blank">Wikipedia Page.</a></strong></p>
        </div>   
      </div>   
      
    </body>
  </html>


CSS code:


#main-section {
    background-color: blue;
    width: 80%;
    margin: 50px;
    padding: 50px 20px 50px 20px;
}
#more-info{
    background-color: red;
    padding: 50px 20px 50px 20px;
    margin: 50px;
    
    
}
img{
   max-width: 100%;
   display: block;
   height: auto;
   margin: auto;
   padding-top: 
      
}
.img-border {
    border-color: black;
    border-width: 2px;
    border-style: solid;
}
#img-caption {
    margin: auto;
    text-align: center;
}
a{ 
    color: blue;
}
a:hover{
    animation-name: link-color;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes link-color {
    
    100%{
        color: red;
    }
}
p{
    font-family: Noto Sans, sans-serif;
}
h1{
    font-family: Bebas Neue, sans-serif;
    text-align: center;
    font-size: 75px;
    padding: 5px 0px 2px 0px;
    margin: 10px auto auto 5px
}
1 Like

OK somebody with more experience may have abetter answer but it looks like the “main” div opens… and then doesn’t close until you’ve opened and closed the “more info” div. So… that div is literally inside the “Main-section.” If you want them separate you need to for the main section and then do the more-info div.
I love when I can click on the opening div and the closing one to match it is highlighted…

1 Like

@geonz has it right. You just need to move the dive that contains the red section outside of the div that contains the blue section in your html.

The div with the id=“more-info” should be the last div before the closing of the body tag.

1 Like