I desire a three-column layout where the middle column will expand in width if columns 1 and 3 are vacant

I have a three-column layout designed without using tables.

<div id="main">

  <div id="left"></div>
  <div id="content"></div>
  <div id="right"></div>

</div>

This is the CSS code:

#left {width: 200px;float:left;display:inline;}
#content {width: 600px;float:left;display:inline;padding: 0 10px;}
#right {width: 160px;float:left;display:inline;}

I am working with a web application where I am not allowed to modify the layout. This means that the divs for left, content, and right cannot be removed.

In some instances, both left and right columns are empty, and I need the content div to expand beyond the 600px limit.

Can this be achieved without changing the HTML? What options do I have?

Appreciate any help!

asp.netjqueryhtmlcss

Answer №1

While I can't say for sure if it's possible to achieve this using pure CSS, considering that jquery was mentioned in the question, I would assume that it is a viable option.

Consider the following example. The objective here is to check if the #left or #right divs are empty. If they are, we adjust the width of the #content div accordingly.

$(document).ready(function(){
    if($('#left').height() == 0){
        $('#content').width( $('#content').width() + $('#left').width());
    }
    if($('#right').height() == 0){
        $('#content').width( $('#content').width() + $('#right').width());
    }           
});

It is possible that this script can be enhanced further, as it relies on the assumption that an empty div will have a height of zero. I did consider using the :empty pseudo selector, but that method would fail if there is any whitespace within the 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

Regenerate the database with a new table created from the model

My coworker accidentally removed the UserProfiles table from my database, which was created through a model class. This is what the model class looks like: namespace OneMillion.Models { [Table("UserProfile")] public class User { [Key] ...

asp.netsqlasp.net-mvcasp.net-mvc-4model

The powerful ASP file upload feature

Currently, I am utilizing a dynamic ajax file upload control called AjaxControlToolkit.AsyncFileUpload(). However, when attempting to upload a file, the value of Request.ServerVariables["QUERY_STRING"] is displaying as "AsyncFileUploadID=MainContent_flbFi ...

asp.netajaxfile-uploadasyncfileupload

Tips for generating an auto-incremented ID column in jQuery tables through the render method

My jQuery Datatable setup looks like this let purchasedProductTbl = $('#grdPurchasedProduct').DataTable({ filter: false, paging: false, lengthChange: false, searching: false, ordering ...

javascriptjquerydatatables

Creating horizontal card overflow with arrow navigation in Bootstrap 4.5: A step-by-step guide

Using Bootstrap, I've created a snippet that generates an overflow card that can be scrolled horizontally. <div class="container"> {{-- If you look to others for fulfillment, you will never truly be fulfilled. --}} <h4 class="mb- ...

phphtmlcsslaravelbootstrap-4

Enhance the appearance of QTreeView items using a customized display delegate and CSS

In my QTreeView, I have a custom delegate set up for one of the columns to display a colored progress bar. The appearance of the progress bar depends on the content and I used the color information from option.palette to mimic the default delegate behavior ...

cssqtdelegatesqtreeview

I need the sidebar to be visible across all interfaces

https://i.stack.imgur.com/iEgAF.png I have developed a website for employee monitoring with six interfaces. The first interface is for sign-up, the second for logging in, the third for creating projects, the fourth for displaying projects, the fifth for c ...

cssvue.jsvuetify.js

AngularJS allows users to easily select and copy all text from both div and span elements within a specified range. This feature makes it

I am working on implementing a select all feature using AngularJS for text displayed in a structure similar to the one below. Once all the text is selected, users should be able to press ctrl + c to copy it. <div ="container"> <div class="header ...

javascripthtmlcssangularjsjqlite

Alignment of a div at the bottom inside a jumbotron using Bootstrap 4

Searching for answers on how to vertically align a div within a jumbotron, I have come across plenty of solutions for middle alignment but none for bottom alignment. <section id="profileHero"> <div class="container"> <d ...

csstwitter-bootstrapbootstrap-4

An interactive top navigation bar paired with three dynamic columns housing scrollable content, all crafted seamlessly with Bootstrap 4

I recently updated my layout using bootstrap but I am facing a glitch. I want the layout to have fixed scrolling only within the columns, without affecting the entire page. Everything works fine until I add some text inside any of the columns, then the who ...

cssbootstrap-4

Challenges of N-tier architecture integration with WCF and ASP.NET session management

While working on a personal project, I encountered an issue related to the n-tier architecture being used: Framework. WCF Framework service. ASP.NET control that connects to the WCF Framework services on the server-side. ASP.NET client hosting that contr ...

c#.netasp.netwcfn-tier-architecture

Guide on automatically populating login data in an html5 form using a python script

I'm currently attempting to create a script that can automatically populate the values of an HTML5 form (specifically Name and Password fields). However, I am struggling with how to actually input these values. After searching various sites, I have y ...

pythonhtmlpython-3.xformsauthentication

Using Jquery to eliminate the selected option from the second dropdown list after choosing from the first

Currently, I have implemented this code to enable me to choose an item from dropdown 1 and then remove the same item from dropdown 2. $("#BoxName").change(function(){ var selectedItem = $(this).val(); var nextDropdown = $(this).parent("td").nex ...

jqueryselectiondropdownbox

What is the proper location to place the CSS I wish to implement for a module?

As I embark on creating my inaugural DotNetNuke website, I find myself faced with the task of adding an HTML module to a page. To style the text within it, I have been advised to utilize CSS classes. I'm curious about where .css files should be place ...

htmlcssmoduledotnetnuke

Jquery Validation Plugin - Specifically for validating numeric inputs in specific situations

I am currently working on implementing validation using jQuery Validate for a numeric value, but only when a specific radio button is checked. If the radio button is not checked, the field should be required and allow alphanumeric values to be entered. How ...

javascriptjqueryjquery-pluginsjquery-validate

A guide on integrating a data deletion feature in Angular applications

On our website's edit page, there is a list of mat cards/workspaces with an edit icon in the top corner of each workspace. Clicking on the edit icon will take you to the edit page for that specific workspace. Within this edit page, there is a delete b ...

htmlcssangularfunctionfilter

How to dynamically add table rows and cells with JavaScript using a single selection input

I am working on a project that involves a selection input with around 5 options. Additionally, there is an empty table that follows this format: <table> <tr> <td>X (for deletion)</td> <td>Option name</td> ...

javascriptjqueryhtmlcsshtml-table

Misplacement of HTML head tags

Is it a grave error in this layout that H1 isn't the first rendered head element? Is there any way to correct this issue? Given that both columns have variable lengths, I am struggling to find a workaround. Reference I was requested to provide a ref ...

htmlcssheadersemantics

Please only choose the immediate children of the body element

<body> <div> <div class='container'></div> </div> <div class='container'></div> </body> Is there a way to use jQuery to specifically target the second container div dire ...

jqueryhtmlcss

Postpone the execution of the toggleClass function

I have a tab that, when clicked, fades in to reveal content loaded with AJAX. However, the content loads immediately upon clicking the button. I attempted to use toggleClass with delay, but it was unsuccessful. How can I effectively delay the loading of t ...

htmljquerycss

Transferring a DOM element to a different window while preserving event listeners in Internet Explorer 11

I am tasked with creating a webpage feature that allows users to detach a section of the page and move it to a new window on a second monitor, then reattach it back to the main page. The detached section must retain its state and event listeners during the ...

javascriptjqueryinternet-explorerwindow.open