Arranging divs, sidebar elements, and main content sections

I am in need of assistance with my website, which features various options for left and right containers as well as a center section.

  • The left container always stays the same size, but sometimes it may be hidden.
  • As for the right container, there are three different options: small, normal, or wide. Only one option will be shown at a time, although there may be instances where none are displayed.
  • The center container should expand to fill available space while staying between the left and right containers without causing the right container to drop down to a new line.

Is achieving this layout possible without explicitly specifying widths for each container?

If my explanation is unclear, I have created an example on Fiddle that you can view here: http://jsfiddle.net/WDZFx/13/

Thank you in advance for your help!

css

Answer №1

Jennica, check out this demo http://jsfiddle.net/uQ4TH/. However, similar to before, the central element will only expand based on its content, with a maximum of 50% width;

Answer №2

Instead of setting specific widths for the left, center, and right sections, consider using percentages:

Update your CSS like this:

#Wrapper {
    width: 100%;
}
#Left {
    width: 10%;
    float: left;
    background-color: pink;
}
#Center {
    width: 30%;
    float: left;
    background-color: beige;
}
#Right {
    width: 60%;
    float: left;
    background-color: silver;
}

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

Step-by-step guide to displaying the dropdown menu button content at the top of the page in main.html by using the frameset tag

The layout of my main.html involves displaying menu.htm and welcome.htm using frameset. One issue that arises is with the drop-down menu buttons "Admin..." and "Scheduler...". When hovering over these buttons, the dropdown content does not display properly ...

javascripthtmlcss

What is the best way to align these Iframes in the center?

This is the html <div class="main_content"> <section class="episodio"> <article class="contenedor_episodios"> <h2>Episodios</h2> <div class="episodio_spotify" ...

htmlcss

"Items within mui Grid do not properly align within the Grid container

I'm struggling to fit two large Grid items inside a Grid container. The Grid container needs to be 100% of the screen's height (or parent container) Grid items are large and need to fill the container while remaining scrollable Image #1 shows t ...

cssreactjsmaterial-uiflexbox

What are some effective ways to slow down the image transitions in a Javascript slideshow?

I am currently developing a slideshow that updates Images, Title, and Description simultaneously based on their Array index. The slideshow is functional BUT, my goal is to achieve a smooth transition to the next/previous Image (... title & descript ...

javascriptjqueryhtmlcssslideshow

Limiting the width of the child UL within an LI element in a dropdown navigation menu

I am trying to find a way to limit the width of a <ul> tag within a dropdown menu in CSS to match the width of its parent <li> element without setting a fixed width. Despite my efforts, I have not been successful in achieving this and I am seek ...

cssdrop-down-menu

What is the reason for the columns being divided on the xs-viewport in Bootstrap?

Attempting to grasp the concepts of Bootstrap has left me puzzled, as I cannot comprehend why the col-xs-11 is not aligning correctly with the col-xs-1. Despite having a total of 12 columns, the layout seems off. CSS: [class^="col-"] { height: 20px; ...

csstwitter-bootstraptwitter-bootstrap-3

Sliding the cursor downward to unveil a panel? (utilizing MooTools)

I'm looking to implement a feature where a DIV panel slides in when the user clicks and drags a smaller tab. While there are tutorials available for sliding elements on click, I specifically need the panel to slide in only when the user interacts with ...

javascriptcsshtmlmootools

Does the header show up when you scroll?

Recently, I encountered a project where I needed a different header to appear when the page was scrolled past the main one. If you want to check out my code, here's a link to a fiddle: https://jsfiddle.net/a7tLdsov/3/ I've tried some JavaScrip ...

javascripthtmlcssscroll

What is the best way to create a smooth sliding effect using CSS?

Need help with creating a transition effect within a bordered div that reveals hidden content when a button is clicked? I'm looking to have the <a> tag displayed after clicking the button, with both the button and text sliding to the left. Here& ...

javascripthtmlcss

Update the color of the angular material input text box to stand out

Hey there, I'm currently using Angular Material and I want to change the color of the input focus when clicked. At the moment, it's displaying in purple by default, but I'd like it to be white instead. https://i.stack.imgur.com/vXTEv.png ...

htmlcssangularangular-materialmaterial-ui

Why does Angular Material's md-select truncate the background up to the content boundary?

After updating to angular-material 0.9, I encountered an issue where the background gets cut off at the edge of the content when opening md-select. Is there a way to prevent this from happening? http://codepen.io/anon/pen/yNOypa <div class="background ...

javascriptcssangularjsangular-material

Clicking on the Bootstrap tabs causes them to shift position

I have come across an unusual issue with my website. While on the home page, clicking on a tab functions normally. However, when attempting to switch from one tab to another (such as News to Beats, Beats to News, News to Home, or Beats to Home), the tab co ...

javascripthtmlcsstwitter-bootstraptabs

What could be causing bootstrap to suddenly stop working?

Running bootstrap on React and using Storybook to view it has been a smooth process until today. The code that worked flawlessly on Friday is suddenly not working at all. Despite trying it on Jsfiddle and onecompiler, the carousel component copied from the ...

cssbootstrap-5

IE8 not displaying background-image in Zen Subtheme of Drupal 7

I've been struggling to get my website to display properly across all browsers. Everything looks great except for IE8 and below. I'm not sure if it's a problem with Drupal, Zen, IE, or CSS (although the CSS code seems correct). Here is the C ...

cssdrupalinternet-explorer-8

Shake up your background with a random twist

Seeking assistance with customizing the Aerial template from HTML5UP. I am interested in selecting a scrolling background randomly from a pool of images. Can someone guide me on how to achieve this? Presently, the background is defined within a code block ...

javascriptjquerycss

When clicking on the side-bar, it does not respond as expected

My website has a menu layout that features a logo on the left and an icon for the menu on the right side. When the icon is clicked, the menu slides in from the right side of the window, and when clicked again, it slides out. However, I am facing two issues ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Continue displaying the div even after users stop hovering over the trigger link

I'm currently facing an issue with the menu that I recently coded: https://jsfiddle.net/nL124rLq/1/ In my CSS, I am using a general selector (~) and I have a feeling that this might be the root cause of the problem: #nav #link1:hover ~ #flydown { le ...

htmlcss

Issues with CSS z-index in negative values not functioning correctly

Help! I'm encountering a perplexing z-index issue on my website. Check out the problem here: Upon closer inspection of each step's header, you'll see that only step 3 features a ribbon while steps 1 and 2 do not (if this isn't visible, ...

csshtml

Having trouble with applying a custom class to React Bootstrap tabs?

When utilizing the react bootstrap tabs component, I encountered an issue with implementing a custom CSS style for the nav-link element within it using a customized parent class indicator. <Tabs defaultActiveKey="signup_renter" i ...

cssreactjsbootstrap-4tabsreact-bootstrap

What is the best way to define coordinates or set margins for the autoTable component in jsPdf when using React js?

While working with the jsPdf library to create a PDF in React, I am encountering an issue where I am unable to set margins for the autoTable when there are multiple tables on a single page. Below is the code snippet: import React from "react"; ...

javascriptcssreactjsjspdfjspdf-autotable