Floating layout featuring a static width and a single element that expands

I am looking to create a layout with the following structure:

Prefix - Input(Type: Text, Number,..) - Suffix - Button

ul
{
    list-style: none;
    width: 300px;
    margin: 0;
    padding: 0;
}
li
{
    margin: 0;
    padding: 0;
}
table 
{
    margin: 0 auto;
    padding: 0;
    border-spacing: 0px;
    border-collapse: collapse;
}
input[type=number] 
{ 
    width: 100%; 
}
input[type=button] 
{ 
    width: 100%;
    padding: 0px 20px;
}

.value
{
    padding-right: 10px;
    padding-left: 10px;
}

.ok
{
    padding-left: 10px;
}
<ul>
    <li>
        <table>
            <tr>
                <td class="prefix">
                    prefix
                </td>
                <td class="value">
                    <input type="number" size="1"/>

                </td>
                <td class="suffix">
                    suffix
                </td>
                <td class="ok">
                    <input type="button" value="val1"/>
                </td>
            </tr>
        </table>
    </li>
    <li>
        <table>
            <tr>
                <td class="prefix">
                    pre
                </td>
                <td class="value">
                    <input type="number" size="1"/>
                </td>
                <td class="suffix">
                    suf
                </td>
                <td class="ok">
                    <input type="button" value="longervalue"/>
                </td>
            </tr>
        </table>
    </li>
    <li>
        <table>
            <tr>
                <td class="prefix">
                    pre
                </td>
                <td class="value">
                    <input type="number" size="1"/>
                </td>
                <td class="suffix">
                    suf
                </td>
                <td class="ok">
                    <input type="button" value="v"/>
                </td>
            </tr>
        </table>
    </li>
</ul>

I need to place four elements within a fixed width.

I do not have specific values for Prefix, Suffix, or the Button text.

I want all three elements (Prefix, Suffix, and Button) to take up minimal space, and the input tag to fill the remaining space.

Is there a way to achieve this without using tables or JavaScript, if possible?

htmlcss

Answer №1

Try implementing a Flexbox layout for this scenario.

Here is the HTML code:

<section>
  <label>pre</label>
  <input type="number" size="1"/>
  <label>suf</label>
  <input type="button" value="longervalue"/>
</section>

To achieve the desired layout, you can use the following CSS:

section {
  display: flex;
}

input[type=number] {
  flex-grow: 1;
}

Check out this jsFiddle link

Answer №2

Below is the code snippet to use:

<style>
ul
{
    list-style: none;
    width: 300px;
    margin: 0;
    padding: 0;
}
li
{
    margin: 0;
    padding: 0;
}
table 
{
    margin: 0 auto;
    padding: 0;
    border-spacing: 0px;
    border-collapse: collapse;
}
input[type=number] 
{ 
    width: 100%; 
}
input[type=button] 
{ 
    width: 100%;
    padding: 0px 20px;
}

.value
{
    padding-right: 10px;
    padding-left: 10px;
}

.ok
{
    padding-left: 10px;
}
</style>
<ul>
    <li>
        <table>
            <tr>
                <td class="prefix">
                    prefix
                </td>
                <td class="value">
                    <input type="number" size="1"/>
                </td>
                <td class="sufix">
                    suffix
                </td>
                <td class="ok">
                    <input type="button" value="val1"/>
                </td>
            </tr>
             <tr>
                <td class="prefix">
                    pre
                </td>
                <td class="value">
                    <input type="number" size="1"/>
                </td>
                <td class="sufix">
                    suf
                </td>
                <td class="ok">
                    <input type="button" value="longervalue"/>
                </td>
            </tr>
            <tr>
                <td class="prefix">
                    pre
                </td>
                <td class="value">
                    <input type="number" size="1"/>
                </td>
                <td class="sufix">
                    suf
                </td>
                <td class="ok">
                    <input type="button" value="v"/>
                </td>
            </tr>
        </table>
    </li>

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

Assigning a changing label to a radio button

Looking to create a dynamic form where clicking a button calls a JavaScript function. Here's the code snippet: function addRadioButton(type){ var element = document.createElement("input"); //Set attributes for the element. element.setAttr ...

javascripthtml

Aligning a left-positioned div with a right-aligned div within a container

I'm trying to replicate this layout: https://i.stack.imgur.com/mUXjU.png Here is the HTML code I have so far: <div class="container"> <div class="floatingLeft">A right-aligned div</div> <div class="a">Lorem Ipsum< ...

htmlcssalignment

Troubleshooting HTML Label Problems

