Height:auto causing problem for content with varying height? Check out the demonstration on jsFiddle

Can you help me with the HTML below? I want the container to wrap around the section, content, and elements, and have element2 positioned directly next to element1.

<div class="page">
    <div class="container">
        <div class="section">
            <div class="content">
              <div class="element1">Elements Go Here And Here And Here And Here .. more elements hereafter</div>
            </div>
        </div>        
        <div class="section">
            <div class="content">
              <div class="element1">Elements Go Here And Here And Here And Here</div>
              <div class="element2">more elements hereafter</div>
            </div>
        </div>
    </div>
</div>

The CSS provided does not seem to work as intended. You can see the issue in this JSFiddle link:

.container {
    width: 100%;
    min-height: 74px;
    height: auto;
    border: 1px solid rgba(142, 142, 142, 1);
}
.section {
    width: 100%;
    min-height: 37px;
    height: auto;
    border: 1px solid rgba(142, 142, 142, 1);
    background-color: blue;
}
.content {
    float: left;
    min-height: 37px;
    height: auto;
    width: 100%;
    line-height: 1.42;
    padding: 2%;
    border: 1px solid rgba(142, 142, 142, 1);
}
.element1 {
    float: left;
    font-size: 12.9px;
    padding-top: 2px;
    letter-spacing: 0.07em;
    background-color: green;
}
.element2 {
    float: left;
    padding-left: 3px;
    background-color: purple;
}
.page {
    width: 50%;
    height: auto;
    margin: 0 auto;
    padding-top: 5%;
}

Answer №1

Using float: left; alongside width: 100%; seems unnecessary in any scenario. From my own experience, the usage of float is often excessive and not fully grasped by many. "A direct continuation of element1" is a bit unclear, but perhaps switching to display: inline; could be more appropriate.

Visit this jsFiddle link for more information.

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

Scripting method to transfer multiple subdirectories using a cpanel.yml file (excluding the use of the wildcard)

I have been referring to the documentation found at My current issue is that when I try to copy my subfolders, it doesn't work properly unless I use a workaround. The only way I am able to achieve the desired outcome is by utilizing the following co ...

When using Ruby and Rack on Heroku to serve a static site, the CSS styling may not be

Trying to deploy a static site consisting of HTML, CSS, font, and image files with Ruby Rack has been a bit challenging. While the HTML displays perfectly in Chrome when running it locally, the CSS assets do not seem to be loading or being applied to the H ...

Remove the footer from the main section

I'm facing an issue with the web page layout of my website. Here is a snippet of the structure: <body> <div class="container"> <div class="sidebar"> </div> <div class="content"> </div> </div> < ...

The HTML function transforms blank spaces into the symbol "+"

Just starting out with a question: I created a basic submission form, but I noticed that if there are any spaces in the inputs, the values get changed to a plus sign (+). Here's my form: <form name="input" action="search" method="get"> Web Ad ...

Columns that can be resized in a right-to-left (

Whenever I use RTL, the columns behave erratically when resizing... I have implemented colResizable. You can see an example here: http://jsfiddle.net/r0rfrhb7/ $("#nonFixedSample").colResizable({ fixed: false, liveDrag: true, gripInnerHtml: "<d ...

Utilizing htmx for interactive elements throughout the website

When I make an htmx-request on my page, a loading spinner is displayed like this: <div class="col-4 px-4dot5 py-3 bg-secondary-light"> <label for="stellenangebotLink" class="form-label fs-5">Link</label> ...

Desktop displays do not show images, only mobile devices

My website displays multiple retailer images as affiliate links. I am facing an issue where the images are not visible on desktop for some users, even though I can see them on my end. I have tried clearing cache, cookies, and using different browsers, but ...

View the full desktop version of the website on your mobile device

Which viewport dimensions should be added to the viewport meta tag in order to view a desktop version of a mobile site while browsing? ...

Modify the label contents to reflect the selected file, rather than using the default text

Currently, I am working on customizing my file upload input to enhance its appearance. Everything is going smoothly so far, but I am facing difficulty in finding a suitable jQuery script that can meet my specific requirements. My objective is to have the ...

Is it possible for inline-block list items to wrap words onto new lines?

I'm working on displaying a series of details within an unordered list inline, but facing an issue with some list items being too long for the relatively small area available. This is the unordered list I'm adding to my view: "<ul class=&apo ...

Ways to extend the length/size of the HTML5 range input type

Is there a way to adjust the length or size of the HTML5 range input for it to appear longer or bigger? <!DOCTYPE html> <html> <body> <form action="/" method="get"> Points: <input type="range" name="points" min="0" max="10"& ...

Remove any unnecessary white space and new lines from the HTML code

Is there a way to remove double whitespaces and new lines from my HTML output without altering the ones within textarea and pre tags using PHP? ...

Enter the text div that has been chosen

I have a mini question regarding how to select text and place it in a selected div. This demo was created from codepen.io. In this demo, you will see a blue button and text in a textarea. I would like to be able to select the text "Select this text", cli ...

Manipulating CSS animations through JQuery

Currently, my animation is triggered by a :hover event. However, I would like to change it so that the animation starts when a button is clicked. Can someone guide me on how to manipulate the CSS using JQuery? //CSS .mouth{ top: 268px; left: 273px; ...

Styling Overflow in Coda Slider using CSS

Currently utilizing the Coda Slider for my project. For those unfamiliar with the Coda Slider, it initially hides the overflow-x position until a tab is clicked. This triggers an animation that slides the hidden DIV in either from the right or left side. ...

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

I have a javascript file that rotates text in 3D format, and I need help converting it into an Angular component specific TypeScript file. You can find the codepen for the original JavaScript code here. Below are my Angular files: index.html <!doctyp ...

Angular 5: Transforming and Concealing CSS Class Names

Can CSS selectors be renamed or obfuscated in an Angular CLI project? Many top websites like Google and Facebook use randomized CSS names for various reasons, such as preventing website scripting through targeting static class names. I would like to imple ...

Guide to Embedding an External CSS Stylesheet

I have made edits because the link to the "previously answered solution" is not helpful. Find additional information attached at the end of this question Original Query All my HTML pages contain two links to external style sheets. As a result, I am look ...

Uploading an image without the submit event is not possible with AJAX

Looking for a way to upload images asynchronously using AJAX? I've scoured the internet for solutions, tried various combinations of codes, but none seem to work without a submit event. I want to stress that I can upload images using a button that tri ...

Automatically fill in checkboxes based on user input

Having a simple problem here, I am attempting to dynamically populate check-boxes in an HTML form. However, when I try using the checked property of the checkbox in HTML, it doesn't work correctly. The checkbox remains checked whether I use checked=&a ...