Building a fluid two-column layout in CSS: Ensuring that the left column expands or shrinks based on

After conducting a thorough search, I haven't found an exact solution to my problem. My goal is to create Two Columns:

Left fluid + Right fluid.

The width of the left column should be dependent on the right column's width, with the left column containing an input box set at 100% width.

  • B represents a text div of dynamic length that varies in size.

  • A is simply an input box.

Therefore, if B has a longer text, A should adjust its width accordingly.

Please refer to the image below

https://i.sstatic.net/gimBF.jpg

Any suggestions or advice would be greatly appreciated?

htmlcssfluid-layoutfluid-dynamics

Answer №1

To optimize your layout, consider using the power of Flexbox. By simply applying flex: 1 to the input element, you can achieve dynamic responsiveness.

.element {
  display: flex;
}
input {
  flex: 1;
  background: #A3FF9A;
}
p {
  background: #FF87DE;
  margin: 0;
}
<div class="element">
  <input type="text">
  <p>Lorem ipsum dolor.</p>
</div>

Answer №2

Give this a shot

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Website title</title>
    </head>
<style>
        #container{
         width: 900px;
    }
    #container:after{clear: both; display: table; content: "";}
    #container:before{ display: table; content: "";}
    .left-column{
        width: 400px;
        float: left;
        padding: 5px; 
        background: green;
        box-sizing: border-box;
    }
    .left-column input{width: 100%;}
    .right-column{
        float: right;
        padding: 5px;
        width: 500px;
        background: violet;
        box-sizing: border-box;
    }
</style>
<body>
   <div id="container"> 
       <div class="left-column">
           <input name="f-name" type="text"></input>
       </div>
       <div class="right-column">
           Lorem ipsum dolor sit amet, consectetur 
           adipiscing elit, sed do eiusmod tempor 
           incididunt ut labore et dolore magna aliqua. 
           Ut enim ad minim veniam, quis nostrud 
           exercitation ullamco laboris nisi ut 
           aliquip ex ea commodo consequat. Duis 
           aute irure dolor in reprehenderit in 
           voluptate velit esse cillum dolore eu 
           fugiat nulla pariatur. Excepteur sint 
           occaecat cupidatat non proident, sunt 
           in culpa qui officia deserunt mollit 
           anim id est laborum.
       </div>
   </div>
</body>
</html>

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

Balanced row heights within a CSS grid

Using a basic grid framework like , I have a fixed number of rows. I'm wondering if there's a simple way to ensure that all rows have the same height without explicitly setting the height of the .row class as a percentage. This is how my row cla ...

cssgrid-layout

Organizing CSS rules into different groups and subgroups

Is there a way to style all elements with class X only if they also have classes A, B, or C without repeating the code? I am aware of grouping like this: A, B, C { ... } But I am looking for something more along the lines of: X, (A, B, C) { ... } ...

css

Unable to locate a selenium-recognized element within this field

I've attempted to use FindElementByName but I keep getting a no such element error when it should recognize this name. What am I overlooking? This issue is occurring on the website Intacct.com. Despite my efforts, I have been unable to find a unique C ...

cssexcelvbaseleniumweb-scraping

Optimizing table cell width in ASP.NET based on longest text content

Software: Visual Studio 2010, Asp.Net 4.0 I am working with multiple tables that are stacked vertically on top of each other, all generated dynamically in the codebehind. I would like to ensure that the first column in each table is the same width, based ...

asp.netcssvisual-studio-2010web-applications

What is the best way to line up the two stacked elements with a shared background image to give the appearance of a single cohesive image?

The layout of the header on my website's homepage is as follows: <header> <div class="navbar-lock"></div> <div class="hero"></div> </header> In this setup, div.navbar-lock represents a fixed navigation bar wit ...

htmlcss

Transferring information to the repository

Encountering an issue with sending the entered data to the database using the php and html form post method. Upon clicking submit, only the header is successfully sent to the database, while everything else triggers errors. Note: Undefined Index: Image Not ...

phphtmlmysql

Every time I attempt to insert a background image into a div using jQuery, I am consistently faced with a 404 error message

