The float property is not functioning properly in CSS right now

I am a novice when it comes to CSS and I am attempting to position my information icon on the right side of my webpage.

Below is the HTML and CSS code that I currently have:

   .content > .chat-section > .chat-window > .chat-top-bar {
      height: 8%;
      width: 100%;
      box-shadow: 1px 2px 5px #888888;
      background-color: white;
      z-index: 10;
  }
  .content > .chat-section > .chat-window > .chat-top-bar > #room-id {
    margin-left: 20px;
    font-size: 18px;
    float: left;
  }
    
  .content > .chat-section > .chat-window > .chat-top-bar > #room-info {
    float: right;
  }
  <div class="chat-top-bar valign-wrapper">
    <p id="room-id"><b>Title</b></p>
    <i class="material-icons" id="room-info">info</i>
  </div>

Additionally, I am utilizing Materialize CSS for my project.

My goal is to have the info icon aligned on the right side like the example image below, but I am having issues with the current CSS:

Complete Code : https://codepen.io/buckydroid/pen/rzRzrN

https://i.sstatic.net/8rz39.png

htmlcss

Answer №1

The issue arises due to the absence of parent elements with classes .content, .chat-section, and .chat-window, causing the snippet to malfunction.

   .content > .chat-section > .chat-window > .chat-top-bar {
      height: 8%;
      width: 100%;
      box-shadow: 1px 2px 5px #888888;
      background-color: white;
      z-index: 10;
  }
  .content > .chat-section > .chat-window > .chat-top-bar > #room-id {
    margin-left: 20px;
    font-size: 18px;
    float: left;
  }
    
  .content > .chat-section > .chat-window > .chat-top-bar > #room-info {
    float: right;
  }
  <div class="content">
    <div class="chat-section">
      <div class="chat-window">
        <div class="chat-top-bar valign-wrapper">
          <p id="room-id"><b>Title</b></p>
          <i class="material-icons" id="room-info">info</i>
        </div>
      </div>
    </div>
  </div>

Update

The .valign-wrapper is a flex container so the floats don't work. To resolve this issue, you can either remove the display: flex; property or add justify-content: space-between; to the flex container.

Answer №2

paragraph tag can be transformed from a block level element to an inline-block element by including the CSS property display:inline-block.

CSS Example:

#room-id{
display:inline-block;
}

Answer №3

It's possible that your CSS wasn't working as intended.

.content .chat-section .chat-window .chat-top-bar {
  height: 8%;
  width: 100%;
  box-shadow: 1px 2px 5px #888888;
  background-color: white;
  z-index: 10;
}
.content .chat-section .chat-window .chat-top-bar #room-id {
  margin-left: 20px;
  font-size: 18px;
  float: left;
}

.content .chat-section .chat-window .chat-top-bar #room-info {
  float: right;
}

The selectors .chat-top-bar #room-id and .chat-top-bar #room-info may not be accurate, considering the parent selectors with the > first child selector.

<div class="content">
  <div class="chat-section">
     <div class="chat-window">
       <div class="chat-top-bar valign-wrapper">
         <p id="room-id"><b>Title</b></p>
         <i class="material-icons" id="room-info">info</i>
       </div>
     </div>
  </div>
</div>

If there is another container wrapping these elements, selecting 

.content .chat-section .chat-window .chat-top-bar #room-info
will fail. Simply remove the >, as it is unnecessary.

Additionally, set <p> to display: inline-block since block elements have a default width of 100%.

I hope this explanation helps!

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 are the steps to clear a client's local cache after updating my website?

Is there a simple way to clear the cache of all players who have previously played my game? The game stats are stored in local storage, and some players experienced bugs when the stats were incorrect. This outdated data is now affecting the updated stats ...

javascripthtmlcss

"What is the best way to eliminate duplicate data from an ng-repeat loop in AngularJS

I have a query regarding appending data from the second table into $scope.notiData in AngularJS. Additionally, I need to figure out how to remove ng-repeat data when the user clicks on the remove symbol X. I have attempted some code but it is not functioni ...

javascripthtmlangularjs

Achieving a full width vertical navigation on the left side using Bootstrap's grid system: a step-by

I am looking to design an admin panel using bootstrap. To start off, I want to create a navigation menu on the left side. However, I encountered an issue where my navigation menu with a red background does not stretch the full width of the left column. Her ...

htmlcsstwitter-bootstrapbootstrap-4

Looking for assistance with the navbar notification icon?

My navbar notification button is causing a problem by resizing the navbar. example Below is the code snippet: .badge-notify{ background:red; position:relative; top: -20px; left: -35px; } <ul ...

