What's the best choice: Fixed or Variable Column Widths in Tables or Floats?

I'm currently working on a layout for a 3 column, full-width page. I want two columns to have a fixed width, while the third column should adapt to the full width between them, like this:

| Fixed Width || Variable Width                || Fixed Width        |
| Always Left || Adapts To Browser Window Size || Always Fixed Right |

I initially attempted to achieve this using float, but encountered issues. A suggestion to use display-table worked initially, but after making some edits to the page, the content in the left columns shifted to the bottom instead of aligning at the top where it should be. Can anyone offer assistance with this? Below is the current code I am using:

    .pageContent{
        background-color: #DADEE1;
        width: 100%;
        padding: 10px 0px 10px 0px;
    }
    .gridSystem{
        display: table;
    }
    section{
        display: table-cell;
    }
    .mainSidebar{
        float: left;
        vertical-align: top;
        width: 140px;
    }
    .mainPage{
        width: inherit;
        overflow: hidden;
        margin: 0px 0px 0px 0px;
        padding: 20px;
    }
    .mainAdvert{
        float: right;
        width: 140px;
    }

<div class="pageContent gridSystem">
    <section class="mainSidebar"></section>
    <section class="mainPage"></section>
    <section class="mainAdvert"></section>
    <div class="clearBoth"></div>
</div>

Any assistance would be greatly appreciated.

Answer №1

Check out this JQuery solution:

$(document).ready(function(){
    var window_width = $(window).width();
    var mainPage_width = window_width - 140 - 140; 
    $(".mainPage").width(mainPage_width + "px");    
}

http://jsfiddle.net/_rov/zBF3j/

Answer №2

Due to the fixed nature of the left column (mainSidebar), it provides a reference point for determining the starting point of column 2 (mainPage)... then leverage jQuery to adjust the width (or other css properties)... I agree with Rov - CSS may not be the best solution for handling different screen sizes; it's preferable to utilize jQuery / JavaScript instead.

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

Prevent zooming or controlling the lens in UIWebview while still allowing user selection

Is there a way to disable the zoom/lens on uiwebview without affecting user selection? I'm trying to avoid using "-webkit-user-select:none" in my css. -webkit-user-select:none ...

Checking File Upload Progress in HTML and PHP

As a newcomer, I've been struggling to find a solution to an issue I'm facing. My concern is regarding a form that is meant to upload a file and send it via email. How can I display the progress status of the file being uploaded? It seems that us ...

Display the printed outcome in a fresh window

HTML: <form id="dbview" method="post" action="core/process.php"> .... <p style='text-align:center;'> <input id='delete' type='submit' name='process' value='Delete selected'/> < ...

Can someone please show me how to position this H1 in the center at the bottom of the div?

Looking for a simple solution to place text at the bottom of a div without turning the entire div into a grid. New to HTML/CSS and struggling with vertical alignment issues... <!DOCTYPE html> <html> <head> <title>Creating an O ...

Instructions on sending search fields by pressing the enter key

Developing my application in React.tsx, I have a menu window that consists of numerous div elements with input fields, checkboxes, and select elements. Upon clicking the submit button, a list of results with user-selected filters appears. As an additional ...

Unfortunately, I am currently unable to showcase the specifics of the items on my website

I am trying to create a functionality where clicking on a product enlarges the image and shows the details of the product as well. While I have successfully implemented the image enlargement, I am facing challenges in displaying the product details. Below ...

A guide on making a POST request with a search term retrieved from autocomplete feature in Django

Currently, I am implementing an auto complete form using Django-ajax-selects. This form returns a dropdown list of items retrieved from the database. When a user selects an item from the list, the search field is automatically populated with the name of th ...

Is there a way to target a child element for hover effect in CSS without affecting the parent element?

Is it feasible to hover over a nested child element without activating a hover effect on the parent element? In the demonstration below, you'll notice that even when hovering over the child, the hover effect on the parent is still in place. I am int ...

Javascript functions fail to execute as intended

I have a project called calc, which includes various functions such as init. Within this project, there are three buttons that I am adding to the div using jquery. When a user clicks on any of these buttons, it should trigger the inputs function. Based on ...

Challenge with the positioning of HTML output layout

Is there a way to center the output/result of the HTML code below both horizontally and vertically on the web page using CSS? I have tried the following code but it only centers the output horizontally. Vertical alignment is not working properly. Can someo ...

Slide toggle button change using jQuery UI

$(".myButton").click(function () { // Set the effect type var effect = 'slide'; // Set the options for the effect type chosen var options = { direction: $('left').val() }; // Set the duration (default: 400 millise ...

Is it possible to animate the change in background color dynamically using jQuery?

I am struggling to implement a change/animate feature for the background color. When I place the background script within the form submit event but outside the ajax call, I can briefly see the color change. However, once the remote content loads, the colo ...

The difference between `$(document)` and `$("document")` is like night

Does a distinction exist between: $(document) and $("document")? ADJUSTMENT: also when using the .ready() method like $("document").ready() ...

How to Submit an Iframe Form Using Jquery and Retrieve the Response

I am currently working on a webpage that contains an iframe with a form inside. My goal is to submit the form and retrieve the result using jQuery. What would be the best way to accomplish this? <iframe src ="html_intro.asp" width="100%" height="300" ...

Currently, my main focus is on finding a solution to adjusting the background color of the div element named *topnav* to properly match the width of the

I'm having trouble adjusting the width of the topnav background color to fill the entire page without any gaps. I hope that makes sense. Let me know if you need more information. Page displaying gap: Here is the HTML and CSS code: body {background ...

I could use some help with understanding node.js scripts, running processes, and other related tasks

I'm currently trying to run a node.js script using CMD and I keep encountering an error. Here's the code snippet that's causing the issue: var mysql = require('mysql'); var log4js = require('log4js'); var io = requi ...

Is the parent node of the input element the input element itself?

When working with a DOM object obj of type <input>, I encountered an issue where attempting to obtain its parent node using obj.parentNode resulted in the same obj being returned. Is this behavior specific to <input> objects? What other types o ...

Troubleshooting a problem with Select Dropdown in HTML and PHP

Hello, I am encountering an issue with a dropdown box as shown below: function createDropdown( $name, array $options, $selected=null ) { /*** starting the select element ***/ $dropdown = '<select name="'.$name.'" id="'.$name.'" ...

The request to send JSON POST to REST encountered a 400 Bad Request

I've encountered an issue while sending a POST request from JQuery with some data. Unfortunately, when I try to execute it through my JavaScript code, I receive a 400 Bad Request error and the REST service fails to fire. Out of curiosity, I decided t ...

ASP repeater exceeding container boundaries

Having trouble with my asp repeater that reads from a database and generates repeatable divs. The issue arises when the h4 spills over the div, particularly when using <%Eval. Any suggestions on how to fix this? Manual input divs don’t seem affected o ...