Set the side columns in CSS to have a fixed width, while the center content column should have

Check out this fiddle I created for everyone to view: http://jsfiddle.net/defaye/DhaHP/4/ For the full-screen result, click here: http://jsfiddle.net/defaye/DhaHP/4/embedded/result/

I'm encountering an issue where, after resizing the window past a certain width, the left column separates from the group. I want them to stay connected, with the center column having a minimum width of 400 and maximum width of 800px, while the side columns remain at 200px each. The header should always be at 100% width.

If anyone has a solution to this problem, please share! It's really frustrating me.

layout css

Answer №1

Check out this new example that is compatible with IE6+: http://jsfiddle.net/DhaHP/12/ View the end result here: http://jsfiddle.net/DhaHP/12/embedded/result

Summary of the modifications:

Reordered #left and #right to be positioned above #center (#right before #left);
Set min-width and max-width on #container to 800px and 1200px respectively;
Removed float property from #center;
Assigned equal margin-left and margin-right values on #center matching the width of each side column;
Used float-left on #left and float-right on #right;

The only issue in IE6 is with the min-width and max-width properties, which require a small workaround or using IE7.js. In IE7, everything functions correctly as intended.

Answer №2

Check out this functional example: http://jsfiddle.net/PhilippeVay/DhaHP/8/ (update: now works with Chromium)

Changes implemented:

Reordered HTML elements: #left placed before #center column
No use of relative positioning in CSS
display: table; applied to the parent and table-cell on the 3 columns for a table-like visual layout
Set width to 200px for #left and #right
table-layout: fixed; used on parent element to ensure dimensions are respected as defined by the author, not based on cell content
Constrained widths set for parent element with min-width: 800px; (400+200+200) and for the grandparent with max-width: 1200px; (800+200+200) (update: max-height on #container only effective in Firefox, not Chrome). Surprisingly, it functions correctly as is.

Compatibility: IE8+
For IE6/7, you can experiment with inline-block using display: inline; zoom: 1; as an alternative for outdated browsers)

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 incorporating captions into a slideshow

I've been experimenting with different methods to include captions in my slideshow, but haven't had much success. I simply want to add a div at the bottom of each image. Do I need to modify my script or should I consider adding something else? H ...

jquery html css

Incorrect Arrow Direction of Bootstrap Popover on SVG Icon

I set up a bootstrap(v5.1) popover on an svg icon, but the arrow icon direction is incorrect. Check out the code snippet below to see how it's configured; @create text & @modifytext are placeholders for dynamic content. <svg height="20& ...

css bootstrap-5 bootstrap-popover

Obtaining a background image within a keyframe

I have been experimenting with keyframe animations and am looking to incorporate multiple images into the animation. Specifically, I want to switch out the image every 10% increment to depict someone running. Despite my efforts to use a background-img in ...

html css css-transitions css-animations

What could be causing my button to pass the event to its parent element?

I've implemented a clever trick within a div, where I have included my own custom "data" indicating what action to take when the user clicks on it. My JavaScript code snippet is as follows (with some code omitted for clarity): $('[data-hqf-swit ...

javascript jquery html css

The mouse scroll function is not functioning properly with the mCustomScrollbar jQuery plugin

I've been troubleshooting a problem without success, so I decided to download the jQuery plugin mCustomScrollbar. Everything seems to be working fine except for one thing - I can't scroll using the mousewheel on my test page. The console is clear ...

javascript jquery html css jquery-plugins

Hide additional tabs on the page when the width of the tabs exceeds the page width

I am currently working on a Google module tab application. I have successfully added the tab control with drag and drop functionality within a specific area. However, I now need to limit the number of tabs displayed on the page. Regardless of the total cou ...

jquery html css tabs

What is the process for including icons on buttons?

I have been researching how to use Font Awesome software to incorporate icons into my HTML elements, but I am uncertain about the implementation process for my specific case. Currently, I have created a basic webpage with buttons and I would like to includ ...

html css

filtering elements with selectable functionality in jQuery UI

I'm trying to exclude the <div> children from being selected within this list item and only select the entire <li>. The structure of the HTML is as follows: <ul id="selectable"> <li> <div id="1"></div> ...

javascript jquery html css jquery-ui

Effortless navigation with smooth scrolling on anchor links in react/next.js

Can smooth scrolling be achieved using only CSS when clicking on an anchor link within a react component? ... render( <a href="#smooth-link">Link To There</a> .... <div id="smooth-link"> .... ...

javascript css reactjs next.js

What are some effective ways to stretch specific muscles?

I am facing an issue with my select element. The default value is "please choose," but there are options like "Accommodation & Hotels" that are longer and not clearly visible on IE browsers, though they work fine in Firefox. How can I resolve this issue? S ...

javascript html css

Issues with absolutely positioned slideshows

Currently, I am attempting to design a slideshow using absolute positioning to layer images on top of each other. However, I am encountering a problem where the text below the slideshow is also being stacked on top of the pictures. I have tried enclosing t ...

html css css-position

Is there still excess top padding or margin in Firefox after clearing the default reset for the <ul> element?

My floated horizontal list is looking great on IE and Opera, but for some reason, Firefox is adding extra padding or margin at the top. I'm not sure how to fix it. Everything was fine until I had to add a display:inline to an image link next to it to ...

css html-lists css-float

CSS causing unexpected behavior in image slider

I am facing an issue with incorporating a code for an image slideshow into my website. The current CSS is causing the slideshow to malfunction. Without the slideshow code in the CSS, the image appears correctly on the screen and changes its source every 2 ...

html css slideshow

The Navbar in Bootstrap 3 remains expanded and does not collapse

It seems like there's a simple solution I'm overlooking. When I resize my screen, the navbar collapse toggle stops working. I've searched various forums but couldn't find a fix that works for me. Could someone lend a hand in identifyin ...

jquery html css twitter-bootstrap twitter-bootstrap-3

What steps should I take to create a script that can manipulate elements of a webpage when a specific DIV is visible on the screen?

I am working on customizing the carousel on my website roseannebarr.tumblr.com. My plan is to add a dedicated "About" button on the left side of the carousel. When this button is clicked, I want a "left" arrow to appear in its place. I am new to Javascri ...

javascript html css

How to transform a hyperlink into a clickable element within an absolutely positioned container

I'm currently working on a photo gallery project and using magnific popup to create it. However, I ran into an issue with the hover event on the images that displays an icon when it's hovered over, indicating that it can be clicked to view more. ...

javascript html jquery css magnific-popup

Choose content within an HTML tag and modify its appearance

<body> This is text1 <div> This is text2</div> </body> I'm looking to style the text1 only. I attempted to use body{ color:red; } but both text1 and text2 ended up turning red. What I really need is something like th ...

jquery css

IE 8 behaves in varying ways depending on the computer it is used on

Why might IE 8 behave differently on two separate machines? Specifically, when visiting this site: One machine experiences the issue of the "X" disappearing and not being able to minimize a slideshow after maximizing it. However, on another machine, even ...

jquery css html internet-explorer-8

compress a website to display advertisement

Here is a JSFiddle link I would like to share with you: I am currently working on squeezing the webpage to display an ad on the right side. http://jsfiddle.net/5o6ghf9d/1/ It works well on desktop browsers, but I am facing issues with iPad Safari/Chrome ...

javascript html css

Issue with align-items-* class in Bootstrap 4 causing alignment problems

Currently in the process of constructing a website utilizing the Bootstrap 4 framework and encountering difficulties with aligning items properly. For instance: Refer to Bootstrap 4 official documentation for row positioning Compare to my row positionin ...

css bootstrap-4

CSSer Q&A