Expanding Elements with CSS

I have a piece of HTML code as shown below

<div>
   <div class="left">
   </div>
   <div class="center">
   </div>
   <div class="right">
   </div>
</div>


.left
{
  background: white;
  border-right: 1px solid #C3C3C3;
  float: left;
  margin-top: 30px;
  min-height: 100%;
  position: absolute;
  width: 170px;
}

.center
{
  background: white;
  float: left;
  margin-left: 171px;
  margin-top: 30px;
  min-height: 100%;
  position: absolute;
  width:895px;
}

.right
{
  background: #DEDFE8;
  border-left: 5px solid #BDC1DE;
  float: right;
  margin-top: 30px;
  min-height: 100%;
  position: absolute;
  width: 276px;
}

When the content within the center panel causes it to stretch beyond its minimum height of 100%, the left and right panels do not expand accordingly.

Is there a way to make the left and right panels expand when the center panel stretches?

Edit

If the content inside the center panel causes it to expand more than the specified minimum height of 100%, the left and right panels, which have distinct colors and borders, fail to adjust their heights accordingly. This results in gaps between them and makes the page look visually unappealing. Is there a solution to ensure that all three panels expand or contract together seamlessly?

htmlcss

Answer №1

Personally, I find the equal height columns technique from www.ejeliot.com to be quite effective.

http://jsfiddle.net/spacebeers/s8uLG/3/

The method involves setting up your container with overflow set to hidden and then adding negative margin-bottom and equal positive padding-bottom to each div.

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

Faux Columns is also a good option and may be easier to set up. However, if you prefer not to use an image, this method is definitely worth considering.

Answer №2

After reviewing your changes, it seems like you're looking to have the columns expand vertically. One effective method for achieving this is by implementing faux columns.

The concept involves adding a background with your column colors to the entire containing div, creating the appearance that all three columns are of equal height.

Although this approach can help with vertical expansion, you'll still need to address any positioning challenges. As noted earlier, when using position:absolute, it's essential to specify either top, left, bottom, or right. Alternatively, instead of absolute positioning, you may opt for utilizing floats - but keep in mind that trying to combine both methods won't work :)

Answer №3

Ensure the outer container div, which houses the following divs, has a width of 100%, position set to absolute, and a minimum height of 100%

Next, update the CSS as shown below

.left
{
  background: none repeat scroll 0 0 white;
  border-right: 1px solid #C3C3C3;
  margin-top: 30px;
  min-height: 100%;
  position: absolute;
  width: 170px;
}

.center
{
  background: none repeat scroll 0 0 white;
  float: left;
  margin-left: 171px;
  margin-top: 30px;
  width:895px;
}

.right
{
  background: none repeat scroll 0 0 #DEDFE8;
  border-left: 5px solid #BDC1DE;
  margin-top: 30px;
  min-height: 100%;
  position: absolute;
  width: 276px;
}

<div class="width:100%;position:absolute;min-height:100%">
   <div class="left">
   </div>
   <div class="center">
   </div>
   <div class="right">
   </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

Styling and Script Files on a JQuery Mobile Website

Is it necessary to include CSS and JS files in every HTML page for a mobile site developed with JQueryMobile? <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jqu ...

javascriptcssjquery-mobile

Create a seamless connection between two border lines

Whenever I try to create an angle between two borders, I end up with a jagged (pixeled) line. Take a look at the code snippet below: <div id="example"></div> #example:before{ content: ""; position: relative; width: 0; he ...

css

Guide on how to show an icon in Meteor when a link is clicked

Is there a way to display a viewed icon upon clicking a link in Meteor? On my list of jobs page, when a user clicks on a job, they are taken to the description page. I would like to add an icon to the post indicating that the user has viewed it. ...

javascriptjqueryhtmlcssmeteor

Attempting to adjust table size in MPDF to fill the available height

I'm currently utilizing MPDF in order to create a PDF document from an HTML page that includes a table. My goal is to have the table expand to fill up the remaining space on the page. Here is the specific table I am working with: I want the final el ...

phphtmlcsspdfmpdf

I have tried using justify-content: center; and align-items: center; to center this div, but the container div is still not centered. How can I successfully center

I am having trouble centering the container in my HTML code HTML code:- <body> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qrcode"> & ...

