Fluid layout combined with an unspecified width that remains fixed

Should be a piece of cake in 2012 :P

I'm looking to create two divs, placed side by side. The first div will display a table while the second div will contain a Google map.

The left div should adjust its width based on the size of the table it contains (making it a "fixed-width" column without any specific dimensions set by me). This way, as the browser window is resized, the table remains consistent in size. I'd rather not define the fixed width myself since the table could vary in size.

The right div should automatically fill up the remaining space on the page.

Has anyone figured out how to accomplish this? It's proving tricky to find the right solution through online searches, especially since most fixed/fluid layouts I've come across have set widths for the fixed column.

csslayoutfluid-layout

Answer №1

Give this a try:

HTML Structure

<div id="wrapper">
    <div class="map-container"></div>
    <div class="data-table"></div>
</div>​

Styling with CSS

#wrapper {
    position: relative;
}
.data-table, .map-container {
    position: absolute;
    top: 0;
    height: 300px;
}
.data-table {
    left: 0;
    right: 150px; /* width of map */
}
.map-container {
    right: 0;
    width: 150px;
}

Or using jQuery

var wrapperWidth = jQuery('#wrapper').innerWidth();
var dataTableWidth = jQuery('.data-table').outerWidth();

jQuery('.map-container').width(wrapperWidth - dataTableWidth);

​ ​ View Example with CSS on JSFiddle View Example with JavaScript on JSFiddle

Answer №2

Looking at CSS:

#primaryTable{
    display:inline;
    width:auto;
}

#secondaryTable{
    display:inline;
    width:auto;
}

#specificTable{
    width :"100px"
}

HTML

<div id="primaryTable"><table id="specificTable"><tr><td>Greetings Universe!</td></tr></table></div>
<div id="secondaryTable"><div id="myChart"></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

Tips for center-aligning layouts in Angular Material

I am struggling with the Angular Material flex layout, so I took this directly from the Angular Material website. Based on the documentation for layout container, items are arranged in a row with a max-height of 100% and max-width matching the width of th ...

cssangularjstypescriptangular-materialmaterial-design

What is the best way to transfer data from a div tag to an li tag using JavaScript?

https://i.stack.imgur.com/se2qk.pngI am attempting to change the div tag content to li tag. Here is a snippet of the code from inspect for reference. I need to remove the div tag with the "domTitle" class. <li style="display: inline;" id="list_name"> ...

javascripthtmlcss

Unable to supersede the current CSS styling

I have implemented the example found here in my project and now I am trying to make the table stretch to fit the entire page. To achieve this, I have added the following CSS: html, body{ height: 100%; } #gridContainer { height: 100%; } table{ ...

htmlcss

The property cannot be set for an undefined element in Jquery UI slider tabs

There seems to be some extra space at the bottom of the slider tabs between the navigators and content. Additionally, I am facing a challenge in making the page responsive as the content size does not adjust when I resize the window. To see the changes, I ...

javascriptjquerycssjquery-ui-tabs

Content within the two inline divs is experiencing alignment problems?

I am experiencing alignment issues with the content inside two divs that contain multiple nested divs. The content is not properly aligned. CSS Code: .breadcrumb-nav{ margin-left: 230px; left: 70px; top: 70px; width: 1291px; height: 6 ...

htmlcss

Enhance the appearance of the input range by styling it with an additional class both before and

I have a JSF page where I am using an input range element. I want to add a different style class before and after the input range. Specifically, I want to display a plus icon (ui-icon-plusthick) before the input and a minus icon (ui-icon-minus) after the i ...

htmlcss

Updating a div's border using JavaScript

I recently generated a div element dynamically through code. var Element; Element = document.createElement('div'); My goal now is to modify the right and bottom borders to "#CCCCCC 1px solid". I aim to achieve this without relying on any exte ...

javascriptcssborder

Complete visibility of Bootstrap progress labels is compromised

Progress bar with a customized label inside: <div id="progress" class="progress mb-1" style="height: 20px;"> <div class="progress-bar" role="progressbar" style="width: 5.0%" aria-valu ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Can CSS be used to dynamically change the color of an element based on a specific value?

Is it possible to dynamically change the background color of table cells using only CSS based on their values? For example, I am looking to achieve a similar effect as in Excel with conditionally formatted values: https://i.stack.imgur.com/6BsLB.png If ...

htmlcsscolorsconditional-formatting

The Jquery test isn't functioning as expected - the green square fails to display

So, the concept is that the green square should appear when your mouse hovers over the red square, but it's not working as expected. Here's the code snippet: <html> <head> <script type="text/javascript" src="jquery-1. ...

javascriptjqueryhtmlcss

Tips for incorporating Bootstrap classes into a React project, setting the className attribute to an empty string

After setting up Bootstrap and Create-React-App using npm on my local machine, I proceeded to create a new React app. The first component I worked on was counter.jsx: import React, { Component } from 'react'; class Counter extends Component { ...

javascriptcssreactjsbootstrap-4

Ways to revamp the overall aesthetic of the entire project

Is there a way to change the colors of all elements in a project when a user checks a checkbox, without having to add a class to each element? Perhaps using a service or a different method? ...

css

Tips for creating a CSS layout with two columns using the flex property

I'm having trouble getting my images to display in 2 columns within the container div. Right now, they are only showing up in a single column with an empty space beside them, as you can see in the preview image. html <div class="container ...

htmlcssflexbox

Error: CSS - The background file could not be found

Hey there! I'm currently facing an issue with setting a background image on my website, as it's remaining white. When I checked through inspect element, it says that the image can't be found. The HTML file is correctly linked to the CSS fil ...

htmlcssnotepad++

Using the Enter key to submit HTML forms

I created a custom console using HTML, CSS, and JavaScript. The input doesn't show up when I press enter, I have to click the send button. How can I make it send on enter press? Here is the code, please assist me: /* code goes below*/ <!DOCTY ...

javascriptjqueryhtmlcss

Discover the color value within an array that begins with the "#" symbol

In my PHP code, I have written a function that extracts values from a CSS file and creates an array. Now, I need to loop through this array and create another array that only contains color values (strings starting with #). The challenge is that the length ...

javascriptphphtmlcssarrays

What is the best approach to creating a fully rounded capsule using CSS?

I've been having trouble creating a complete capsule in CSS and I'm not achieving the expected outcome. Can anyone assist me in resolving this issue? I am new to CSS. Below is my code: <style> #myStyle { position: relat ...

htmlcss

Presentation: Positioning Next Buttons Beside Slide Images While Maintaining Responsiveness

I am facing a challenge with my slideshow project. The slideshow consists of images and text on each slide, along with previous and next buttons that are aligned within the parent container. I am trying to align these buttons at the midpoint of each image ...

htmlcssresponsive-designslideshow

Make cards disappear with a sleek scrolling effect in Angular (I'm open to library recommendations)

I want the cards to appear on the screen as I scroll. My knowledge of angular animation is limited, but I have used it for now. html: <div class="row" *ngIf="posts"> <div id="feed-{{post.id}}" (click)="getFeed(post)" *ngFor="let post of posts ...

cssangularanimationangular-animations

Acquiring Twitter updates for a dynamic Bootstrap carousel display

I've been trying to load multiple tweets from the stream into the slideshow, but I can only get one to show up. I believe it has to do with the placement of the <div id="feed"> element, but I can't seem to figure out what I'm missing. ...

jqueryhtmlcsstwitter-bootstrap