``There seems to be an issue with CSS float not displaying

I'm struggling to get two divs to display next to each other without the formatting going haywire. Can anyone help me solve this issue?

Check out the Fiddle here

<div class="pull-right" style="width:400px;">
  <div style="float:left; margin-right:90px;">
    <b>Registered owners</b>
    <div id="ctl00_ContentPlaceHolder1_unitRegOwners">Robert<br /></div>
  </div>
 <div>
    <b>Registered tenants</b>
    <div id="ctl00_ContentPlaceHolder1_unitRegTenants">Jenny Garth<br />Mike Mechanic<br />Joe Rogan<br />Test Test<br />John Doe<br /></div>
  </div>
</div>

The problem I'm facing is that only the first tenant shows up under Registered Tenants, while the rest are mistakenly listed under Registered Owners. It seems like there's an issue with the div wrapping or something similar.

(Please disregard the server side tags and classes, as removing them doesn't change the issue.)

I would greatly appreciate any assistance in resolving this!

css

Answer №1

I believe the desired outcome can be achieved by floating the element next to it as well:

Check out this JS Fiddle for a visual representation

<div class="float-right" style="width:500px;">
  <div style="float:left; margin-right:80px;">
    <b>Current employees</b>
    <div id="employeeList">Jane Doe<br />John Smith<br />Alice Johnson<br /></div>
  </div>
  <div style="width:300px; float: left;">
    <b>Former employees</b>
    <div id="formerEmployeeList">Michael Brown<br />Sarah Lee<br />Chris Evans<br />Emily Clark<br /></div>
  </div>
</div>

Answer №2

Make sure to add "float: left" to your div that you want on the right side, this will ensure it aligns against the right side of the Owners div:

<div class="pull-right" style="width:400px;">
  <div style="float:left; margin-right:90px;">
    <b>Registered owners</b>
    <div id="ctl00_ContentPlaceHolder1_unitRegOwners">Robert<br /></div>
  </div>
 <div style="float:left;">
    <b>Registered tenants</b>
    <div id="ctl00_ContentPlaceHolder1_unitRegTenants">Jenny Garth<br />Mike Mechanic<br />Joe Rogan<br />Test Test<br />John Doe<br /></div>
  </div>
</div>

https://jsfiddle.net/gLcag72p/2/

The Tenants div was wrapping around the Owners div because only the Owners div had a float defined. This made the content appear pull-quote style with everything else wrapping around it.

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 method for users to add a div element and its contents?

As someone new to the world of web development, I am currently learning and working on a project. I have encountered an issue with creating a custom div that includes a link and user-defined text. I want the div to be generated automatically when the use ...

javascriptjqueryhtmlcss

What is the best way to display JSON responses from AJAX in separate divs with identical class names?

I've been going through a whirlwind of confusion lately, unable to find a solution after spending over 100 hours on this. I'm reaching out for help in hopes that someone can guide me in the right direction! UPDATE: To clarify my issue and seek a ...

javascriptphpcssajaxhtml

Steer clear of dividing words

I am attempting to showcase sentences letter by letter with a fade in/fade out effect. However, I am facing an issue where words break in the middle. How can this word breaking be prevented? var quotes = document.getElementsByClassName('quote' ...

javascripthtmlcsseffects

In the Bootstrap multiselect feature, users will be able to choose whether to display an image or selected text

Is there any way to display an image by default instead of options? Code: <select id="example-post" style="width:120px;!important;" class="footerSelect" name="multiselect[]" multiple="multiple"> <opti ...

javascriptjquerycsshtmltwitter-bootstrap

Having difficulty positioning content inside a div element

I am working with a set of three divs, each containing a .header class and a .content class. While I have managed to align the .header class correctly, I am facing an issue with aligning the .content class below the header with 10-15px padding on all sides ...

htmlcss

Nested CSS selector within a parent element

How can I change the color of both elements inside a custom button when the button is active? The first color is defined by the class of the button, and the second color is defined by the class of the span inside that button. CSS: .buttonClass{ color:b ...

htmlcsscss-selectors

Develop a container element with protective measures against external CSS styles impacting internal elements

As I work on integrating my webpage code into a large project, I have encountered an issue. The entire project code is contained within a div element inside the <main> tag. However, when I add this container div within the <main> tag, the pro ...

htmlcss

Comparing layout options: Tables vs Lists for user registration forms

I need to create a user registration form with a classic two-column layout, where labels are on the left and fields are on the right. The labels can be displayed in either English or French, resulting in varying label lengths. When it comes to structuring ...

cssformstablelayout

The mixin 'media-breakpoint-only' is not defined

Recently, I decided to delve into coding with Bootstrap4 and Sass. I made sure all the necessary configurations were in place for my environment/project setup: including ruby 2.3.1p112 (2016-04-26 revision 54768) [i386-mingw32] and a list of installe ...

rubytwitter-bootstrapcsscompass-sassbootstrap-4

Utilize the .mat-column-name attributes to apply custom styles to a nested component within Angular Material

Within the Child component, an Angular material table is created with columns passed as input: <table mat-table> <ng-container *ngFor="let col of columns" [matColumnDef]="col"> </table> @Input() columns: string[] T ...

cssangularsassangular-material

Enhance your webpage design with stylish CSS formatting using Bulma cards

My HTML output is as follows: https://i.stack.imgur.com/aBdEF.jpg It seems that the footer is not matching up with the cards... The CSS component I am using looks like this: .card-equal-height { display: flex; flex-direction: column; height: 100%; ...

htmlcssangularbulmacard

Unable to adjust the width of a datatable using the jQuery Datatable plugin version 10.1

I am facing a challenge with multiple datatables using the jQuery plugin on my page. Some of the datatables fit perfectly within the page width, while others extend beyond the page boundaries. Despite trying various methods, including setting styles in HTM ...

jqueryhtmlcssdatatable

Import of Bootstrap causing disruption in positioning of <figure> element

Check out this codepen example: https://codepen.io/anon/pen/Xgqjyq h2 { color: #111; font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: bold; text-align: center; } .content { margin-left: 5px; margin-right: 5px; t ...

htmlcsstwitter-bootstrap

Automatically generated webpage smoothly scrolling downward

Within my application, I have been developing dynamic pages with a CSS property of overflow-y:auto applied to the page container. Everything seems to be working fine, The issue arises when the page loads and the height exceeds that of the container. While ...

javascriptjqueryhtmlcss

Switch between classes using the glyph icons from Twitter Bootstrap

I recently implemented a toggle-class feature with Bootstrap glyph icons, but I seem to have encountered an issue with my CSS file. Despite trying to figure out where the mistake lies, I can't seem to pinpoint it. The problem is that in this example, ...

csstwitter-bootstraphovertoggleclass

Placement of navigation bar on top of picture

Creating a gaming website and encountering challenges with text alignment. The goal is to have the navbar text positioned on top of a customized navbar background. Current appearance navbar example <!DOCTYPE html> <html> <head> ...

htmlcss

How to override existing in-text styling when applying new styles

I am struggling with a website that is built on a CMS. The custom pages are generating html code with styling added to the elements individually, rather than through a style sheet. My issue is that I need to either remove the background-color property fro ...

csscss-selectors

Attempting to achieve the effect where the entire row of a table changes color when the mouse hovers

I'm attempting to create a gradient effect for an entire row in a table when the mouse hovers over any cell within that row. Despite using what I believe is the correct CSS code, nothing changes upon mouseover (even though the original gradient appear ...

csshover

Modify the height of the panel-header in Bootstrap

I'm attempting to adjust the height of Bootstrap panel-header. However, when I modify the height using the following CSS code: style="height: 20px;" The title inside the header becomes misaligned. To see an example, check out this Plunker demo. Wh ...

htmlcsstwitter-bootstrap

What could be causing angular-datatable to not properly fill columns in Bootstrap 4?

I have been attempting to create a responsive table using angular-datatables (for angular 7) and bootstrap 4, but I am encountering issues with the current appearance of the table: Current HTML code: <div class="row"> <d ...

htmlcssangular7angular-datatables