Fit an object of unspecified width next to objects of set width within a parent container of unspecified width

I am working with a parent div that has an unknown width, as it depends on calculations based on the screen size. There are 4 child divs within the parent, all floated to be horizontally aligned. The 1st, 2nd, and 4th child elements have fixed widths, while the 3rd element should stretch to fill the remaining space in the parent div.

I attempted using display:table; for the parent and display:table-cell for the children, but this approach did not yield the desired result. Despite trying width:auto for the 3rd element, I was unable to achieve the intended layout.

<div class="parent">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
    <div class="fourth"></div>
</div>

Here is a basic CSS setup:

.parent
{
  width: 100%;
  display:table;
}
.first
{
  width: 80px;
  height: 80px;
  float: left;
  display: table-cell;
}

.second
{
 width: 80px;
  height: 80px;
  float: left;
  display: table-cell;
}

.third
{

  height: 80px;
  float: left;
  display: table-cell;
}

.fourth
{
  width: 80px;
  height: 80px;
  float: left;
  display: table-cell;
}

Your assistance with this problem would be greatly appreciated.

htmlcss

Answer №1

To achieve this layout, you have two options. In the first option, you can utilize Flexbox. By adding flex: 1 to one child div, it will automatically take up the remaining free space in terms of width.

.parent {
  display: flex;
  border: 1px solid black;
}

.child {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  width: 50px;
}

.long {
  flex: 1;
}
<div class="parent">
  <div class="child">Div 1</div>
  <div class="child">Div 2</div>
  <div class="child long">Div 3</div>
  <div class="child">Div 4</div>
</div>

Alternatively, you can also use CSS Table by setting table-layout: fixed. Here is a resource for checking the Browser support.

.parent {
  display: table;
  width: 100%;
  border: 1px solid black;
  table-layout: fixed;
}

.child {
  border: 1px solid black;
  display: table-cell;
  margin: 5px;
  padding: 5px;
  width: 50px;
}

.long {
 width: 100%;
}
<div class="parent">
  <div class="child">Div 1</div>
  <div class="child">Div 2</div>
  <div class="child long">Div 3</div>
  <div class="child">Div 4</div>
</div>

Answer №2

To Address IE9 and Above

If you are looking to achieve this, you can utilize the inline-block property along with calc().

Code Snippet

body {
 margin: 0
}  
.parent {
  border: solid black;
  font-size: 0; /*resolve inline-block gap*/
}
.child {
  border: 1px solid red;
  margin: 5px;
  width:100px;
  display: inline-block;
  font-size: 16px; /*fix font size*/
}
.calc{
  width: calc(100% - 348px)
}
<div class="parent">
  <div class="child">one</div>
  <div class="child">two</div>
  <div class="child calc">three</div>
  <div class="child">four</div>
</div>

For Compatibility with IE8 and Above

You have the option of using display: table/table-cell for a similar effect.

Snippet Below

body {
  margin: 0
}
.parent {
  border: solid black;
  display: table;
  table-layout: fixed;
  width: 100%;
  /*optional*/
  border-collapse: separate;
  border-spacing: 5px;
  box-sizing: border-box;
}
.child {
  border: 1px solid red;
  width: 100px;
  display: table-cell;
}
.big {
  width: 100%
}
<div class="parent">
  <div class="child">one</div>
  <div class="child">two</div>
  <div class="child big">three</div>
  <div class="child">four</div>
</div>

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

Designing a webpage tailored to a particular internet browser

My website is built on asp.net-mvc3 and I have customized the layout using CSS. While it looks perfect on Firefox and Chrome, Internet Explorer displays it in a jumbled mess. I am now faced with the task of fixing this issue without disrupting the layout ...

htmlcssasp.net-mvc-3layout

JavaScript code to display elements upon button click

