Difficulty arranging these elements in CSS

I'm attempting to achieve the following:

(The black box represents a signup/login section, the blue is a navigation bar, and the red is a header area with some

text

content) I'm trying to reach this outcome with the following CSS:

@import url(//fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin);

html, body {
  margin:0;
  padding:0;
  background-color:#fff;
  font-family: 'Droid Sans', arial, serif;
  color: #777;
  font-size: 14px;
}
a {
  color: #2e4987;
  text-decoration: none;
}
img {
  border: 0;
  width: 250 px;
  height: 250px;
  margin: auto;
}



#nwtBox {
  margin: 0 auto;
  width: 960px;
  height: 800px;
}
#nwtBox h1 {
  color: #333;
  font-weight: normal;
  margin: 0 0 20px 0;
  padding: 0;
}
#nwtBox h1 span {
  float: right;
  font-size: 14px;
  font-weight: normal;
}
#nwtBox h2 {
  font-weight: normal;
  font-size: 20px;
  padding: 0;
  margin: 0 0 10px 0;
  color: #333;
}
#nwtBox h3 {
  padding:0;
  margin: 0;
}
#nwtBox h3 img {
  vertical-align: middle;
}



#nwtBox #header {
  width: 960px;
  background-color:#fff;
  height: 100px;
  border: solid;
  border-width:thin;
  border-color: red;
}

#nwtBox #header h1 {

  text-align: center;
}

#nwtBox #navigation {

  width: 960px;
  background-color:#fff;
  height: 100px;
  border: solid;
  border-width:thin;
  border-color:blue;
}
#nwtBox #navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#nwtBox #navigation ul li {

  padding: 0 30px 0 0;
  font-weight: bold;
}
#nwtBox #navigation ul li a {
  color: #a8a8a8;
  text-decoration: none;
}
#nwtBox #navigation ul li a:hover {
  color: #2e4987;
}
#nwtBox #navigation .main-nav {
  width: 500px;
  overflow: auto;
}


#nwtBox #navigation {
  float: left;
  padding: 35px 0 0 0;
}
#nwtBox #navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#nwtBox #navigation ul li {
  float: left;
  padding: 0 30px 0 0;
  font-weight: bold;
}
#nwtBox #navigation ul li a {
  color: #a8a8a8;
  text-decoration: none;
}
#nwtBox #navigation ul li a:hover {
  color: #2e4987;
}
#nwtBox #navigation .main-nav {
  width: 500px;
  overflow: auto;
}



#nwtBox #signupLogin {

  float:right;
  width: 400px;
  overflow: none;
  padding: 32px 0 0 0;
  text-align: right;
  color: #999999;
  border: solid;
  border-width:thin;
  border-color:red;
}

Also, utilizing this HTML:

<body>
<div id ="nwtBox">


   <div id ="signupLogin">
      <ul>
        <li> <a href =''> Sign Up</a>
        </li>
        <li> <a href =''> Log In</a>
        </li>
     </ul>
    </div>
  <div id = "navigation">
           <ul class="main-nav"> 
            <li class="main-nav-selected"> 
              <a href="index.php">HOME</a> 
            </li> 

             <li>              
              <a href="stuff.php">STUFF</a> 
            </li> 
            <li> 
              <a href='stuff.php'>STUFF</a> 
            </li> 
          </ul>
  </div>
 <div id ="header">
   <h1> TEXT</h1>
 </div>

  </body>

However, instead of achieving the desired design, I'm encountering issues. What could be wrong?

Answer №1

Include the property clear:both in your navigation block's CSS.

#nwtBox #navigation {
  float: left;
  padding: 35px 0 0 0;
  clear:both;
}

Answer №2

When using floats, they won't disrupt the positioning of relatively placed elements; instead, content will smoothly flow around the float. With both the navigation and login box set as floats, there is no interference with the placement of the content div. To keep things straightforward, you can just assign a top margin to the content div that is the sum of

loginHeight + loginTopMargin + navHeight + navTopMargin
, which will maintain proper alignment.

Answer №3

Here's a suggestion:

#nwtBox #navigation {
  clear: both;
  //remove float: left;
  padding: 35px 0 0 0;
}

If you prefer to retain float: left in #navigation, you have the option of inserting a div with style clear: both directly into the HTML code.

<div id="signupLogin>
...
</div>

<div style="clear: both"></div>

<div id="navigation">
...

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

The process of executing a PHP file from JavaScript using XMLHttpRequest is experiencing issues on a XAMPP local server

I'm attempting to execute a PHP file using JavaScript. I have my XAMPP server set up and all files saved in the htdocs folder. The PHP file is also stored in the htdocs folder and works correctly when accessed via http://localhost/php_test.php in Chro ...

I'm struggling to understand the reasoning behind the 'undefined' error occurring in the Google Maps distance service

