Tips for equalizing the height of inner DIVs within a container

Similar Question:
How to maximize a floating div?

Showing my HTML setup below:

    <div id="container">

        <div id="sidebar">
            left
            <br /><br /><br /><br /><br /><br />
        </div>

        <div id="content">
            right
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            bla bla
        </div>

        <div class="clear"></div>

    </div>

Here is the CSS code utilized:

#container {
    width: 760px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;   

    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cdcdcd;      
}

#sidebar {
    float:left;
    width:25%;
    background:#555;
}

#content {
    float:left;
    width:75%;
    background:#eee;
}

.clear {
  clear: both;
}

Currently, the sidebar isn't matching the height of the container. How can I make it extend its height?

Thank you!

htmlcss

Answer №1

Here is a layout that may not be exactly what you're searching for, but give it a try:

<style>
#container {
    width: 760px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;   

    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cdcdcd;      
    position: relative; //Ensures the children in the container are positionable
}

#sidebar {
  bottom: 0px; //positions the side bar
  left: 0px; //positions the side bar
  top: 0px; //positions the side bar
  width:25%;
  background:#555;
  position: absolute
}

#content {
  margin-left: 25%;
  width:75%;
  background:#eee;
}


.clear {
  clear: both;
}
</style>
  <div id="container">


        <div id="sidebar">

            Left Content Here
            <br /><br /><br /><br /><br /><br />
        </div>

        <div id="content">
            Right Content Here
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            Additional text goes here
        </div>

        <div class="clear"></div>

    </div>

Answer №2

To create the illusion of a sidebar that extends to the bottom, consider matching the background color of your container element with the sidebar. This simple trick can visually extend the sidebar downwards.

However, if you require the sidebar to truly reach all the way down, employing a table might be the most straightforward solution. While CSS may offer a method for achieving this effect, extensive research has yet to yield a satisfactory result.

Answer №3

Your #content has more line breaks than your sidebar, causing the #container to adjust its height based on the content div. This is why the sidebar may appear smaller. To fix this issue, you should make sure both the content and sidebar have the same amount of line breaks or set their heights manually.

#sidebar{
height:100px;
}

#content{
height:100px;
}

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

Error encountered while trying to load the fonts

Upon attempting to load fonts into the Spectacle boilerplate, I encountered the following error message: Failed to decode downloaded font: http://localhost:3000/assets/fonts/Overpass-Bold.ttf OTS parsing error: invalid version tag I've includ ...

htmlcsswebpackfonts

Discovering the method to extract text from an element within a search result with Selenium Webdriver

Struggling to extract a URL from Tripadvisor.com's search results using its element, my attempts have proven futile so far. Check out the code snippet below: from selenium.webdriver.common.keys import Keys from selenium import webdriver from seleniu ...

pythonhtmlselenium

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

Currently working on a custom slider and encountering an issue. When quickly moving the mouse outside the slider's range horizontally, exceeding its width, the slider doesn't smoothly transition to minimum or maximum values. Instead, there seems ...

javascripthtmlcss

Unlock the secrets of programming with the must-have guide to mastering variables

As a newcomer to the world of programming, I may be jumping ahead by asking this question too quickly. While reading a book, I came across something that confused me. Why is it necessary to create a variable for the password box element? Wouldn't the ...

javascripthtml

How can we apply CSS to all pages except for one containing the "howto" placeholder?

Hey, we're dealing with multiple pages that require CSS styling. .cms-index-noroute .col-main .std {font-weight: bold} .cms-index-list .col-main .std {font-weight: bold} .cms-index-view .col-main .std {font-weight: bold} We'd prefer to simplify ...

csscss-selectors

What is the process to determine which section of the image is shown when I hover over it?

I have implemented colorbox for popups on my website located at in the "OUR PORTFOLIO" section. I customized the default images for previous, next, and close buttons, but when I hover over them, they display the wrong parts of the image. I'm unable t ...

jquerycss

Use a foreach loop to iterate over an array of dates and display them in individual tables

