div positioned on top of additional div elements

My HTML code consists of simple div tags

<div class="left">Project Name: </div> 
<div class="right">should have a name</div>
<div>Shouldn't this be on a new line?</div>

These classes are defined in a stylesheet as follows:

.left {
  float: left;
  width: 125px;
  text-align: right;
  margin: 2px 10px;
  display: inline
}
.right {
  float: left;
  text-align: left;
  margin: 2px 10px;
  display: inline
}

The issue I am facing is that there appears to be overlapping elements when using alignment properties with the div tags. Any subsequent div tag seems to ignore the previous ones. Please refer to http://jsfiddle.net/tea0phnr/2/ for a visual demonstration.

htmlcss

Answer №1

CSS

.clear {clear:both;}

HTML

<div class="left">Project Name:</div>
<div class="right">ensure it has a name</div>
<div class="clear"></div>
<div >Shouldn't this go on a new line?</div>

Check out the code here

Answer №2

Your floating elements are causing the layout to be out of alignment, with the last element not flowing correctly. To fix this issue, you can use the clear:both; property on the last element, or create a pseudo element ( div:last-child:after )

div:last-child {
    clear: both;
}

http://jsfiddle.net/hzdcu1xw/

You could also try using float along with width: 100%; on the last element for proper layout.

div:last-child {
    float: left;
    width: 100%;
}

http://jsfiddle.net/efapLo2d/ to ensure proper alignment.

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

I am looking to create a div that can consistently refresh on its own without needing to refresh

I have implemented a comment system using ajax that is functioning well. I am looking to incorporate an ajax/js code to automatically refresh my "time ago" div every 5 seconds so that the time updates while users are viewing the same post. Important note: ...

javascriptcssajax

background gradient coloring and image blending

I have created a special class that includes a gradient background color: .banner { background: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D; } Additionally, I have defined another class that adds a background ...

htmlcss

Animating an image inside a bordered div

I'm attempting to create an animated effect where an image moves randomly within the boundaries of a div container. While I've come across solutions for animating within borders, none have specifically addressed keeping the image inside the div. ...

javascriptjqueryhtmlcss

Adjust color in real-time with JavaScript

I am using a json file to store data for generating a diagram, and I want to change the color of the diagram conditionally based on an attribute in the json. If the attribute is false, the color should be red, and if true, it should be green. Here is a sni ...

javascripthtmlcssjsonangular

Filtering options in a dropdown box with jQuery

I have implemented a feature where the content of one select box is filtered based on the option selected in another select box. Below is the code snippet that achieves this functionality: // Filter content based on the selected option in a region select ...

javascriptjqueryhtml

After making an Ajax call using AngularJS in a PHP file, I expected to receive only a success or fail message. Instead, I received the entire HTML page code along

After making an Ajax call using AngularJS in a PHP file, I expected to receive only a success/fail message. However, I ended up receiving the full HTML page code along with tags. Here is my AngularJS code: $http.post('ajax_Location.php',{ &apos ...

javascriptphpjqueryhtmlangularjs

I would appreciate your assistance in the modification of the input type from text to radio within the PHP code

I've been struggling to update the input type from text to a radio button for Gender selection in my Wordpress theme's user profile settings. I can't seem to get it right in the code and I'm not sure how to make the change. I tried usi ...

phphtmlwordpresscustom-fields

Troubleshoot: Why is my Bootstrap 3 responsive navigation bar not functioning

When using drop down items that are longer in length, they tend to wrap down to the next level rather than overflowing. I am not well-versed in @media queries, but I've noticed that on mobile devices the dropdown collapses in the navigation menu, whil ...

csstwitter-bootstraptwitter-bootstrap-3

Please enter a number using the "+" sign and a decimal point

In my input field, I have specified: <input type="number" step="0.01"> I expect all of these input values to produce the following outputs: 2.00 => 2.00 2,00 => 2.00 +2,00 => 2.00 However, when entering the value "+2.00", it fail ...

javascripthtml

Swapping out the JSON data from the API with HTML content within the Vue.js application

I am currently working on a project involving Vite+Vue.js where I need to import data from a headless-cms Wordpress using REST API and JSON. The goal is to display the titles and content of the posts, including images when they appear. However, I have enco ...

javascripthtmljsonvue.jsheadless-cms

Having trouble with a basic Div/CSS layout? Not turning out how you expected

While experimenting with CSS, I encountered a challenge in creating a simple horizontal stack of words. It seems impossible to align the content of one div in the center while the other div is empty. For example, I tried doing this in Chrome and here is t ...

css

How can you toggle the visibility of a div based on detecting a specific class while scrolling?

My webpage features a sticky header that gains an extra .header-scrolled class when users scroll down. I am looking to switch the logo displayed in the header once it has been scrolled. Below is a simplified version of my HTML code: <header class=".he ...

javascripthtmlcss

Is there a way to rearrange my divs in the mobile display?

Is there a way to make the image column stack below the text info column in mobile view? I've tried using flexbox without success, so any help would be greatly appreciated. Thank you! <div class="container"> <div class="row"> ...

htmlcsstwitter-bootstrapflexbox

Utilizing AngularJS for Your Business Website

We are in the process of developing a new commercial website to replace our current one. Concerns about performance are on our minds. The amount of data we have per page is not very heavy, with a maximum of 150 data binds. We plan to use AngularJS 1.2 t ...

javascripthtmlangularjs

Vue.js app does not have the capability to display JSON data as a table

I successfully fetched JSON data in my vue app from the endpoint '/v1/api/sse?raceId=1', but I'm struggling to convert this JSON into a table format. The JSON is displaying correctly, but I'm unsure how to structure it into a table. He ...

javascripthtmlvue.js

Trouble with importing scss file in sass and bootstrap collaboration

I am using Sass with Bootstrap 4, and now I'm facing an issue in my Sass folder where I have an app.scss file that includes: @import _customVariables.scss @import node_modules/bootstrap/scss/functions @import node_modules/bootstrap/scss/mixins Howev ...

csssassbootstrap-4

Invoke the session on a different page and incorporate it into your JavaScript code

My php files, ajax.php and index.php, contain a mix of php code, html, and javascript. I am developing a quiz website where questions are retrieved from a database using sql in ajax.php and displayed on index.php through an ajax method. The user's sco ...

javascriptphpjqueryhtmlajax

Webkit feature: Rounded border image overlay

One issue arises when applying a rounded border to an image in webkit browsers as the border ends up hidden behind the image. CSS img { border: 10px solid #000; border-radius: 100%; } HTML <img src="http://25.media.tumblr.com/tumblr_mbje ...

webkitbordercss

Transfer the photo and save it to my database

I've been working on creating a form to upload images and store them in my database, but I'm facing some challenges: Notice: Undefined index: fileToUpload in C:\xampp\htdocs\confee\admin\upload.php on line 3 Notice: Un ...

phphtmlmysqlsqldatabase

Theme.breakpoints.down not being acknowledged by MUI breakpoints

The Challenge: Implement a hamburger menu to replace the navMenu on tablet and smaller screens After successfully compiling in VS code terminal, encountering an error in the browser: Error Message: TypeError: Cannot read properties of undefined (reading ...

javascripthtmlcssreactjsmaterial-ui