htmlcsswebfrontend

On mobile devices, the alignment of text in Bootstrap doesn't appear as intended

I'm creating a portfolio website for showcasing my design projects from university. The text in the "my work" section is centered, but it seems misaligned with other elements like buttons when the window width is reduced. What could be the issue? Cod ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Creating a customizable range input for pixel values: a step-by-step guide

I am looking to design a pixel range input. Here is an example: let slider = document.querySelector("input"); slider.addEventListener("change", () => { console.log(slider.value); }); <input type="range" min="5px" max="50px"> However, the r ...

javascripthtml

Issues with modifying Twitter Bootstrap are not being resolved

Attempting to customize the appearance of the btn-primary element in Bootstrap by utilizing a local file located at /public/styles.css. Experimented with both Jade and Stylus, but unable to successfully alter the background-color of the btn-primary. Any ...

cssnode.jstwitter-bootstrappugstylus

Display temporary image until real image loads within ng-repeat angularjs

I am looking to display a placeholder image while the actual image is being loaded. I have tried using the ng-image-appear plugin. The issue I'm facing is that the placeholder image does not appear for img elements inside ng-repeat, although it works ...

javascripthtmlangularjsimage

The styling of the first column in this row will be different from the rest

Despite having the same styling and no typing errors, I am still facing an issue with the first column not being styled correctly. It appears as nothing but text inside a column square. HTML: <div class="container-fluid"> <!--Nav Bar--> ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to resize an HTML element to fill the remaining height?

I'm struggling with adjusting the height of a node-webkit app to fit the current window size. See below for an image depicting what I am aiming for. Intended Goal : HTML Markup : <body> <div class="header"> THIS IS A HEADER W ...

htmlcsslayoutnode-webkit

Ensure that the child element maintains equal height and width measurements within a row that is distinct

Is there a way to arrange 4 items inside a flex container in a 2 X 2 grid layout while ensuring that they all have the same width and height? I've tried using flex-grow: 1;, but since the children are in different flex containers, they do not obey th ...

htmlcssflexbox

Troubleshooting HTML navigation bar white space problem

I am encountering a white space issue with my HTML nav bar for the first time. I have managed to fix the space on the sides (left and right), but there is still some space at the top of the nav bar. Can someone please assist me in resolving this issue? To ...

htmlcss

navigating the webpage using the mouse scroll bar

Upon clicking and dragging the button upwards at the bottom of the screen using a mouse, I expect the lock screen to close and the new page to appear. The next page that will open directly after this action is "Page to open" I attempted to achieve this f ...

javascripthtmlcssios

:after pseudo-element along with HTML tags

I have recently designed a basic webpage in an attempt to simulate ajax using CSS. In order to achieve this, I aimed to create hidden radio buttons with visible labels, and load an external CSS file when the user clicks on a label. However, I encountered o ...

htmlcss

Using JavaScript to retrieve the text value of a custom button

Recently, I encountered a peculiar button in my code: <button type="button" id="ext-gen26" class=" x-btn-text">button text here</button> Despite its unique appearance, I am struggling to locate it based on the tex ...

javascripthtml

Align the number of an Unordered List to the left

Exploring UN-ordered lists in HTML has led me to wonder if it's possible for dynamically generated ul tags to display like this: * Hello * Hi * Bi * Name * Ron * Mat * Cloth * Color * Red When I ...

javascriptjqueryhtmlcsshtml-lists

The process of downloading a webpage onto a computer is not completely successful

I recently created a webpage on WIX and attempted to download it using CTRL+S. However, when I loaded the site from my computer, certain elements were not functioning properly. Is there a specific piece of code that is missing when saving the webpage in th ...

htmlcss

Creating a layout with two divs displayed next to each other using CSS

Just when I thought I had it figured out, my two side-by-side divs are not behaving as intended inside the parent div. Why is the orange "Content" div ending up below the navigation bar? Can anyone spot what I did wrong here? Thank you in advance! CSS: ...

css

Is there a way to verify and send notifications when duplicate entries are added to my table?

Whenever a make and model are added using the "add" button, I need to ensure that there are no duplicates. If a duplicate is found, an alert should be displayed, and the entry should not be added to the table. Unfortunately, I have been unable to find a so ...

javascriptjqueryhtmlcssangularjs