Currently facing a puzzling issue with an 'undefined' exception. Developing a tool to track distance traveled between two locations, leveraging Google Maps distance matrix. Upon selecting a vehicle, entering an origin and destination, and clickin ...

Utilizing a ListView Below a LinearLayout: Step-by-Step Guide

In my Android project, I am working on creating the MyProfile activity. This activity will display a user's profile picture, name, and other bio data on the first screen. Additionally, I would like to make the layout swipeable so that when the screen ...

Despite utilizing the here() package, Pandoc is unable to locate the image path referenced in an external HTML file that has been imported into R Markdown

As I create an HTML document with R Markdown, I incorporate external HTML documents for headers and footers. Utilizing the here() package enables relative paths within my project. However, including external HTML files via YAML in the R code disrupts the f ...

Tips for altering the color of a specific row in JQuery by targeting its unique id

I've been struggling to accomplish a simple task using Jquery and CSS, but I seem to be stuck. My issue involves making an ajax request to update a PostgreSQL table and retrieve an id in return. This id corresponds to the id of a row in a previously ...

Discovering the amount of attributes possessed by an element with jQuery

If I have an xml element like this: <fruit color="blue" taste="sweet" shape="round"></fruit> Without using jQuery, I could use the following code: fruit.attributes.length How can I achieve the same result with jQuery? ...

Integrating a fictitious style using jQuery

Having some trouble with this code snippet. The issue arises when trying to apply the following style using jQuery. CSS .arrow_box { position: absolute; width: 24px; border-radius: 30px 30px 3px 3px; height: 17px; float:left; } .arrow_box:after { bord ...

Clicking on Google Code Prettify does not trigger syntax highlighting

I utilize Google Code Prettify for syntax highlighting my code. Below is the HTML snippet I use: <head> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> </head> <body> ...

Having a solid grasp of React and Material UI, as well as familiarity with the concept of props and

For my react application, I utilize Material UI (@mui/material). However, I've come to realize that there might be some nuances in how the components interact with each other. For instance, if I nest a MenuItem inside a Box or a Link inside a Typograp ...

Using HTML5 datetime-local to only accept dates in the format Y-m-d

I am currently working on a form that includes a datetime-local input field. <input type="datetime-local" id="datetime" /> After clicking on the today button, the date is automatically set to today's date like this: 2018-11-05 --:-- However ...

What is the best method to display and conceal a table row in Angular 6?

In the midst of developing a table with multiple rows, I am seeking a way to invisibilize a particular row and then reveal it again using a reset button. Any tips on how to accomplish this task?emphasis added ...

What measures can be taken to stop LESS partials from compiling independently?

When working with LESS, I utilize partials that are included (@include) into the main LESS stylesheet. A common issue I face is that each partial ends up compiling to its own CSS file, leading to project clutter. In SASS, if a file is named with an unders ...

Having trouble getting your Bootstrap v4 carousel to function properly?

Currently, I have implemented the carousel feature from Bootstrap v4 in a Vue web application. I am following the same structure as shown in the sample example provided by Bootstrap, but unfortunately, it is not functioning correctly on my local setup and ...

Creating dynamic div elements using jQuery

I used a foreach loop in jQuery to create some divs. Everything seems to be working fine, but for some reason, my divs are missing SOME class properties. Here is the code snippet I am using: $("#item-container").append("<div class=\"panel col-md-2 ...

Is your display:inline-block feature not functioning properly?

I am currently designing the homepage for this website and I am attempting to arrange the category divs under the header in a grid layout, with 3 divs per row. I have been trying to achieve this using display:inline-block, but so far, I can only get the d ...

Get Python CSV file with Callback feature

When trying to download a CSV file from Morningstar by clicking on a button link, the presence of a callback in the URL seems to be hindering the download process. Even when pasting the URL (http://financials.morningstar.com/finan/ajax/exportKR2CSV.html?&a ...

Converting a table into div elements and subsequently reverting it back to its original table format

[STOP DOWNVOTING: NEW AND IMPROVED] Discovering a simple technique on stackoverflow to transform tables into divs has been quite enlightening. By assigning classes to each tag, such as: <table class="table"> the process of converting from table to ...

Restoring text boxes to their original styling

I've been working on a jQuery script that scans through form input elements and turns their border color to red if they are empty. When the submit button is pressed, it reassesses the elements; this time I'm trying to revert the textbox back to i ...

What is the best way to horizontally align and center the navigation menu?

I've been struggling to center and align the navigation links inside this div horizontally. I attempted a few methods, but none seem to work. I managed to fix the previous issue with #centermenu, but unfortunately it still isn't functioning as e ...

Check if the data-indices of several div elements are in sequential order using a jQuery function

Is there a way to implement a function in jQuery-ui that checks the order of div elements with data-index when a submit button is pressed? I have set up a sortable feature using jQuery-ui, allowing users to rearrange the order of the divs. Here is an exam ...