I've been working on creating some code that displays elements when a button is clicked. While I can make them appear, I'm having trouble getting each button to show its own set of elements separately (i.e., hiding other elements when a different ...

javascripthtmlcssevent-handling

The feature of Google street view is not supported within the tabs on WordPress

I'm experiencing some issues with displaying Google maps and street view using the Wp Google Map WordPress plugin within tabs. The map displays perfectly on the first tab where I placed the short code for the map, but on the second tab where I placed ...

javascriptcsswordpressgoogle-mapsgoogle-maps-api-3

increase the width of the side menu bar to accommodate more content on the Bootstrap

At the moment, the line that separates the content from the side menu stops at the side menu's content. However, the content is going to be longer than the side menu, causing the page to look uneven. I attempted to adjust the page-content d-flex but d ...

htmlcssbootstrap-4

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

I am exploring node, express and jade for the first time and working on a small application that requires users to enter their name and password in a form. The app then redirects them to a path based on their username. Here is the code snippet to achieve ...

javascripthtmlweb-applicationsnode.jsexpress

Encase a component with a personalized class of my own creation

X-editable showcases the use of default checkboxes, demonstrated in this example. My goal is to encapsulate the template responsible for creating the checklist within a custom class (<div class="...) that will style the elements according to my prefere ...

javascriptcssangularjsx-editable

ChakraUI failing to display on the screen

Exploring Chakra UI in my latest project has been an exciting journey for me. I made sure to install all the necessary dependencies and started importing components from the ChakraUI Docs. Initially, I successfully imported and rendered the button feature ...

htmlcssreactjschakra-ui

Troubleshooting problem with SASS variable $str

I'm currently using sass mixins to create columns in my grid system. However, I am facing an issue with the output. Here is the sass function I am using for the .col class. Upon compiling the sass file, the generated css file contains excessive slash ...

csssasscodekit

hiding form fields using javascript

As a beginner in javascript, I am facing a challenge with a set of checkboxes in an HTML form. These checkboxes are generated dynamically from a python script. Among them, there is a checkbox labeled "N/A" that I want to hide automatically when any other c ...

javascriptpythonhtmlforms

Add adhesive dashes to the text box

I am looking to add sticky hyphens in a text input field. I have included an image illustrating my requirement. The areas that need fixing are highlighted in red. The first hyphen should appear after every three number inputs, followed by the next one afte ...

htmlcssangular

What is the best way to conceal a `div` containing an error message if there are no errors present?

On this page, you'll find a server-side and client-side validation form. I'm currently using a div id=er> to display error messages when the requirements are not met. However, having the div element always present is causing styling issues for ...

javascriptphpjquerycssvalidation

<H2> along with <Sup>

So I have an H2 heading with a company name and next to that on the same line, we need to include a Superscript tag (TM). Here is the code: <h1 class="Red">Company Name</h1><sup>&#8482;</sup> When rendered, it looks like this: ...

htmlcsstags

Challenges in structuring an AngularJS Material Design project

When using Angularjs Material framework, I encountered an issue where aligning content (containing cards) to the center resulted in adjacent card heights increasing when one card's height was adjusted. See example code here. The goal is to have dynam ...

cssangularjsflexboxangular-material

Unable to vertically align an image within a navigation bar item that is not the brand

Having a unique issue for which I cannot find a solution. In the navbar of Bootstrap 4, I am attempting to include an image next to one of the items, not the navbar-brand as commonly asked about. When Bootstrap 4 is loaded with a custom alpha dark theme, ...

htmlcssbootstrap-4

HTML: Understanding relative pathsIn this guide, we will

Is there a way to link from thispage.html to thatpage.css using a relative path? public_html ├── folder1 | |__subfolder | |__thatpage.css ├── folder2 │ |__subfolder | |__thispage.html I attempted the follo ...

htmlcss

Spree Deluxe - Customizing color scheme variables

We're struggling to modify the color variables in Spree Fancy. The documentation suggests creating a variables_override.css.scss file. But where exactly should this file be placed? We've tried adding it under the stylesheets folder in assets and ...

cssruby-on-railssassspree

Incorporating list view separators using JQuery Mobile

I recently started using the Jquery Mobile Flat UI Theme and I'm really impressed. However, I would like to enhance it by adding a separator between each listview. Here is my current listview: Can someone please advise me on which code I need to add ...

jquerycsslistviewjquery-mobile

Tips for ensuring browsers maintain the aspect ratio specified by width and height HTML attributes when CSS is applied

I am seeking a method to reserve space in my layout for images before they are loaded by adding width and height properties to the img element. This approach functions as anticipated: img { display: block; border: 1px solid tomato; } <img src="" ...

htmlcssimage

A single snippet of JavaScript blocking the loading of another script

I've encountered an issue where the code seems to be conflicting with itself. The top part works fine, but the bottom part doesn't. However, when I remove the top portion, everything works as intended! You can see a working example of both compo ...

javascripthtml

Customizing meter-bar for Mozilla and Safari

I've implemented the following CSS on my meter bars but for some reason, the styling isn't showing up correctly in Safari (refer to the screenshots below). I'm relatively new to CSS and simply copied the code provided. Based on the comments, ...

htmlcsssafarimozillameter