CODEWITHSUNDEEP
htmlcss
Damian
Damian

Reputation: 23

HTML- How would i go about making a section appear below another section?

Hi all i've been teaching myself some HTML/CSS/JS and working on codecamp to do so and hit an issue with a tribute page, I feel like this has a relatively simple solution but I've been trying so many different options i've run out of ideas along with me being sleep deprived it is not helping.

My issue: I'm trying to move the section in red below into the green box, but any time I try something to change it, it will move the anchor tag section just over top of the picture, I do not want to make this a footer as i'll be using that later, i still would like this to be part of the body. I've tried using display:block or even the positions from absolute/relative, unless i've been putting them on the wrong areas it's been giving me the same problems. Thank you for taking the time to read all this.enter image description here

header{
  text-align:center;
  border-bottom:5px double;
  font-size:2.5em;
}

body{
  background-color:#efdecd;
}

p{
  font-size:25px;
  font-weight:250;
}

div.picture{
  float:left;
  background-color: #f2f0e6;
  margin-right:5px;
  border-radius: 10px;
}

#image{
  height:72%;
  width:72%;
}

figure{
  margin-left:15px;
  margin-right:-205px;
  margin-bottom:5px;
}
<head>
</head>

<body>
  
  <!-- Title -->
  <header>
    <h1 id="title"> Diogenes of Sinope</h1>
    <p>The cynic philosopher</p>
  </header>
  
  
  <main id="main">
    <!-- Picture w/ caption -->
 <div class=picture id="img-div">   
    <figure>
  <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Waterhouse-Diogenes.jpg/800px-Waterhouse-Diogenes.jpg" alt="Diogenes" >
   <!-- Caption of picture -->  
  <figcaption id="img-caption">Lorem ipsum dolor sit amet, consectetur elit, incididunt ut labore et dolore magna aliqua.</figcaption>
</figure>
    </div> 
   
    <!-- Body of page -->
    <section id="tribute-info">
      <h2>Timeline of Diogene's Life</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <!-- Picture -->
      <iframe width="560" height="315" src="https://www.youtube.com/embed/8EM_cfYcDjY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen alt="Diogenes video"></iframe>
    </section>
    
   <!-- Anchor tag link --> 
    <section class="links">
      <h2>hello</h2>
      <a id="tribute-link" target="_blank" href="https://www.ancient.eu/article/740/the-life-of-diogenes-of-sinope-in-diogenes-laertiu/">Learn more about Diogenes</a>
    </section>
  </main>
  
</body>

Upvotes: 1

Views: 2491

Answers (3)

DCR
DCR

Reputation: 15665

use FLEX!

header{
  text-align:center;
  border-bottom:5px double;
  font-size:2.5em;
}

body{
  background-color:#efdecd;
}

#main{
display:flex;
}
<body>

   <!-- Title -->
   <header>
      <h1 id="title"> Diogenes of Sinope</h1>
      <p>The cynic philosopher</p>
   </header>


   <main id="main">
      <!-- Picture w/ caption -->
      <div class=picture id="img-div">
         <figure>
            <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Waterhouse-Diogenes.jpg/800px-Waterhouse-Diogenes.jpg" alt="Diogenes">
            <!-- Caption of picture -->
            <figcaption id="img-caption">Lorem ipsum dolor sit amet, consectetur elit, incididunt ut labore et dolore magna aliqua.</figcaption>
         </figure>
      </div>

      <!-- Body of page -->
      <section id="tribute-info">
         <h2>Timeline of Diogene's Life</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         <!-- Picture -->
         <iframe width="560" height="315" src="https://www.youtube.com/embed/8EM_cfYcDjY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen alt="Diogenes video"></iframe>
      </section>
   </main>
      <!-- Anchor tag link -->
      <section class="links">
         <h2>hello</h2>
         <a id="tribute-link" target="_blank" href="https://www.ancient.eu/article/740/the-life-of-diogenes-of-sinope-in-diogenes-laertiu/">Learn more about Diogenes</a>
      </section>
   

</body>

Upvotes: 1

Baby_Boy
Baby_Boy

Reputation: 346

Try doing a CSS reset in-between:

/* CSS reset */
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
     margin:0;
     padding:0;
}
 html, body {
     margin: 0;
     padding: 0;
}
 body {
     font-family: 'Roboto', sans-serif;
     font-weight: 100;
}
 fieldset {
     border: 1px solid white;
     color: white;
     text-align: center;
     width: 200px;
}
 legend {
     padding: 0 10px;

Upvotes: -1

Ffion
Ffion

Reputation: 559

You have floated the image, to the left of the page, using float:left. Until you clear this, everything coming after it, will be floated to the left.

You could try adding:

<div class="clearfix"></div>

in your HTML, between your #tribute-info section and .links section.

Then define .clearfix in your CSS as follows:

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

Upvotes: 2

Related Questions