Combining CSS percentages with pixels for layout design

Having some trouble with this layout, any assistance would be greatly appreciated.

The CSS DIV I'm working with is called wrapper and has a width of 1260px:

#wrapper {
width: 1260px;
}

Inside the wrapper DIV, there are three columns named column-left, column-mid, and column-right:

#column-left {
width: 245px;
float: left;
}

#column-mid {
width: 55.55555555555556%; /* (700px/1260px) */
float:left
margin-left: 35px;
margin-right: 35px;
}

#column-right {
width: 245px;
float:left;
}

This setup creates a three-column structure within the wrapper div. The middle column "column-mid" has a percentage-based width set. Ideally, it should adjust to be 700px wide, which is 55.55555555555556% of the wrapper div's width (1260px).

At the current resolution, everything looks good. However, when I change the wrapper div's width to, for example, 1400px, the column-mid div doesn't expand properly. Instead of increasing to 794px as expected based on the new wrapper width, it only goes up to 775px.

Why does the column-mid div stop at 775px? My goal is for the left and right columns to stay fixed at 245px while the middle column dynamically adjusts according to the size of the wrapper div.

htmlcss

Answer №1

Have you considered trying out this alternative approach: http://example.com/code

#container {
    width: 1200px;
    border: 1px solid #ccc;
    overflow: hidden;
    position: relative;
}
#left-sidebar {
    width: 200px;
    position: absolute;
    left: 0;
    border: 1px solid #f00;
}

#main-content {
    margin: 0 220px;
    border: 1px solid #0f0;
}

#right-sidebar {
    width: 200px;
    border: 1px solid #f00;
    position: absolute;
    height: 100%;
    right: 0;
}

This solution features fixed left and right columns with the main content adjusting according to the width of the wrapper. Absolute positioning is utilized to maintain their positions; the right column has a height set to 100% for extending its background all the way down, while the left column's height adjusts based on the content.

Answer №2

The issue arises because the width of #column-left and #column-right is not adjusting in accordance with the overall width; only the width of #column-mid is being changed.

To keep the width of #column-left and #column-right at 245px while making the width of #column-mid responsive, you can attempt the following:

#column-mid {
    width: calc(100% - 560px); //245px for #column-left, 245px for #column-right, and 70px for margin
}

Alternatively, consider this solution:

Apply the following CSS:

#wrapper {
    display: table;
}
#column-left, #column-mid, #column-right {
    display: table-cell;
}
#column-left, #column-right {
    width: 245px;
    background: #f7f7f7;
}
#column-mid {
    background: #ccc;
    padding: 0 35px; //for spacing
}

For demonstration purposes, you can view the code in action on this fiddle.

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

What is the best way to implement the concept of setting a minimum size for a scrollable element based on its content and a

In the interest of simplicity, let's assume that my fixed height is 100px. So, the CSS expression for the question in the title would be: height: min(min-content, 100px); This means to take the minimum value between content height and 100px. Unfortun ...

htmlcsssizing

Selecting a pair of radio buttons to toggle the visibility of different div elements using JavaScript

I've been working on two radio button categories that control the visibility of different input fields. I'm making progress, but I'm still struggling to get it to work perfectly. Below are the images for reference: The combination of &apos ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

What could be causing my click() function to only work properly after resizing?

It's driving me crazy. The code snippet below works perfectly, but not in my project. Only the code in the resize() function seems to work. When I resize the window, everything functions as expected - I can add and remove the 'open' class by ...

javascriptjqueryhtmldrupalonclick

Display a specific portion of an image in CSS, overlapping with its parent element in order to apply additional filters

Can you please review the image I've attached? What I'm looking to achieve is having a Rectangle (imagine it as a div) with a background-image (chess-pattern) that matches the parent image. The key here is for the child (Black Rect) to display on ...

css

The Tailwind classes applied directly in HTML are not functional, whereas the ones from the external CSS file are effective

After testing the classes, the intended look of the page should resemble this: https://i.stack.imgur.com/BVs57.png However, it currently appears like this: https://i.stack.imgur.com/AjN3z.png The JSX code in the file is as follows: < ...

cssnext.jstailwind-css

The alignment of the icon to the center of a div is disrupted when using bootstrap.css

