CSS Float behaving unexpectedly

 body {
   margin: 0;
   font-family: arial;
   line-height: 16px;
 }
 #topbar {
   background-color: #600c0c;
   width: 100%;
   height: 46px;
   color: white;
   margin: 0;
 }
 .fixedwidth {
   width: 1050px;
   margin: 0 auto;
 }
 #logodiv {
   padding-top: 5px;
   float: left;
   border-right: 1px solid #b20505;
   padding-right: 10px;
   padding-bottom: 4px;
 }
 #signindiv {
   font-weight: bold;
   font-size: 0.9em;
   border-right: 1px solid #b20505;
   padding: 1px 80px 0px 12px;
   float: left;
 }
 #topmenudiv {
   float: left;
 }
 #topmenudiv ul {
   padding: 0;
   margin: 0px;
 }
 #topmenudiv li {
   list-style: none;
   font-weight: bold;
   font-size: 0.9em;
   border-right: 1px solid #b20505;
   height: 100%;
   padding: 15px 20px 15px 20px;
   float: left;
 }
 #searchdiv {
   float: left;
   padding: 5px 0 0 10px;
 }
 #searchdiv input {
   height: 25px;
   border: none;
   font-size: 0.9em;
   padding-left: 10px;
   background-image: url(images/Search.png);
   background-repeat: no-repeat;
   background-position: right center;
 }
 .break {
   clear: both;
 }
 #newsbar {
   background-color: #b20505;
   width: 100%;
   height: 80px;
   color: white;
   margin: 0;
 }
 #newsbar p {
   margin: 0;
   padding: 0;
   padding-top: 30px;
   padding-left: 0px;
   float: left;
 }
 #newsheader {
   font-size: 3em;
 }
 #uk {
   font-size: 0.7em;
   padding-left: 8px;
 }
 rss {
   float: right;
 }
<!doctype html>
<html>

<head>
  <title>My BBC</title>
  <meta charset="utf-8" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
  <div id="container">
    <div id="topbar">
      <div class="fixedwidth">
        <div id="logodiv">
          <img src="images/BBCLogo.png" />
        </div>
        <div id="signindiv">
          <p>Sign In</p>
        </div>
        <div id="topmenudiv">
          <ul>
            <li>News</li>
            <li>Sport</li>
            <li>Weather</li>
            <li>iPlayer</li>
            <li>TV</li>
            <li>Radio</li>
            <li>More...</li>
          </ul>
        </div>
        <div id="searchdiv">
          <input type="text" placeholder="Search" />
        </div>
      </div>
    </div>
    <div class="break"></div>
    <div id="newsbar">
      <div class="fixedwidth">
        <p id="newsheader">NEWS <span id="uk">UK</span>
        </p>
        <div id="rss">
          RSS
        </div>
      </div>
    </div>
  </div>
</body>

</html>

I'm attempting to replicate the design of the BBC news website, but I'm facing an issue where the word "RSS" is not floating to the right as intended, despite setting the width for the entire container div. I can't figure out what's causing this discrepancy. Here is how it appears..

Answer №1

Apologies for the mistake in the previous response! You actually need to include "#" in the style sheet. It should be

  #rss {
   float: right;
 }

Only "rss" is mentioned there. Simply add "#" before "rss" and it will function correctly.

Answer №2

If you're okay with it, you can utilize it in this manner.

<div class="fixedwidth">
      <div id="rss">
          RSS
        </div>
        <p id="newsheader">NEWS <span id="uk">UK</span>
        </p>

      </div>

Just ensure to use #rss content before the #newsheader content.

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

Enhance the functionality of your website by implementing a zoom feature

I am looking to dynamically change the CSS of a div using jQuery when it is clicked. The challenge I am facing is that there are multiple divs with the same class and I am unable to modify their classes as they are created dynamically using PHP. <div ...

The CSS theme fails to adapt to changes made using jQuery

I encountered a peculiar problem while using a CSS theme with jQuery. After applying a custom CSS theme to a webpage, everything looked fine. However, when I performed certain operations using jQuery - like checking checkboxes causing others to be checked ...

expanding the input and duplicating the outcomes

I'm attempting to clone and add values to results in my project. Here's the link to what I have so far: http://jsfiddle.net/QNP3r/175/ Currently, it is functioning adequately with a table element. However, I'd like to make it work with a di ...