When I hit enter in my search bar, a new div is created each time. However, I am struggling to assign a background image to the created div as I keep receiving a 404 error in the console. Below is the code snippet I'm working with: function appendToD ...

javascriptjqueryhtmlcssnode.js

Implementing a sorting mechanism for ajax data retrieval

Currently, I am using the code below to save HTML created with jQuery in a database and retrieve it later: $('div[read]').each(function(){ var kelas = $(this).attr('kelas'); $.post('admin.php',{kelas:kelas,id:id},func ...

jqueryhtmlajaxeach

Converting JSON data to HTML using Handlebars

Can you assist me in transforming the following JSON data into a table with 3 columns: property name, property source, and property value? "result": { "total": 100, "config": { "propName1": { "source": "propsrc1", ...

javascripthtmljsonhandlebars.js

What is the best way to reset the animationTransform using JavaScript?

Incorporating SMIL animations in Firefox is presenting a challenge for me. The animation starts automatically upon page load, but I need to find a way to trigger it dynamically through JavaScript. I suspect that the issue may lie with the begin attribute. ...

javascripthtmlcsssvg

The icons from Materialize CSS are not displaying properly in the Safari web browser

It has come to my attention that the icons in Materialized CSS are not displaying properly in Safari (v5.1.7). Despite conducting thorough research on this issue, I have been unable to find any documentation regarding browser compatibility with Safari. Can ...

htmlcsssafarimaterialize

Curves are unable to form on borders using the border-radius property

While working on a webpage, I encountered an issue with CSS attributes and table borders. Despite using the border-radius attribute, the border didn't round along with the background; it just stayed at a corner. Below is my code snippet, any help is g ...

htmlcsshtml-table

The functionality of AngularJS ui-router in HTML5 mode appears to be malfunctioning

Running AngularJS version 1.3.14, with ui-router version 0.2.15 and html5mode enabled. When attempting to access http://localhost/firsttime, it redirects to http://localhost as a fallback. Below is the code from app.js 'use strict'; // Declare ...

javascriptangularjshtmlangular-ui-routerangularjs-routing

I am currently working on a one-page website that will feature both a Careers form and a Contact Us form. However, I am facing a challenge with the submission

I am currently working on integrating Careers FORM and Contact Us FORM into a single page website. However, I am facing an issue with the form Submit Buttons. The problem arises during validation of the input boxes. How can I differentiate between the two ...

htmlforms

Adding the "input-invalid" class to the input doesn't take effect until I click outside of the input field

When the zipcode field is updated, an ajax call is made. If there are no zipcodes available, I want to mark it as invalid by adding the "input-invalid" class. However, the red border validation only appears when clicking outside of the input field. Is ther ...

javascriptjqueryhtmltwitter-bootstrap

Installation banner vanishes when PWA is scrolled

Successfully transformed my website into a PWA, everything is functioning properly except for a minor issue with the Install Banner popup. The banner shows up at the bottom of the page, as intended, but disappears when the user scrolls down, only to reapp ...

htmlgoogle-chromeprogressive-web-appsbanner

Creating interactive forms that dynamically change based on the selected value in a dropdown menu

Looking to dynamically generate a form based on the selected value from a dropdown menu? Let's say we have a parent select box: <select name="select1" id="select1"> <option value="1">Fruit</option> <option value="2">Anima ...

phpjqueryhtmlajax

What is the best way to display the element from a list with a distinct identifier using Thymeleaf within a Spring Boot application?

In my entity class, I have an array list that stores a list of enrolled students. Clicking the student button will display the list of enrolled students. Check out the enroll student page in the screenshot below. However, when clicking on another button to ...

javahtmlspring-bootthymeleaf

How can I fetch a value from a database and set it as the selected option in a

I am facing an issue with the usage of the selectpicker plugin from Bootstrap in order to select multiple items. My requirement is to create a modal for editing where the data is fetched from previous records, particularly an array. I am looking for a way ...

javascriptjqueryhtmllaravelbootstrap-selectpicker

Creating an Image with a specified form action

echo "<img src=\"{$recipe['image']}\" height=100 width=100 /><br />"; echo '<form action="php/recipe.php?id='.$recipe_id.'&img='.{$recipe['image']'}.'" method="POST">'; echo ...

phphtml