Take a look at this code To center the icon within a div, I am using the following code: <div class="webview-back icon" style="width: 34px; height: 34px; display: inline-block; text-align: center; background-color: lightgray;"><i class= ...

htmlcsstwitter-bootstrap

Modifying Link Hover Colors with CSS and PHP

One of the challenges I am facing is managing a file that contains an array of navigation links. This setup allows me to easily add new links to the navigation menu without manually updating multiple files. However, I am struggling with assigning different ...

phpcss

The size of the <DIV> element turns out to be larger than originally anticipated

First things first, check out this HTML template: <div id="content"> <header>...</header> <div id="pages"> <div class="page">...</div> <div class="page">...</div> <div clas ...

javascriptjqueryhtmlcss

The uploaded file did not contain any data, however it is not an empty file

I am having trouble updating a file with a size of 52KB, as I keep encountering this error: No data was received in the uploaded file Saving empty (zero-length) files is not allowed. Please ensure that you have selected the correct file. Below is an exc ...

htmlcoldfusion

Enhancing Title and Meta Tags with Decorative Styles

Looking to style the <title><p>AAA</p></title> and <meta name="decrition" content="AAA">. But when I added <p> and applied CSS with: p{color:red;size:1000px} The title is being displayed as <p>AAA</p> Any ...

htmlcsstitle

Is adding a property to a div using the Jquery Css Function taking longer than expected?

I am attempting to scale a div when another is clicked, with the scaling origin starting from where the click occurred. This is similar to Apple's behavior when you open an app and it expands from where you clicked. However, I'm facing an issue ...

javascriptjqueryhtmlcss

What are the steps for utilizing CSS Global Variables?

Hey there, thank you for taking the time to help me out. I'm having a simple doubt that I just can't seem to figure out. So... here's my '/pages/_app.js' file: import '../public/styles/global.css'; export default funct ...

javascriptcssnext.js

showcasing a set of div elements by using forward and backward buttons

I am dealing with 5 divs that have text content inside. To navigate through each div, I have implemented a back and next button system. <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a> <div class ...

javascriptjqueryhtmlcss

Capture microphone and audio in a SIP call with sip.js

Greetings Stack Overflow community! I am in need of assistance with a project involving sip.js and VoIP for making real phone calls. The Objective I aim to enable users to record audio from both parties during a call and save the data on a server (either ...

javascriptjqueryhtmlaudiosip

I am having trouble generating a TikTok page link due to the presence of an @ symbol, although all other links are functioning correctly. Can anyone provide a solution to this issue?

I am currently developing a website using primarily HTML within a Blazor application on Visual Studio. I have encountered an issue with the code where the first two buttons function correctly, but there is an error regarding the @ symbol in the TikTok butt ...

htmlhyperlinkblazortiktok

What could be causing this text to not center properly on mobile devices?

Here is the main content. There are no alignment commands in the CSS or HTML. Check out the jsfiddle: https://jsfiddle.net/9t4afmx3/ Any idea why it's left-aligned on mobile devices? <body> <p align="center"><img src="Screen Shot 20 ...

htmlcss

Adjust the class of the iframe element when clicked

I am attempting to change the class of an iframe (soundcloud embedded track) when it is clicked, in order to apply different properties. However, my code doesn't seem to be working as expected. Here is what I have: Here is a snippet from my index.htm ...

javascriptjquerycsshtmliframe

Looking to shrink the image dimensions for optimal mobile display using bootstrap

In one section, I have two columns - one for an image and one for text. https://i.sstatic.net/QMLNF.png Here is the HTML code: <div class="row aboutRow"> <div class="col-lg-3 col-sm-2 col-xs-3 col-md-3 text-center"> ...

cssbootstrap-4bootstrap-5

Launching an external software using electron

I am in the process of developing my own personalized Electron app for managing other applications on my device. One issue I have encountered is the inability to create a link that opens my own .exe applications. I have attempted various methods without su ...

javascripthtmlbatch-fileelectron

jQuery animation for expanding accordion headers

I want to create a cool animation for my accordion headers that mimics a ribbon being dragged onto the wrapper when hovered over, and then dragged out when the hover ends. Everything was working fine in this initial jsFiddle, but as soon as I tried to ani ...

javascriptjquerycssjquery-uijquery-animate