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

debugcn Published at Dev

Damian

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.

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>

Ffion

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;
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-04-6

Comments

0 comments

From Dev

Related Related

Article

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

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

How would I go about making a RewriteRule as described?

How Would I go about making a box around the screen using Ncurses

How would I go about making three bodies of text side-by-side?

How would I go about separating numbers in a string and making them their own values?

With Visual Studio SDK, how would I collapse a section of code?

How can I get a section of the data present in the format shown below?

How can I make my navbar appear at a certain section?

Position a section directly below another section with Tachyons CSS

How would I go about this? (Chrome extension)

How would I go about matching like this

How would I go about combining these tables?

How would I go about fixing this?

Python - How would I go about doing this?

How would I go about creating another int() function in Python so I can understand it?

Making a Section Match Another Sections Height with CSS

Fullpage.js how can I link to another html page with <a> element in section

section within an another section

How do i put the about section under the header but on top of the footer?

how I can do a section in other section?

How would I go about aligning x-axis labels with the tick marks they correspond to in HTML?

How can i both toggle and go to an id section on the same page

How can i both toggle and go to an id section on the same page

How to start new section below a floating element

How to make a Field Section appear first?

Getting a link to go to a specific section on another page

small portion of my making my html website- I have a javascript section

How would I go about masking specific $_GET variables as subfolders?

how would i go about creating a Command Line Interface in javascript?

How would I go about loading a JSON file using Laravel?