Resolving fluid column problem in CSS layout for wrapping content

+-----------------------------------------------------+
|.....................................................|
|..header height: 128px...............................|
|.....................................................|
+-----------------------------------------------------+
|.............|.......................................|
|.sidebar.....|..Lorem ipsum..........................|
|.width:......|.......................................|
|.140px.......|..+---------------------------------------------+
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..+---------------------------------------------+
|.............|.......................................|
|.............|.......................................|
|.............|.......................................|
|.............|..frame should be as large as the......|
|.............|..entire viewport or larger depending..|
|.............|..on the context.......................|
+-----------------------------------------------------+

I'd like to inquire about a layout design featuring a 2-column structure with a fixed-width sidebar and fluid content area, along with a header (and possibly footer). I am seeking a solution that allows the content area to wrap its contents efficiently to prevent overflow. I am curious if there is a CSS method to achieve this, or alternatively, what would be the most effective Javascript approach? I have faced challenges with achieving cross-browser compatibility in previous attempts.

javascripthtmlcss

Answer №1

Give this a shot.

#main-section {
  margin-top: 150px;
  maring-left: 160px;
}
#side-menu {
  position: fixed;
  left: 0;
  top: 150px;
  width: 160px;
}

Answer №2

CSS Tricks:

.container { overflow-wrap: break-word; }

Answer №3

Here is a simple solution:

HTML

<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>

CSS

#header {
   height: 128px;
}

#sidebar {
   float: left;
   width: 140px;
}

#content {
   margin-left: 140px;
}

To see a demonstration, check out this example.

Answer №4

After conducting extensive research on the topic, I have come to the conclusion that using CSS in a compatible manner is simply not feasible (especially if we exclude IE6). The available options require either javascript or tables. I decided to go with the lesser of two evils (tables) as utilizing javascript would lead to a more complex solution and may cause strain on the browser when handling the onResize event, depending on the complexity of the function being called. Since this is an intranet application, certain search engine considerations are not relevant. However, accessibility remains a significant concern.

I would be delighted to be proven wrong though :)

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

Arranging numerous items based on date in JavaScript without prior knowledge

I'm facing an issue where I need to showcase JSON data containing events but want them sorted by time. The challenge is that the number of objects in the JSON can vary as users can keep adding more. Below is my code snippet demonstrating how the displ ...

javascriptarrayssortingweb-frontend

Retrieving data simultaneously from two MongoDB collections

