Why do the layout columns become empty when floated DIV's are combined with selects?

Upon reviewing the code below, I noticed that when all the SELECT elements are removed from the HTML, the alignment of the DIV containing SELECT 4 is corrected and stacked properly without any skipped columns. This raises the question - Could there be default CSS styling applied to SELECT elements causing this issue? What am I missing here?

<div style="height:300px; text-align:right; padding-right:8px; margin-top:5px;">
<div style="float:left; width:33%;">1: <select name="brands" style="width:65%;">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select></div>
<div style="float:left; width:33%;">2: <input type="text" name="model" style="width:65%;" /></div>
<div style="float:left; width:33%;">3: <select name="type" style="width:65%;">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div style="float:left; width:33%;">4: <select name="caliber" style="width:65%;">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select></div>
<div style="float:left; width:33%;">6: <input type="text" name="accuracy" style="width:65%;" /></div>
<div style="float:left; width:33%;">7: <input type="text" name="finish" style="width:65%;" /></div>
<div style="float:left; width:33%;">8: <input type="text" name="action" style="width:65%;" /></div>
<div style="float:left; width:33%;">9: <input type="text" name="stock" style="width:65%;" /></div>
<div style="float:left; width:33%;">10: <input type="text" name="capacity" style="width:65%;" /></div>
<div style="float:left; width:33%;">11: <input type="text" name="chokes" style="width:65%;" /></div>
<div style="float:left; width:33%;">12: <input type="text" name="chamber" style="width:65%;" /></div>
</div>

After removing the Selects and corresponding DIV's, the correct alignment is achieved as shown above.

csshtmldrop-down-menucss-float

Answer №1

It's not recommended to use inline CSS, so I made sure to separate the HTML from the CSS. Remember to wrap text elements in a label tag and match the label's for attribute with an id.

For the issue at hand - you just needed to set a height on the wrapping div elements. The input elements were 24px high, while the select elements were 26px high. To prevent floating elements from breaking to a new line, a height of 26px would work well. See this (working example).

CSS:

form {
    height:300px;
    text-align:right;
    padding-right:8px;
    margin-top:5px;
}
form > div {
    width:33%;
    float:left;
    height:26px;
}
form > div > select, form > div > input {
    width:65%;
}

Updated HTML

<form>
    <div>
        <label for="brands">1:</label>
        <select id="brands" name="brands">
            <option value="option1">option1</option>
            <option value="option2">option2</option>
            <option value="option3">option3</option>
        </select>
    </div>
   <!-- more updated HTML here -->
</form>

To avoid floating elements, consider using inline-block level elements instead. This achieves the same effect without requiring you to set a specific height.

Example illustrating this

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

Can you explain the distinction between align-content and align-items?

Can you explain the distinction between align-items and align-content? ...

csslayoutflexboxalignment

Guide to setting up a dropdown menu with Material UI in React JS

I'm currently working on a dropdown menu that includes a nested menu structure, as depicted below: https://i.sstatic.net/FleC5.png Upon expanding the dropdown, two options are displayed: https://i.sstatic.net/jQlwN.png The issue I'm facing is ...

javascriptreactjsdrop-down-menumaterial-ui

Leverage Bootstrap to manage multiple tab panels with one tab navigation system

Is there a way to control two different tab contents with a single tab navigation in Bootstrap 4? In Bootstrap 3, I used comma separated data targets for achieving this (like in this example: ). However, in Bootstrap 4, this method no longer works for ta ...

jquerycsstwitter-bootstrapbootstrap-4bootstrap-5

What causes Bootstrap to display two cards simultaneously when collapsed?

Here is the Bootstrap Collapse code I am using: <section class="download bg-primary text-center"> <div class="container"> <div class="row"> <div class="col-12 col-md-2"> ...

htmlcssbootstrap-4

Vue.js transition-group does not apply the *-move class

As I dive into learning Vue, I find myself wondering if I may have overlooked something fundamental or stumbled upon a bug. Despite multiple readings of the documentation at https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions, I still can& ...

javascriptcssvue.js

Preventing placeholder from reverting back on transition (CSS)