I am currently working on structuring my foreach loop to iterate through all the dates in my time stamp arrays. The goal is to display the results in 5 separate tables, each pertaining to one of the dates. Below is the function I've implemented to re ...

phphtml

Is there a way to launch iframe links in the parent window of an Android native app?

I'm currently working on developing a directory-style application, and I am using iframes to embed other websites into the app. I would like the embedded site links to open within the parent window. In the Progressive Web App version, everything is w ...

androidhtmlangularjswebprogressive

Shifting static information both above and below a 100vh element

At the moment, I have a stationary image in the center of my screen that moves horizontally when scrolling with the mouse. Now, I want to include a screen above and below this element, each with a height of 100vh. However, when I attempt to do so, the fixe ...

javascriptcssreactjscss-animations

Photo not completing the table

Hey there, I'm currently working on creating a table to showcase some products but I am struggling with ensuring that the images display at the correct size. Any assistance on this matter would be greatly appreciated. #tbldesktops { width: 100%; ...

htmlcss

Enable row selection in UI-Grid by clicking on a checkbox with AngularJS

I am a newcomer to angular js and I am looking to have the checkbox automatically selected when clicking on a row to edit that specific cell. I have implemented a cell template to display the checkbox in the UI-grid, but now, when I select a row, the row i ...

javascripthtmlangularjscheckbox

How can I prevent a CSS class from being rendered in a specific view within MVC?

My knowledge of CSS is quite limited and I am fairly new to it. In my MVC application, I am using a theme that relies on Bootstrap. In the _layout view of my application, I have the following code: <div class="container body-content"> @Html.Par ...

htmlcssasp.net-mvc

If the width is divisible by a certain value

I have a question regarding the width of my element that I want to divide by 90. If this width is a multiple of 90, I set the width of the element. If not, I move on to the next. For example, when the window width is 1000px and the element is at full widt ...

jqueryhtmlcss

Adaptable data table featuring varying sizes of columns and rows

I'm attempting to design a grid that resembles the following: https://i.sstatic.net/Sf7M9.png The challenge I'm facing is how to ensure that the column and row names adjust properly with the grid in the center. Currently, this is the code I hav ...

htmlcssresponsiveness

Creating a fixed navigation bar that stays at the top of the page when scrolling

I am trying to create a navigation bar similar to the one seen on W3School's website. I would like the navigation bar to overlap the header when scrolling down, and for the header to appear above the nav bar when scrolling back to the top. Despite m ...

javascriptjqueryhtmlcss

Alter the Header/Navigation to switch colors depending on the section of the website currently being viewed

I'm currently revamping my personal portfolio website and had an idea for a cool feature. I want the header/navigation bar to change color based on which section of the webpage it's in (the site is one page only). My initial thought was to add o ...

javascriptjqueryhtmlcss

Align a header and a block of text in a vertical manner within a div

Struggling to align a h1 element and p vertically in the middle of a left-floated div, but they end up next to each other aligned vertically. Seems like table-cell display is the culprit, but not sure how to achieve vertical alignment without it. The curr ...

htmlcsscss-tables

Using the input method in JavaScript cannot extract an object property

Recently, I have been working with this JavaScript code provided below. It is essential for me to retrieve the votecount for a game based on user input. function Game(gamename,votes) { this.gamename = gamename; this.votes = votes; }; var lol = ne ...

javascripthtmlvariablesobject

Alignment Woes in Bootstrap Designs

I'm seeking assistance regarding the alignment of content on my webpage. The content is not aligning properly with the sidebar and footer, and I'm unsure how to proceed. The page should have a left margin to avoid touching the sidebar, and the fo ...

htmlcssbootstrap-4

`Is there a way to retrieve the ID of an element upon clicking on it?`

Can you help me with a JavaScript query? I have two HTML div elements with ids of 'div1' and 'div2'. When I click on any of the divs, I want to display the id of the clicked div. Any thoughts? <div id="div1"></div> <div ...

javascripthtmlinnerhtml