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

CSS <ul> <li> spacing issue in Internet Explorer 7

My CSS <ul> <li> nested menu is functioning perfectly in IE 8 and Firefox, but in IE7 it is creating a small gap between the elements. Here is my CSS: #nav, #nav ul { margin: 0; padding: 0; list-style-type: none; list-style-po ...

cssinternet-explorer-7internet-explorer-6

<ul> hover effect and text </ul>

Looking for a solution to activate hover state on both the box and text when rolling over tiled images with text underneath. Check out this example in the Fiddle: http://jsfiddle.net/techydude/GF8tS/ Any suggestions on how I can achieve this effect? ...

cssrollover

What is the best way to retrieve the values of "qty" and "price" and access them within the item [array] without knowing the IDs?

I am currently working on a shopping cart project, specifically on the "previous orders" page to display order details. My goal is to output this information in an (.ejs) file. The data structure includes nested objects, and within one object, propertie ...

javascripthtmljquerynode.jsejs

What techniques can I use to achieve a seamless transition using Javascript and CSS?

I'm striving for a seamless CSS transition. The concept of transition had me puzzled. Even though I utilized the setTimeout method in JavaScript to make my CSS functional, it lacks that SMOOTH feel! Check out my code below. function slideChange( ...

javascripthtmlcss

The data being transmitted by the server is not being received accurately

Hey there! I've recently started using express.js and nodejs, but I've encountered an issue where my server is sending me markup without the CSS and JS files included. const express = require('express'); const app = express(); const htt ...

javascripthtmlnode.jsexpress

Revamp the button's visual presentation when it is in an active state

Currently, I'm facing a challenge with altering the visual appearance of a button. Specifically, I want to make it resemble an arrow protruding from it, indicating that it is the active button. The button in question is enclosed within a card componen ...

cssreactjstypescript

Is there a method to check if my input fields are filled before the bootstrap modal can be triggered in PHP?

Is it possible for the modal button to validate if the textboxes before it are empty? If they are, can we prevent the user from proceeding until they are filled? Check out the code below: <form class="form-horizontal form-signin-signup" action="signup ...

phpjqueryhtmlcssbootstrap-modal

I am encountering issues with an HTML table that is in need of fixing, and I must find a solution without relying on

Can someone help me troubleshoot the structure of this table in the given image? It seems like my rowspan and colspan attributes are not working as expected. I've only used CSS to specify the width and height of the cells. td { width: 60px; ...

htmlhtml-table

Webkit causing complications with straightforward CSS3 animation

I'm currently working on a website and you can check it out here: Unfortunately, I've encountered an issue where the animations aren't triggering specifically on webkit browsers like Chrome and Safari: @-webkit-keyframes slideright{ 0% {tr ...

cssanimationwebkit

Interactive html5 canvas game with swiping mechanism

Currently, I am in the research phase for a new HTML5 canvas game that I want to create as a personal project to enhance my skills. Surprisingly, I have not been able to find any valuable articles or tutorials online about creating swipe-based games. The ...

javascriptjqueryhtmlcanvas

Formatting Dates and Times in a Bootstrap Form

I'm working on a form that includes date and time type inputs. The fields are set up for mm/dd/yyyy date format and 12-hour AM/PM notation for time. However, I prefer to use dd/mm/yyyy date format and 24-hour notation for time. Is there a way to make ...

htmltwitter-bootstraptwitter-bootstrap-3

Is there a way to dynamically refresh the options in a select dropdown using jQuery?

I'm facing an issue with updating the options in a select element. Here is how my current select element looks: <select id="productId"> </select> Below is the jQuery code I am using: ... if (data.success) { var items = []; $.ea ...

jqueryhtml

Revamp the layout of the lower HTML video menu

Here is my code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> video { width: 100%; height: auto; } </style> </head> <body> <video width="400" controls> ...

javascripthtmlcssvideohtml5-video

Changing the format of PHP SQL results from vertical to horizontal

Is there a way to convert the vertical table generated by the following code into a horizontal one with stylish formatting? Additionally, is it possible to display certain columns in a popup window based on query parameters using jQuery or CSS? <html&g ...

phphtmlcsssql

Having trouble displaying background images on GitHub pages?

I have encountered an issue with images not displaying correctly on GitHub Pages, despite trying various solutions suggested in previous posts. Strangely, the page functions perfectly on my local machine and on Netlify, but on GitHub Pages all the images a ...

cssgithub-pages

Creating a Visual Presentation with Background Image Transition in HTML, CSS, and JavaScript

Seeking assistance in setting up a basic background image slideshow on my website. I have been unable to locate a suitable tutorial online, so I'm reaching out here for guidance. HTML: <body> <h3>Welcome!</h1> <p>Lorem i ...

javascripthtmlcssbackground-imageslideshow

Leveraging both Angular Material UI and Tailwind CSS simultaneously

Recently, I've been incorporating Material UI with Angular. With the deprecation of flexlayout and the rise of Tailwind as a recommended alternative, I'm wondering if it's feasible to utilize both Material UI and Tailwind in tandem. How can ...

cssangularmaterial-uitailwind-css

Using Javascript's OnChange event to dynamically update data

Attempting to achieve a seemingly straightforward task, but encountering obstacles. The goal is to trigger a JavaScript onChange command and instantly update a radar chart when a numerical value in a form is altered. While the initial values are successful ...

javascriptjqueryhtmlonchangechart.js

Is there a way to dynamically change select2 styling using code when a form is submitted?

Having trouble highlighting empty select2 selects when a form is submitted? I'm struggling to override my existing CSS styling upon document load. Check out my jQuery attempt: var $requiredUnfilledItems = $(".required:not(.filled)"); if ($requiredUn ...

jquerycsscss-selectorsjquery-select2

"Unexpected discrepancy: Bootstrap Glyphicon fails to appear on webpage, however, is visible

I am having some trouble getting the glyphicon to display properly in my side nav. The arrow head should rotate down, which is a pretty standard feature. Here is the link to the page: The glyphicon should be visible on the "Nicky's Folders" top leve ...

javascripthtmlcsstwitter-bootstrapglyphicons