I am facing an issue with my custom labels. .label-ras{ padding:3px 10px; line-height:15px; color:#fff; font-weight:400; border-radius:5px; font-size:75%; } .label-primar{background-color:#5c4ac7} <span style="background- ...

htmlcss

Is there a way to adjust the border color of my <select> element without disrupting the existing bootstrap CSS styling?

In my Bootstrap (v4.5.3) form, the select options appear differently in Firefox as shown in the image below: https://i.sstatic.net/3suke.png Upon form submission, I have JavaScript code for validation which checks if an option other than "-- Select an Op ...

javascripthtmlcssbootstrap-4

Boxes that change and adapt to the user's input

Need guidance on a tricky problem! I am working on a form to input various cities that the user wants to visit. The form currently consists of one form box and a submit button. My goal is to allow the user to enter multiple cities by clicking an "Add 1 ...

javascriptphphtml

Flask - Refreshing Forms Dynamically

In an effort to enhance the responsiveness of my app, I am looking for a way to prevent the page from reloading every time a POST request is sent. My current setup includes a dynamically generated form with input fields designed like this: <div class=&q ...

javascriptpythonhtmlflask

Verify if a checkbox is selected upon loading the page

Hey there, I have a jQuery change function set up to turn an input text box grey and read-only when a user selects a checkbox. However, I'm interested in adding a check on page load to see if the checkbox is already selected. Any suggestions for enhan ...

javascriptjqueryhtml

Tips for breaking out of the traditional 12 column grid using Bootstrap 4 flexbox grid system

My excitement was palpable when I learned that Bootstrap 4 would be implementing flexbox for a grid system. I anticipated the fast and efficient element sizing capabilities that flexbox offers. However, it appears that Bootstrap 4 simply enhances the exist ...

twitter-bootstrapcssflexboxbootstrap-4

Implementing text overlays on images within a Bootstrap 4 navigation bar

I am struggling to grasp the flex structure in Bootstrap. I'm attempting to overlay text on an image within the navbar, but it seems the container of the navbar is causing issues. Perhaps my containers are not set up correctly. Any assistance would be ...

htmlcsstwitter-bootstrapbootstrap-4

How to handle the "Escape" character in PHP using the echo statement?

A quick question: echo '<button type="button" id="add" onClick="addAsset('.$filename.');"> '.$filename.' </button>'; This piece of code generates a button with an onClick event that adds the asset example.png. Ho ...

phphtmlescaping

Switch webpage HTML content to XLS format

Hey folks, I'm a bit uncertain about my client's requirements but thought sparking a conversation might help. My client is looking to extract HTML data from a webpage and convert it into an XLS format. The content is all sourced from their own w ...

c#.nethtmlxls

How to adjust animation timing for various elements during a CSS 3D flip with a delay?

Here is a CSS flip setup that I have been working on in this fiddle: http://jsfiddle.net/6r82fzk6/ The Goal: I am trying to achieve a slower transition for the back element compared to everything else. The idea is to have the child element of the back fac ...

cssanimation3dtransition

The function .innerHTML is not functioning correctly, at least in my opinion

When I utilize .innerHTML to insert text into a textarea, the script stops functioning if I manually begin editing the text in the textarea. Here is the code snippet: (function($){ addPort = function(name) { switch(name) { case 'name1': ...

javascripthtml

Triggering an animation on one element by hovering over a different element

I'm trying to create a cool effect where the train ticket rotates when I hover over a leaf. Although I can get the train ticket to rotate when I hover over it directly, it doesn't seem to work when I hover over the leaf. Can someone help me spot ...

css

Utilizing data attributes over classes for styling in CSS

Programming Languages <span data-bar> ... </span> JavaScript span[data-bar]{ ... } Do you agree with this coding practice? Are there any potential pitfalls? I believe implementing the data- attribute is beneficial when dealing with a large ...

csshtmlcustom-data-attribute

Updating the CSS properties of a specific element within a dynamically generated JavaScript list

So I'm working on a JavaScript project that involves creating a navigation bar with multiple lists. My goal is to use the last list element in the bar to control the visibility (opacity) of another element. So far, I have been using the following code ...

javascriptjqueryhtmlcss

What is the best way to extract a specific year and month from a date in a datatable using

My dataset includes performance scores of employees across various construction sites. For instance, on 2020-03-15, ALI TAHIRI was at the IHJAMN site. I need to filter this dataset by year and month. If I input 2020 for the year and 03 for the month, the d ...

javascriptjqueryhtmldatatabledatatables

Extract content from an HTML form within a specific cell using Cheerio

A sample HTML table is displayed below: <tr class="row-class" role="row"> <td>Text1</td> <td> <form method='get' action='http://example.php'> <input type='hidden' ...

javascripthtmlnode.jshtml-tablecheerio

Is it acceptable to place a <figure> tag inside a <header> tag within an <article>?

Imagine having this scenario: <article> <header> <h1>Article title</h1> <p>Article kicker</p> <figure> <img class="featured-image" src="http://article.com/featured/image. ...

htmlsemantic-markup

The PHP header() function is not properly redirecting the page, instead it is only displaying the HTML

After double checking that no client sided data was being sent beforehand and enabling error reporting, I am still encountering issues. The issue revolves around a basic login script with redirection upon validation. <?php include_once "database- ...

javascriptphpjqueryhtmlajax