The div is not positioned on the left side

I'm struggling with aligning three divs next to each other in HTML and CSS. I've set them to float: left, but they are not obeying this style rule.

.threethings {
  width: 20%;
}
.threethings div {
  text-align: center;
  position: relative;
  float: left;
}
<div class="threethings">
  <div><span>Style</span>
    <br>
    <p>Lorem ipsum dolor sit amet, ius te ullum indoctum, sanctus consequat eum te. Nemore recteque necessitatibus et eos.</p>
  </div>
  <div><span>Style</span>
    <br>
    <p>Lorem ipsum dolor sit amet, ius te ullum indoctum, sanctus consequat eum te. Nemore recteque necessitatibus et eos.</p>
  </div>
  <div><span>Style</span>
    <br>
    <p>Lorem ipsum dolor sit amet, ius te ullum indoctum, sanctus consequat eum te. Nemore recteque necessitatibus et eos.</p>
  </div>
</div>

htmlcssweb

Answer №1

Give this a shot:

        .threethings {
            width : 100%;
        }

        .threethings div {
            width: 20%;
            text-align: center;
            position: relative;
            float : left;
        }

Here's what's going on - the divs are floated, but not next to each other because you're giving the parent a 20% width. This prevents the children from floating side by side.

What I did was give the parent a larger width and the children a smaller width so they can float next to each other.

Also, since a div is a block element, width:100% may not be necessary.

Answer №2

Make sure you apply the float property to the parent class, not just the individual divs containing paragraphs. To have the proceeding divs float alongside the 3 nested divs, add the .threethings class to them.

Consider setting a fixed width for the divs as well, especially if the paragraphs they contain are longer than the html body width. This will prevent them from wrapping onto a new line unnecessarily.

Answer №3

Give this a try:


.singleitem {
       max-width:100%; 
    }
    .singleitem ul {
        width:33%; 
        position: absolute;
        display : inline-block;
    }

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

When you hover over the Dropdown Menu, the Hoverable Dropdown Menu will automatically close

I am currently working on creating a dropdown menu that pops up when hovering over an item. However, I am facing two challenges: Once my mouse moves away from the item, the dropdown disappears. Therefore, I would like the dropdown to remain visible as lo ...

htmlcss

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 ...

pythonhtmlparsingbeautifulsoup

Tips for creating zoomed-in background images on small screens

I am currently implementing this code for a website project .homepage{ background-image: url(/wp-content/themes/ep/img/_.png); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background ...

twitter-bootstrapcss

Transform the text with a stylish touch within a 'textarea' element

I am currently working on a form with the following design: At the moment, I am at this particular stage and focusing on some minor details: One issue I have encountered is that the "Your text..." appears stuck to the top left corner of the textarea. I a ...

htmlcsstextareamargin

experiencing a problem with the scrollTo() function

I am encountering difficulty in finding the correct X and Y coordinate values to move an image using mouse scroll within a div. I have included my sample code below. I have successfully managed to scroll the image without using a div. Can anyone assist m ...

javascripthtml

How can I create a basic jQuery validation that only applies to the border and background without affecting the text?

I have been on a lengthy quest to find the simplest way to implement jQuery validation - essentially changing border color and background. No frills, just the basics! Many methods I've come across seem to involve a lot of code. Take this snippet as a ...

jqueryformswebvalidation

The PHP form in an HTML file fails to function properly if multiple forms are included

When working with multiple forms in a PHP file that are called using the 'include' command, I encountered an issue where placing the include command before the forms on the HTML page made it work. However, I needed to call the include command bel ...

phphtmlforms

Looking for a list that you can edit with CSS styling?

I'm struggling to create a flexible list that can be easily modified. My goal is to have an ordered list with unique labels such as 1,2,3,4,5,6,7,8,9,0,A,B,!,# Although I've managed to number the list items, I am stuck on adding the extra label ...

jquerycsslist

Scrollbar customization feature not functional in Firefox browser

I recently finished developing a website and I have customized the main vertical scrollbar. Unfortunately, I am facing an issue where it works well on Google Chrome and Safari but not on Mozilla Firefox. Does anyone have any suggestions on how to trouble ...

cssfirefoxwebkitscrollbarcustomization

Swapping one div for another, all the while incorporating a limited number of buttons within the webpage

I'm faced with a dilemma on my HTML page. In the middle of the content, there's a div that contains 4 links with images and text inside. What I'm looking to achieve is for each link to trigger a complete change in the div when clicked, with ...

javascripthtmlcss

How to Access a div from another website using jQuery

I have a question. How can I call a div from another website using JavaScript? Here is the page: Now, I want to call the <div id="testa"> in another page. The other page is called Otherpage.html: jQuery(function($){ $(&ap ...

javascriptjqueryhtml

What is the best way to define my background image using markup language?

I'm facing a challenge with some code that I didn't write which includes a background-image. While I want to maintain the identical appearance, I prefer to set the image in my markup rather than CSS. However, I'm unsure of how to do this. T ...

cssbootstrap-4background-image

Chrome's Surprising Cross-Domain File URL Problem

Is anyone else experiencing the issue with Chrome throwing a Cross Domain Error when using file URLs? I'm trying to embed an SVG document into an HTML page using the object tag with a relative path in the data attribute. Upon the onload event, I need ...

htmlsvgcross-domainembed

Create two floating divs that adjust their height dynamically to be equal

Situation: I have a container with two direct children, known as "left" and "right". The height of the "left" child should never exceed the height of the "right" child. However, the "right" child can extend beyond the height of the "left" child. I am stru ...

htmlcsscss-float

What is the best way to delete a table that I created through my programming?

I have utilized the following code to create a table: <html> <head> <title>Table Time</title> </head> <body> <table border="1px"> <tr> ...

htmlhtml-table

Having trouble converting svg to png, thinking it might be due to discrepancies in svg elements

I am facing a puzzling issue where two different SVG elements are causing my JavaScript to work in one scenario but not the other. I have replaced the SVG elements in both examples, and surprisingly, only one works while the other does not. You can view th ...

javascriptjqueryhtmlcsssvg

Ensuring the alignment of a personalized list bullet with the accompanying text

Looking to make the bullet point next to an li element larger? The common approach is to eliminate the standard point, add a custom one using the :before selector, and adjust the font size of the added point. While this technique somewhat achieves the goa ...

htmlcsshtml-lists

How to align icon and text perfectly in a Bootstrap 5 Button

I am looking to align icons and text within a modal body: <div class="modal-body"> <div class="d-grid gap-2" id="someButtons"> </div> </div> This code snippet demonstrates how I insert buttons ...

javascriptcsstwitter-bootstrapbootstrap-5

JS code query to specifically target iOS devices

What are the steps to develop a website that can only be accessed by iOS users? In other words, if someone is using Windows or Android, they would be blocked from accessing the site with a message suggesting they download it on Android instead. Additional ...

htmlreactjsreact-native

Whenever I open my collapsible dropdown, it seems to leap up unexpectedly

When I interact with the collapsible card, it has a jerky animation. I would like it to open smoothly instead. The issue lies with the tooltip-cus class. If I remove position: relative;, the opening animation is smooth, but then the position of the toolti ...

htmlcssbootstrap-4