What causes my CSS to vanish when I float a div?

Struggling to design a responsive layout and encountering issues when floating a div to the left. I am facing difficulties with:

HTML

<body>
    <div class="wrapper">
        <h1>Site Title</h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">Home</a>
            <a href="#">Home</a>
            <a href="#">Home</a>
            <a href="#">Home</a>
            <a href="#">Home</a>
        </nav>
    
        <h2>hello world</h2>
    </div>
    
</body>

CSS

.wrapper {
    margin: 10px auto;
    width: 90%;
    max-width: 980px;
    background-color: yellow;
    overflow: auto;
}

nav {
    background-color: #222;
    padding: 0;
    margin: 10px 0;
}


nav a { color: #F9F9F9; display: block; float:left;  padding: 10px;  }
nav a:visited { color: #f9f9f9; }
nav a:hover { text-decoration: none; background: #27B3CF; }
nav a:active { position: relative; top: 0; }

Functioning correctly but aiming to float it left http://jsfiddle.net/rktjam2k/4/

Issues arise when nav a is floated left: http://jsfiddle.net/rktjam2k/3/

htmlcss

Answer №1

It is necessary to clear the floats.

One way to achieve this is by adding the following CSS:

nav {
    overflow: hidden;
}


.wrapper {
  margin: 10px auto;
  width: 90%;
  max-width: 980px;
  background-color: yellow;
  overflow: auto;
}
nav {
  background-color: #222;
  padding: 0;
  margin: 10px 0;
  overflow: hidden;
}
nav a {
  color: #F9F9F9;
  display: block;
  float: left;
  padding: 10px;
}
nav a:visited {
  color: #f9f9f9;
}
nav a:hover {
  text-decoration: none;
  background: #27B3CF;
}
nav a:active {
  position: relative;
  top: 0;
}
a {
  outline: 0;
  text-decoration: none;
}
h1 {
  font-family: 'Droid Serif', serif;
  line-height: 75px;
  padding: 10px;
  font-size: 90px;
}
<div class="wrapper">
  <h1>Site Title</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
  </nav>
  <h2>hello world</h2>
</div>

Alternatively, you can use the following CSS code:

nav:after {
  content: '';
  display: block;
  clear: both;
}


.wrapper {
  margin: 10px auto;
  width: 90%;
  max-width: 980px;
  background-color: yellow;
  overflow: auto;
}
nav {
  background-color: #222;
  padding: 0;
  margin: 10px 0;
}
nav:after {
  content: '';
  display: block;
  clear: both;
}
nav a {
  color: #F9F9F9;
  display: block;
  float: left;
  padding: 10px;
}
nav a:visited {
  color: #f9f9f9;
}
nav a:hover {
  text-decoration: none;
  background: #27B3CF;
}
nav a:active {
  position: relative;
  top: 0;
}
a {
  outline: 0;
  text-decoration: none;
}
h1 {
  font-family: 'Droid Serif', serif;
  line-height: 75px;
  padding: 10px;
  font-size: 90px;
}
<div class="wrapper">
  <h1>Site Title</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
  </nav>
  <h2>hello world</h2>
</div>

Answer №2

Utilizing the correct syntax in CSS is crucial for ensuring proper functionality. In this case, replacing "<" with "<" will help resolve the issue.

nav < a { color: #F9F9F9; display: block; float:left;  padding: 10px;  }
nav < a:visited { color: #f9f9f9; }

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

What is the best way to ensure that multiple SVG illustrations render smoothly while scrolling?

I created a layout of SVG line charts using the d3.js library. Each line chart is contained within its own <svg> tag inside a wrapper div structured like this: <div id="main-container" style="overflow-x: scroll"> <div class="wrapper-di ...

javascriptcssperformanced3.jssvg

Is there a way to adjust the size of an image in a specific section of bootstrap?

Can anyone assist me with fixing an image in part one of a full-size Bootstrap layout to make it look like picture 2? I have included both my current code and the desired outcome. Current Code and Desired Outcome ...

htmlcssbootstrap-4

IE10 is having trouble rendering HTML, while IE7 displays it correctly

I am experiencing an issue with IE10 where it is not rendering HTML perfectly in an iframe, even though it works fine in IE7. In IE10, it appears that the margin is not being applied to paragraphs and lists. I am using iframes to embed HTML from other fil ...

htmlcssinternet-explorer

Issue with MUI data grid not resizing properly within a grid container: The dimensions of the MUI data grid are not adjusting as anticipated

In my setup, I have a main grid <div> container that contains two child elements. One is the MUI <DataGrid />, and the other is a simple <div>: Here's how it looks in JSX (React): <div className="container"> <Da ...

cssreactjsmaterial-uimui-x-data-grid

Navigating dynamic Xpath expressions while using Selenium can be a challenging task

I currently have the Xpath for a Pay button, which is shown below: /html/body/form/table/tbody/tr[37]/td[2]/input However, whenever I share the script with someone else, the dynamic xpath changes to /html/body/form/table/tbody/tr[38]/td[2]/input I have ...

javahtmlseleniumxpath

eliminating the outline from bootstrap button results in an increase in the margin of the buttons

I'm facing a challenge that should be simple, but it's causing me some trouble. I have code that displays text on the left side and two buttons on the right side of the div. These buttons use Bootstrap icons, which by default appear within a bla ...

htmlcssbootstrap-5

Center-align an input and button vertically within a div

I am facing an issue with aligning my search setup vertically inside a div Below is the code I have written: HTML: <div class="search"> <input class="searchfield" type="text" placeholder="Search..." value="" />&nbsp;<button class="sea ...

htmlcssvertical-alignment

What are the best situations to utilize bootstrap and when should you avoid it?

When it comes to web development, there is often a debate on whether to use Bootstrap or custom CSS for designing a website. For my school project, I am tasked with creating a homepage and contact page using Bootstrap primarily. However, we are also requir ...

csssassbootstrap-5

Quickly switch the outline state of a Bootstrap toggle button

Using the latest version of Bootstrap (5.0) that supports importing from inline HTML, I am working on creating a toggle outline button as shown below. <button type="button" class="btn btn-outline-dark" data-bs-toggle="button&quo ...

htmlcssangularbootstrap-4toggle

Position elements to the right side of a flex container

I'm utilizing Bootstrap 4 along with this CSS class to vertically align my elements: .vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-i ...

htmlcsstwitter-bootstrapflexboxtwitter-bootstrap-4

Turning an svg tag into a WebElement: a step-by-step guide

<img src="data:image/svg+xml;base64,PHN2ZyBzdG9rZS1kYXNoYXJyYXk9IiIgdmVjdG9yLWVmZmVjdD0iIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpc2liaWxpdHk9InZpc2libGUiIHN0cm9rZS13aWRnZXQ9IjEiIGZpbGw9InRyYW5zbGF0ZW4iIHN0cm9rZT0idHJhbnNsYXRlciI+PC91cz48L3N2Zz4="/> Is it ...

htmlselenium-webdriver

Having trouble retrieving the default text from an input element using Selenium

Seeking the date 11/30/2022 from the SOA Handled Date/Time field on a private site shown here. The text is within an input field that is pre-filled when the page loads, and the corresponding HTML looks like this. <td> <input type="tex ...

pythonhtmlseleniumselenium-webdriver

Troubleshooting the pushstate back function in HTML5 and jQuery

In my code, I have implemented an ajax call to load content dynamically. I am now looking to add a deeplinking effect, and after researching, I discovered that only raw coding can achieve this. Here is what I have implemented so far: jQuery("#sw_layered_c ...

javascriptjqueryajaxhtml

Padding located within a div tag

As a novice in the world of HTML and CSS, I have designed a birthday card with a desired 50/50 split down the center. Placing an image on the left side was successful, however when trying to add text to the right, it ended up too close to the center line. ...

htmlcss

Issue with borders not displaying on cards in Bootstrap 3.4.0

In the 3.4.0 version of Bootstrap, I am facing an issue where cards are not showing borders. I am attempting to include multiple cards within a panel. I have tried using the "!important" property for the border, as well as using classes like "border-prima ...

htmlcsstwitter-bootstrap-3

What is the best way to halt the ticking of this clock in JavaScript?

I can't seem to figure out how to stop this clock using JavaScript Even though I press the stop button, the clock keeps running <!DOCTYPE html> <html> <head> <h1> Welcome to the clock. Press the stop button to halt the clo ...

javascripthtml

The error message "Undefined index" will only occur when trying to access the "file" field in an HTML form

Initially, everything was functioning properly but then suddenly it stopped. All other fields are submitting without any problems. Upon pressing submit, all the data is added to the database except for the photo_url field. Just to clarify, the crucia ...

phphtmlmysqlsql

Navigational dropdown menu in Bootstrap

I'm a bit rusty with Bootstrap and I'm struggling to make my NavBar dropdown toggle. I've gone through all the documentation and forums available but can't seem to figure it out. Any ideas on what I might be missing? <nav class=" ...

htmlcssbootstrap-4

Continuously encountering a Django form error stating "this field is required" despite completing the field

Just started working on a Django web app and I'm diving into Django forms. However, I keep encountering this error message despite entering the project name field. <tr><th><label for="id_title">projectName:</label>&l ...

pythonhtmldjango

Enhance the functionality of the range input in Vue.js 3

Is there a way to update or display the current value of a range input in Vue 3? I initially believed that it could be achieved using v-model in this manner: <input id="rangeSlider" type="range" class="form-range" v-model= ...

htmlvue.jsinputslidervuejs3