I want to fetch data from 2 collections and combine them into a single array with merged data. The solution that worked for me was: const bothValues = await ValueA.aggregate([ { $unionWith: { coll: 'valueB' } }, { $sort: { rank: -1, ...

javascriptarraysmongodbmongooseunion

Incorporating a Link to a RowLabel on a Google Chart Timeline

I have been working diligently on constructing a timeline for our team's Project Roadmap. Everything is set up quite nicely: I've successfully embedded the Timeline into our Google Site and it seems to be functioning well with all the components ...

javascripthtmlcsschartsgoogle-visualization

In terms of performance, is it better to fetch JSON data and render it using JavaScript, or to request the full

Similar Inquiry: Why is it a bad practice to return generated HTML instead of JSON? Or is it? When making an AJAX request to a PHP file, which method would result in quicker HTML rendering? Directly sending fully formatted HTML from PHP, Or sending ...

phpjavascripthtmloptimization

Choose distinct and original dialogue for every option selected

My goal is to design a unique confirmation dialog that will display for each option selected. Currently, I have it set up so that the dialog will only appear if the selected option is lower than the previously selected one. Everything seems to be working f ...

jqueryhtmlcsshtml-selectcustom-data-attribute

Ways to modify the appearance of the Sign up page on Moodle

I'm a newcomer to the world of Moodle, currently using version 2.9. I've created a unique design for my Signup page using HTML5 and CSS. How do I go about integrating this custom page? While I understand how to change the default Login page by m ...

phpcsshtmlmoodle

What is the best method for achieving a div that is 100% height in relation to the screen while also having a `top

My div element is set with a top='70px' property. However, when the div has content that requires scrolling, it moves down and the end of the scroll is not visible. I tried adding the following properties to the div, but it did not resolve the ...

htmlcss

Application.js encountering a mistake that needs attention

I've recently delved into developing a new game using nodejs, but I'm facing a strange issue in which I'm unable to use require in the app.js file. This is perplexing to me because I've successfully implemented require in other similar ...

javascriptnode.jsnpmwebpack

.NET Libraries for Parsing HTML

Seeking libraries to parse HTML for extracting links, forms, tags, etc. LGPL or any other developer-friendly commercial licenses are preferred. Have you used any of these libraries before? Or can you recommend a similar one? ...

.nethtmldomparsing

Update the page with AJAX-loaded content

I am currently utilizing a .load() script to update the content on a webpage in order to navigate through the site. This is resulting in URLs such as: www.123.com/front/#index www.123.com/front/#about www.123.com/front/#contact However, I am encountering ...

javascriptjqueryhtml

Troubleshooting Logo Size Problems: Converting from Figma to HTML and CSS

I've been working on designing a landing page using Figma and overall it's looking great. However, I've run into some issues with my images, particularly with my logo. Figma provides specific width and height dimensions for my logo, but when ...

htmlcssimageexportfigma

Error occurs despite successful 200 response from Ajax delete request

I've been working on setting up a simple API for my project and encountered an issue. When I send a DELETE request using jQuery Ajax, the request goes through successfully, deletes the specified entry in the database, returns a status of 200, but trig ...

javascriptphpjqueryajaxhttp-delete

Looking for CSS templates for improving your business web apps?

Many CSS templates out there are fixed-width, typically around 900 pixels wide... Right now, I'm in the process of creating an intranet Rails application and I'm seeking a good resource for CSS templates designed specifically for business applic ...

ruby-on-railscss

The issue arises when interfaces are extended by another interface

Is there a way to have classes that implement both the Observer and Comparable interfaces together? interface Comparable<T> { equals: (item: T) => boolean; } interface Observer extends Comparable<Observer> { notify: () => void } ...

javascripttypescript

Is the sub-document _id generated by Mongoose unique?

Consider the mongoose schema below: mongoose.Schema({ world: String, color: [{ name: String }] }); This schema generates documents with sub-documents that have _id fields. { _id: 'a9ec8475bf0d285e10ca8d42' world: 'matrix', ...

javascriptnode.jsmongodbmongooseschema

Updating a component with React JS setState() must be done on a mounted or mounting component

I encountered an issue where I am getting the error message setState(...): Can only update a mounted or mounting component., but I am struggling to find a solution. import React, { Component } from 'react'; import Loading1 from '../images/ ...

javascriptreactjsjsx

I am wondering how to use the value assigned to a variable's textContent as an argument for player input in my JavaScript code

i am currently developing a JavaScript project to create a user interface for my rock, paper, scissors game. Currently, the game only runs in the console and prompts the player for input. So far, I have implemented three buttons (one each for rock, paper, ...

javascripthtmladdeventlistener

Is there a way to emphasize my navigation using a call-to-action (CTA)?

My CTA is set up like this: <div class="heading__link"> <a class="heading__cta" href="#about">View my work</a> </div> Additionally, my navigation bar is structured like this: <nav id=&quo ...

javascripthtmlcss

What are some ways I can customize the appearance of a canvas element?

After discovering a canvas animation, I decided to customize it for my own needs. However, due to the fact that a canvas and its shapes are not DOM elements, I am struggling to style it properly. You can view my current progress here. When you hover over ...

htmlimagecanvasmask

Displaying the active navigation element in ApyCom JavaScript jQuery menu: tips and tricks

Currently, I am utilizing the jQuery navigation menu from ApyCom. Everything seems to be functioning properly except for one issue. Whenever I click on a different navigation element, I expect that element to remain highlighted in order to indicate to the ...

javascriptjqueryhtmlnavigation