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

Reverse all elements on the page except for ::selection

Is there a way to invert the page while keeping text selection unchanged? I attempted to use ::selection to exclude it, but was unsuccessful. Below is the CSS code I used for inverting the page: html { background-color: #131313 !important; filter: cont ...

Discover the ins and outs of the "DOM" within a string, treating it as HTML in AngularJS

Looking to extract data from a legal HTML string based on tags and attributes, but want to avoid using jQuery in favor of Angular. Are there built-in functions in Angular for this task? ...

All you need to know about the properties of CSS ul

When I specify .a ul{} .a ul li{} as well as .b ul{} .b ul li{} will the properties of ul in .b be completely isolated from the properties of ul in .a? Or will they have some commonalities? I am looking to ensure that the styles for ul remain entirely ...

Modifying CSS style according to the contents of an HTML element

Creating a room allocation page with multiple panel boxes using Bootstrap. Each box represents a bed - highlighted in red if occupied and green if vacant. Clicking on a green panel redirects to the room allocation page, while clicking on a red panel goes t ...

Unspecified origins of Js in Chrome Extension

console.log(chrome.runtime.sendMessage({from:"script2",message:"hello!"})); However, attempting to send the message from a background script to a content script is proving to be unsuccessful. https://i.stack.imgur.com/ERgJB.png ...

Enhance your inline content by adding adjacent inline blocks

My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...

JavaScript popup cannot be shown at this time

I'm encountering an issue with displaying popups using JavaScript. Currently, only the div with class "popup" is being shown. When a user takes action, both popup and popup2 should be displayed but for some reason, it's not working as expected. ...

How can I store HTML5 input type date/time data accurately as Date Time in Rails?

Is there a way to handle two inputs in HTML5 so that both can be sent to the controller and saved as Date Time? Alternatively, is there any helper or gem that mimics a date and time picker from HTML5? HTML5 inputs: %input{:type => "date", :value => ...

Are there various types of HTML5 document declarations available?

Back in the days when I used to create web pages in XHTML, there were three types of doctype available - strict, transitional, and frameset. Are these different types of doctypes still present in HTML5? ...

If you click outside of a Div element, the Div element will close

I am looking for a way to implement a function that will hide a specific div when I click outside of its area. The div is initially set to Position: none and can be made visible using the following function: Div Element: <div id="TopBarBoxInfo1" oncli ...

Modifying the chart width in Chart.js: A step-by-step guide

After creating a chart using Chart Js, I encountered an issue where the chart did not fit within the specified width. Adjusting the attributes of canvas proved to be ineffective, specifically with regards to the width attribute. Despite changing the value, ...

The dynamic addition of the active class is malfunctioning

I have dynamically added a class using AngularJS, but it seems to not be functioning correctly. As I am new to AngularJS, I would appreciate any suggestions to resolve this issue. Below is my HTML code: <div class="col-md-15 col-sm-3" ng-repeat="data i ...

HTML DOM parser in PHP with simple space handling

Currently, I am utilizing PHP Simple HTML DOM Parser to extract text that lies between specific div tags using $html->find(div.divname) Everything runs smoothly until the divname contains a space. I've experimented with [div name] and "div name ...

Buttons are not aligned with the rest of the row's height

I'm currently working on designing an upload layout that consists of a container with a row inside. Within the row, there are two buttons (each containing input elements) and one h3. For some reason, I am having difficulty getting them to align at the ...

"Controlling Selected Options in Bootstrap Dual Listbox: A Guide to Limiting Choices

I am utilizing the Bootstrap Dual Listbox plugin to assist users in selecting specific options. I have successfully integrated this plugin into my project. However, I encountered an issue when attempting to impose a limit on the number of options a user ...

Excessive whitespace bordering the perimeter of the webpage

I've recently delved into the world of HTML/CSS and I'm working on creating a simple website. However, I'm encountering some white space-related issues above the header/body and around the sides. Despite trying various adjustments with margi ...

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

Clicking on the button has no effect whatsoever

I'm currently dealing with a button on my webpage that seems to be causing me some trouble: <script> function changeMap() { container.setMap(oMap); } </script> <button onClick="changeMap"> Click here </button> Upon inspe ...

The jQuery scrollTop function seems to be malfunctioning following an ajax request

My ajax call is functioning properly, but I am experiencing an issue with the scrollTo plugin from JQuery. It is not positioning the content where I want it to be located below. //This function reveals the email body when a list item is clicked. jQue ...

What is the best way to resize an element such as an image?

When an image is resized using a percentage, it preserves its aspect ratio properly. I am looking for a way to replicate this behavior with a div. My current challenge involves precisely positioning an element relative to an image. The image fills 100% of ...