Tips for dividing a div into percentages while maintaining a constant width for a div on the left side

I need help with creating a layout that involves 4 boxes. The first box (box1) should have a width of 50px on the left side, while the remaining 3 boxes should fill in the rest of the screen and be resizable. Can someone guide me on achieving this layout?

Check out this JSFiddle for reference

.box1
{
    width: 50px;
    height: 100px;
    background: red;
    float: left;
}

.box2
{
    width: 25%;
    height: 100px;
    background: yellow;
    float: left;
}

.box3
{
    width: 25%;
    height: 100px;
    background: blue;
    float: left;
}

.box4
{
    width: 25%;
    height: 100px;
    background: green;
    float: left;
}

Answer №1

In order to achieve this, you can utilize the calc() function which is a feature of CSS3:

Check out this JsFiddle for an example

width: calc((100% - 50px) / 3);

This method works effectively in this particular situation. It calculates the available space (100% of the screen minus 50px for the first box) and then divides it into three equal portions.

It's important to note that calc() may not be supported by all browsers as it is specific to CSS3. You can check browser compatibility at http://caniuse.com/#feat=calc

Answer №2

To create percentage width DIVs, consider nesting them inside an outer DIV with a fixed left margin.

View the example here

<div class="box1"></div>
<div class="box-right>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>

.box1 {
    width: 50px;
    height: 100px;
    background: red;
    float: left;
}
.box-right {
    margin-left: 50px;
}
.box2, .box3, .box4 {
    width: 33.33%;
    height: 100px;
    float: left;
}
.box2 { background: yellow; }
.box3 { background: blue; }
.box4 { background: green; }

Answer №3

To achieve this layout, you can utilize the power of display: table in CSS. By setting the first div to a fixed width and allowing the remaining divs to evenly take up the rest of the space within a wrapper element with display: table, you can create a clean and responsive design.

.wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;
}

You can then assign the boxes inside the wrapper to have display: table-cell:

.stretch
{
   display: table-cell;
}

For the first box, specify a fixed width:

.box1 {
    width: 50px;
    height: 100px;
    background: red;
}

Check out this live example on JSFiddle:

http://jsfiddle.net/DBnSp/4/

This method avoids using floats or percentages, making it widely supported across different browsers!

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

Utilizing AJAX to dynamically update a div's content by extracting a specific div from the retrieved data

Although I believe my code is correct, I am not very familiar with AJAX and have been struggling for hours to get it right. I've tried various approaches, including using filters, but nothing seems to work. The issue I'm facing is that the chat m ...

Enhancing the appearance of unvisited links with background styles

I am endeavoring to incorporate an icon into all unvisited links on a specific Wordpress category page. Below is the CSS code that I am utilizing. It has been placed at the conclusion of my final CSS file. .category-xyzzy .entry-title a:link { background ...

Including a .css file in ejs

I'm currently developing an application using Node.js (express) with EJS, and I'm facing an issue while including a .css file in it. When I tried the same setup as a standalone HTML-CSS project, it worked perfectly fine. How can I include the CSS ...

Element not found: {"method":"xpath","selector":"//*[@id='content container']

The error is occurring despite having the correct xpath in the code: Unable to locate element: {"method":"xpath","selector":"//*[@id='content column']... It seems like there might be multiple xpaths in the field. Here is the code snippet: dr ...

What specific server error code is represented by the jquery ajax 'error' option?

Could someone please explain what the 'error' option in jquery ajax ($.ajax) is used for in terms of server request codes? I am trying to handle a 400 server error but can't seem to do it using the 'error' option. I'm not sure ...

Switch back and forth between adding and removing a table row using jQuery

Currently, I am developing a drop-down feature for a table that populates its data using MySQL. The functionality involves creating a new table row below the current one when a user clicks a button. However, instead of generating multiple new rows each tim ...

How do I customize the appearance of an Element-UI data table in Vue?

I'm struggling to customize the color of an Element UI datatable in my project. I've tried several approaches, but so far, nothing has worked. Here is the code I am currently using: <template> <el-table :data="tableData.filter ...

overlay the text at the top of a div

Looking to create an overlapping effect with text in a div, similar to the example shown in the image. I am currently utilizing Bootstrap, but open to using CSS as well. However, I need the text to go slightly underneath the overlapping element. View the ...

Tips for incorporating jQuery UI into Angular 6

No matter how many methods I have tried from StackOverflow, I cannot seem to get jquery-ui to work in my angular 6 component. Here's what I've attempted: I went ahead and ran npm install jquery jquery-ui to install both jquery and jquery-ui. ...

Combining Express Js and Node JS to dynamically load HTML content into a div and update the URI

Recently, I began utilizing Express.js alongside Node.js and an .ejs rendering engine. I want to be able to load an .ejs file, similar to a .html form, into a specific div on my webpage. While I am familiar with using jQuery's load() function for thi ...

Implementing a hamburger menu and social media sharing buttons on websites

Currently working on my personal website and delving into the world of Web Development, I have some inquiries for seasoned developers. My first query revolves around incorporating a hamburger menu onto my site for easy navigation to other pages. After att ...

Guide to integrating promises into the HTML5 Geolocation API

How can I fix the code below to ensure that the getPreciseLocation function does not return an undefined value? In essence, when the user clicks on the #precise-location-prompt and shares their location with the browser, there should be an AJAX call to re ...

Steps for initiating an XMLHttpRequest in a XUL setting

When working in the XUL environment, I experimented with various methods using jQuery like this: $.ajax({ url:'http://www.X-site.com/api/call.php?q=test', success: function(){alert('success');}, error: f ...

Using an image for the axis in Wijmo BarGraph

I am currently working with Wijmo barcharts and attempting to create a graph that uses images instead of labels on the x-axis. The code I have at the moment displays the image source as a string rather than displaying the actual image. Does anyone know ho ...

Tips on preventing flickering when using javascript for drag and drop functionality

I have implemented the following JavaScript code (using jQuery) to manage drag and drop functionality in a script I am developing: jsc.ui.dragging = false; jsc.ui.drag_element = {}; $(".drag-target").mousedown(function() { jsc.ui.drag_element = $(thi ...

Page resizing is disabled in Chrome after an Ajax load

I've been tirelessly working on the CSS for a website I'm building, and I've encountered a strange issue that only seems to affect Chrome. Firefox and Internet Explorer work perfectly fine. I am using jQuery to load HTML stubs and a signifi ...

Struggling to modify a string within my React component when the state is updated

Having a string representing my file name passed to the react-csv CSVLink<> component, I initially define it as "my-data.csv". When trying to update it with data from an axios request, I realize I may not fully understand how these react components w ...

Tips for verifying the presence of a 3D model from Spline API within the DOM using Next.js

I am in the process of developing a brand new website and I have integrated a 3D model from spline, although it is taking quite some time to load. To improve user experience, I decided to implement a loader/Spinner. However, I'm facing the challenge o ...

What is the best way to line up my columns when they are split between groups of three and two?

I am having trouble aligning my columns in the way I want. The image shows that some tables have 3 columns while others have 2, and I would like to align the blue with the blue and the red with the red as shown in the picture: https://i.stack.imgur.com/1bL ...

How can I use CSS to make the row and column headers of a table freeze while scrolling within an overflow

I am currently working on implementing frozen row and column headers in a table within a content wrapper, similar to what you see in Excel. However, I have been facing challenges with using CSS tricks that involve the position:absolute property, especially ...