Is it possible to loop through a directory containing images and dynamically generate a CSS rule that positions each image based on its

I'm not very familiar with PHP so I could use your expertise in coming up with the most efficient and straightforward solution for this specific task. In my directory "path/images/headers," I have multiple header images all cut to the correct size, ea ...

Discover how to access the translations of a specific key in a chosen language by utilizing the angular $translate functionality

How can I retrieve a specific language translation using angular's $translate function within a controller? The $translate.instant(KEY) method returns the translation of the specified key based on the currently selected language. What I am looking for ...

Is it possible for flex-grow to affect images? What steps can I take to identify any issues within my code?

<section> <div class="section-header"> <h5>Discover Our Team</h5> <h1>Meet the Experts</h1> <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, eaque.</h5> ...

JavaScript MP3 player

Could someone kindly point out where I went wrong? I am attempting to create an MP3 player using CSS, HTML, and JavaScript. Currently, the script only functions to start or stop the audio file. However, I keep encountering an error message: TypeError: docu ...

Is there anyone who is able to provide an answer to this question

Can anyone help me with connecting a Python program to HTML? I want the output from the Python program to be displayed on the front end when an HTML button is clicked. Any guidance on how to solve this issue would be greatly appreciated. I'm looking t ...

javascript get the value of the text field

Is there a way to calculate even and odd numbers using a text field for entering the range of values and a select tag to choose between even and odd? How can I retrieve the value from the text field in order to pass it to the calculation function? Custom ...

Clustering in an environment requires merging and minifying granules

While Granule is effective for minifying and merging CSS/JS files on a local environment, it presents challenges in clustered environments. The issue arises when each node of the cluster computes its own file during runtime, causing discrepancies when a us ...

HTML script tag failing to load

As a beginner in using scripts in HTML, I'm currently following a tutorial that suggests loading the script after the body for certain reasons. In my own code, I found that I need to place the script both in the head section and after the body. Remov ...

Storing parent entity along with child entities containing selected properties using ASP.NET Core MVC

Working on an ASP.NET Core MVC web app, I encountered a problem that can be best explained through this example: Let's consider a scenario where the user needs to save information about a book including its title, number of pages, and one or more aut ...

Why won't the CSS style in my HTML file display properly in Django?

I've been encountering an issue with my CSS file not working in Django, and I'm unsure of the reason behind it. Despite numerous attempts to troubleshoot, the problem persists. I have included {%load static%} at the beginning of my HTML file, and ...

Filtering stop words in Python through HTML parsing using Beautiful Soup

I have developed a program that extracts specific information from a website and stores it in a file. Currently, the program scans a webpage, identifies the correct HTML tag, and extracts the relevant content. Now, I aim to refine these "results." For ins ...

Issue with the Ajax auto-complete feature in Internet Explorer

I am facing an issue with my "ajax suggestion list" getting hidden behind the "select menu" located right below the text box that triggers the ajax function. This problem only occurs in IE 6.0, while it works fine in other browsers. I have already disabled ...

Is there a way to eliminate overflow on a section of my CSS page without sacrificing the 100vh height?

My professor requested a section in my project to have its height adjusted to the viewport, however this has created a large gap between that section and the rest of my content. How can I remove the overflow and close the gap? <main> <sect ...

Angular: Unable to retrieve defined data when loading a component

There is a nagging question in my mind that I hesitate to ask because deep down, I know the answer is probably staring me in the face. After struggling with code for two days straight, I am on the brink of pulling my hair out. Although I am relatively new ...

What is the best way to align my SVG to display inline with text?

I am trying to add an SVG image next to some text in a navbar, but I'm running into some issues. The SVG is overflowing from the navbar instead of aligning inline with the text. Here's a snippet of my HTML code: ...

Is there a way to show a 'Refresh' icon in HTML without the need to download an image through HTTP?

In my HTML/JavaScript app project, I am looking to incorporate a 'refresh' symbol without having to load an image through HTTP requests. Are there reliable methods that can achieve this across all major browsers? I came across the Unicode value: ...

Pan motion gesture above HTML components

Is it possible to create a hovering effect over elements in a container using a pan gesture? Here's the HTML code: <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item">< ...