My goal was to create an input field with a transition effect on the placeholder text. To achieve this, I utilized a <span> tag to hold the placeholder and applied a transition using the :focus CSS selector. The implementation works smoothly, but the ...

htmlcssdebuggingcss-transitionsplaceholder

Using the class for jQuery validation as opposed to the name attribute

I am looking to implement form validation using the jquery validate plugin, but I am facing an issue with using the 'name' attribute in the html since it is also used by the server application. Specifically, I want to restrict the number of check ...

javascriptjqueryhtmlcssjquery-validate

What could be causing certain Bootstrap classes and CSS properties to not function properly in my code?

My goal was to create a website template using BOOTSTRAP and CSS. However, I encountered some issues in my code where certain Bootstrap classes are not functioning as expected, such as lead, font-weight, color, bg-color, etc. I noticed that if I apply a Bo ...

htmlpropertiesfont-familybootstrap-5lead

What are the best scenarios for employing Server Side Includes?

The documentation for Apache regarding SSI mentions that it is a convenient method to incorporate small snippets of information, like the current time. However, if most of your webpage content is being dynamically generated when served, then it suggests ...

htmlssi

Toggle the collapse of the navigation bar

I'm having an issue with my navbar collapse in HTML. Currently, I am using the code provided at http://pastebin.com/s92VvJr6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <div ...

javascripthtmlcss

Navigating through various div elements in Javascript and sending parameters to a script

Context In my project, I am using PHP to generate a series of voting sections. Each section follows the same format except for a unique number assigned to it, which increases with each iteration of the PHP loop. To keep track of the unique numbers, I uti ...

javascriptphphtml

An assessment consisting of three parts, with the initial section required to match the size of the browser window using jQuery and Javascript

UPDATE: The issue was resolved by adding the Doctype at the top of the page - "<!DOCTYPE html>" (no spaces between tags < , > and other characters) I am experimenting with a webpage that contains four sections. The first section should take up ...

javascriptjqueryhtmlcss

Overflow issue with floating labels in Bootstrap 5 within a grid container

Incorporated within this code snippet are floating selects placed inside a bootstrap grid: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae7fae7">[emai ...

htmlcsstwitter-bootstrapbootstrap-5

How to create a navigation search bar using HTML/CSS or Bootstrap

Seeking advice on how to recreate this UI layout. Does anyone have suggestions or know of any helpful resources? I am particularly struggling with linking the search bar to the navbar. https://i.sstatic.net/PMI2w.png ...

htmlcsstwitter-bootstrap

Choose an identifier from a CSS class

I've been experimenting with a code pen that I stumbled upon: http://codepen.io/surjithctly/pen/pLDwe When I encase the checkbox in a div with the class "mynav," it stops functioning as intended. How do I implement the specified styling for the check ...

htmlcss

Getting the most out of setInterval() - a guide in jQuery

I am currently working on an auto slide feature and could use some guidance with setInterval(). From my understanding, setInterval() is used to repeat functions infinitely, which is exactly what I need for this project. Here is the current layout: HTML & ...

javascriptjqueryhtmlcss

Basic Timer with Visual Background

Struggling to find the right CSS/script for a straightforward countdown timer, Here are the requirements: Countdown in days only, no need for hours, minutes, and seconds Ability to use a custom image as background I've scoured online searches but n ...

javascriptcss

The lobster custom font is malfunctioning in Internet Explorer

I am trying to use the unique font called lobster. After downloading the lobster.woff2 file, I stored it in the font folder. In my custom CSS, I added the following: @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 40 ...

htmlcssfonts

Align the dynamic content in the center vertically

Despite my extensive search on the internet, I have not been able to resolve my issue. The typical solution for vertically centering dynamic content in a div does not seem to work for me. It appears that something in my code is different from the examples ...

htmlcssvertical-alignmentcentering

What is the best way to make a flex box smoothly appear on the

Is there a way to make a flex box hidden until it fades in without losing its flexibility? I used to use 'display: 0;' and then apply jQuery .fadeIn(). However, setting display to 0 causes the flex properties of the box to disappear when fading i ...

jquerycssflexbox