htmlcssbuttonnotificationsnavbar

Troubleshooting alignment problems with CSS DIVs within VUE Components

I have a Vue application with 2 components, each housed in their own div. My CSS skills are not strong, so I found a CSS template that works well and is responsive. However, I've noticed that the top and bottom divs do not align properly and their wid ...

cssvue.jsvue-component

CSS: The margin property cannot be used to horizontally center elements

I've been attempting to center the div elements horizontally by using margin: 0 auto;, but for some reason, the items keep showing up on the left side of the HTML page. body { background: #f06d06; font-size: 80%; } main { display: inl ...

htmlcsscenter-align

Change all instances of the asterisk character to a red color on every page using CSS styling

Is it possible to change the color of the asterisk that indicates required fields on all forms across my site without having to wrap it in a div or another wrapper? ...

cssvalidationrequired

Can you include an optional selector in SASS?

Here is an interesting concept: adding a CSS-selector optionally to the existing selector stack within a mixin. This is what I envision: @mixin myMixin(mobileSelector:true) { @if(mobileSelector) { .foo .mobile:before, } .classXY .subclass:before ...

csssassdart-sass

Issue encountered: The differ cannot recognize the provided object '[object Object]', which is of type 'object'. NgFor is limited to binding Iterables only

I have been following a tutorial on Ionic created by Paul Halliday, focusing on a shopping list project that utilizes Firebase and Angular. However, I am encountering an error every time I try to run the application: Error: Uncaught (in promise): Error: ...

javascripthtmlangulartypescriptionic-framework

Steps for Aligning the Label and Textbox Horizontally

<div class="form-group row"> <div class="col-6 "> <h4> <label class=""> Can you meet the required amount of money? @(HelpSeeker.money_needed= He ...

htmlbootstrap-4

Implementing a click event on a selection option – tips and tricks

When I want to select an option, I can use the following script: Javascript $("#practice-area optgroup option").click(function(){ // insert your function here }); HTML <select name="practice-area" id="practice-area"> <option value="0">S ...

javascriptjqueryhtml

How to style the first column of the first row in a table using CSS without affecting nested tables

Having some challenges with CSS selectors, I'm hoping to find some assistance here. Presented with HTML code that resembles the following: <table class=myTable> <tr> <td>this is the td of interest</td> </tr> ...

css

Manipulating contextual selectors

Have you ever tried reverting or overriding attributes from contextual selectors? .card { padding-top: 20px; ... } .card .card-header { padding: 0 20px; } .card .card-header.news { padding-top: 0px; } Do you think it's possible to elimina ...

cssinheritancecss-selectors

Toggle multiple buttons based on the data fetched in the created() lifecycle hook

I have several toggle buttons that should be selected based on the values present in the response obtained through the created() method. <li> <input v-on:click="toggleCheckbox($event)" ...

htmlcssvue.jsvuejs2vuetify.js

Guide on sending table data in JSON format using jQuery

Here is a table I have: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ // Looking for sugge ...

javascriptjqueryhtmlcss

Instructions on filling the star icon with color upon clicking the button

Currently working on a project using codeIgniter where I have a form for rating products. I am facing an issue where, upon clicking the star button, only the border color changes to yellow while the center of the button remains white. Can someone please g ...

javascripthtmlcsscodeigniter

Transferring data from a div to JavaScript

As a newcomer to the world of javascript, I am experimenting with it for the first time. I have a div that triggers a javascript function. Within this setup, I utilize a timezone controller along with a show.html file that displays the timezone information ...

javascriptjqueryhtmlruby-on-rails

Loading data with Ajax from a remote file using a specific identifier

Can someone lend me a hand with an issue I'm facing? I've set up a small like system here. Within my HTML file, I have various data with unique IDs. Take a look at the code in my remote.html file below: <span id="14">314</span> < ...

javascriptphphtmlajax

Align an Image Vertically Using Bootstrap's Grid System

Hey there! I've been trying to center an image within a "div" tag using Bootstrap, but despite my best efforts and reading through various resources, I haven't been able to crack it. * { margin: 0; padding: 0; } .people-one { w ...

htmlcssalignmentbootstrap-5

Adjust the CSS of a nested div within the currently selected div upon page load

I am facing an issue with a page that users access by clicking through an ebook. Upon clicking a link, they are directed to a specific product on the page, and the URLs look like example.com/#product1 example.com/#product6 example.com/#product15, etc... ...

javascriptjqueryhtmlcss