Tips for positioning a div under a floated div

I've searched extensively for a solution to this problem with no luck. I'm having trouble moving my main code under the Navigation Bar. Maybe my code is too unconventional, but I can't seem to figure it out. Can anyone assist me? Thank you in advance!

Here is my code:

<div id="navBarWrapper">
    <nav class="navBar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="HTML/aboutme.html">About Me</a></li>
        <li><a href="HTML/codeblog.html">Code Blog</a></li>
        <li><a href="HTML/contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
 <content>
   <div id="mainContentWrapper">
     <main class="mainContent">
       Hi, This page is currently incomplete!
    </main>
  </div>
  </content>

CSS for index.html:

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.pageHeader div {
 width: 100vw
}

.pageHeader h1 {
  font-family: 'PT Sans', sans-serif;
}
htmlcss

Answer №1

First of all, it's important to note that the <content> element is considered obsolete. Therefore, it's recommended to use <div> or another appropriate element instead.

If you want a <div> to display below a floated <div>, you should utilize the "clear" property, like this:

div#mainContentWrapper { clear:both;}

Experience it yourself in a code snippet: Without clear (your code)

#navBarWrapper {
  float: left;
}
<div id="navBarWrapper">
  <nav class="navBar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="HTML/aboutme.html">About Me</a></li>
      <li><a href="HTML/codeblog.html">Code Blog</a></li>
      <li><a href="HTML/contact.html">Contact</a></li>
    </ul>
  </nav>
</div>
<div class="content">
  <div id="mainContentWrapper">
    <main class="mainContent">
      Hi, This page is currently incomplete!
    </main>
  </div>
</div>

With clear:

#navBarWrapper {
  float: left;
}

#mainContentWrapper {
  clear: both;
}
<div id="navBarWrapper">
  <nav class="navBar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="HTML/aboutme.html">About Me</a></li>
      <li><a href="HTML/codeblog.html">Code Blog</a></li>
      <li><a href="HTML/contact.html">Contact</a></li>
    </ul>
  </nav>
</div>
<div class="content">
  <div id="mainContentWrapper">
    <main class="mainContent">
      Hi, This page is currently incomplete!
    </main>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing vue-router to create two separate navigation bars where only one link is highlighted as active

In my setup, I have implemented two sections with navigation structured as follows: <ul class="navigation-list"> <li v-for="(route, index) in navRoutes"> <router-link :to="route.path"> <span>{{ route.name }}</span> ...

javascriptcssvue.jsvue-router

Tips for Aligning Form Elements in the Middle using Bootstrap

What could be the issue? I can clearly see the container border, indicating the space available for my work. However, when I insert the row (div) and offset (div), the content gets left-justified. <div id="page" class="container" style="border:soli ...

csstwitter-bootstrap

The echo function is repeating something that is not text

I have set up a basic bottle server using Python: from bottle import route, run, static_file @route('/') def home(): return static_file("home.html", root='.') @route("/<fileName>") def respond(fileName): return static_f ...

phppythonhtmlechobottle

Customize your click event with conditional styling in React

When the onClick event is triggered, I am attempting to modify a class by calling my function. It appears that the function is successfully executed, however, the class does not update in the render output. Below is the code snippet: import React from &ap ...

javascriptcssreactjs

Converting JSP email text into HTML format with Spring's formatting features

Currently, I am working on implementing an email service using Spring. Users have the ability to input the email subject and body in a form and send the email successfully. However, there is an issue where line breaks and tabs entered by the user are not b ...

javajqueryhtmlspringspring-mvc

I would like to retrieve my data using my personal API and have them displayed as checkboxes

https://i.sstatic.net/qPSqe.jpgHere is an excerpt of the progress I have made main.html (it's actually a form) <div class="form-group form-check-inline"> <input class="form-check-input" type="radio" name=& ...

javascripthtmljsonapifetch-api

Utilize a single image to encompass the entire background/theme

As a beginner, I am eager to learn how to use html and css. I understand the importance of being able to style an entire webpage in order to prevent issues like page overload or cache problems. Are there any easy-to-understand examples available for begi ...

htmlcss

Enhancing image search functionality through dynamic HTML updates

I need help figuring out how to update the link address for profile pictures on my NHL stats website. Currently, I am using a script to append the image to the body, but I don't know how to properly add the player ID ({{p1_ID}}) to the link and includ ...

javascripthtmlimage

What is the best way to configure a CakePHP method to generate standard HTML output when the controller is set to default JSON?

Currently, I am working on developing an Android application and utilizing CakePHP on the server side. I have a UsersController that provides JSON data for functionalities like login, registration, etc, except for account activation. As account activatio ...

htmljsoncakephpviewoutput

React Icons and Browser Tab Alerts

Is there a way to incorporate notifications into my website's favicon when the browser tab is not in focus? My tech stack includes React, Material UI, and TypeScript. I assume this is a frequent requirement, yet I haven't come across a simple so ...

htmlreactjsnotificationsmaterial-uifavicon

Ways to automatically adjust the margins of my HTML body page

I'm currently working on a school project to develop a website. The challenge I'm facing is customizing the navbar and header background colors in such a way that they extend seamlessly to the end of the page. Despite my efforts, there seems to b ...

htmlcssborder

Obtaining data from an external ng-repeat element

My list contains items that are being repeated using ng-repeat details. I want to be able to hover over one of the li elements and have the background of a div called background (which is outside of the ng-repeat) change to the url of the corresponding d ...

javascriptjqueryhtmlcssangularjs

What is the correct way to integrate a HTML/CSS/JS theme into a Vue project effectively?

As a newcomer, I recently acquired a bootstrap theme that comes with HTML, CSS, and JavaScript files. My goal now is to integrate this theme into Vue in order to make it fully functional. The challenge I am facing is how to successfully incorporate the the ...

javascripthtmlcssvue.js

Modify the td attributes while retaining the extracted data values from the website

I'm currently utilizing this code to extract data from another website: $searchURL = "http://www.anotherwebsite.com"; $html = file_get_contents($searchURL); $patternform = '/(<tbody.*<\/tbody>)/sm'; preg_match_all($patternfor ...

javascriptphphtmlregex

Using jQuery Accordion within the MVC Framework

I'm new to MVC and considering using an accordion. However, I'm facing issues as the accordion does not appear despite adding all necessary references for jquery accordion and creating the div. Here is my code: @{ ViewBag.Title = "Online Co ...

javascriptjqueryhtmlcssasp.net-mvc

If the width is below 767, the previous code will not be effective in jQuery

Challenge: How can I ensure that the code within the if statement only executes when the screen width exceeds 767px, and does not work if it is less than 767px? Using jQuery: $(document).ready(function() { $(window).resize(function() { if ($( ...

javascriptjquerycss

jquery technique for toggling a single button

My goal is to use jQuery to toggle a button rather than the typical paragraph toggling. I want the button to appear and disappear when clicked, while also increasing the "score" upon each click and decreasing it when the button reappears. Can anyone guide ...

javascriptjqueryhtmlcss

What steps can be taken to extend the duration that the HTML necessary validation message is displayed?

Is it possible to extend the duration in which the HTML required validation message is displayed? Currently, it seems to appear for too short a time. https://i.sstatic.net/DdqH6.jpg ...

javascriptjqueryhtmlbootstrap-4

Implementing a collapsible full-width button that contains multiple elements (Bootstrap)

I am currently in the process of developing a responsive calendar that will display additional information in an expandable "well" when the user clicks on a specific event. My goal is to have the button, date, and icon all appear on the same line at full ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Unique rephrased text: "Varied wrapping styles in both

Feeling frustrated with a seemingly commonplace issue. Despite the thousands of times it has been asked before, I can't seem to find an answer on Google. I wanted to neatly display my text within one of my cards, but so far I've only achieved th ...

javascriptcssreactjstextmaterial-ui