Using CSS to ensure the height of two floated divs matches the height of the first div

I'm struggling with the following code snippet:

<div id="container">
    <div id="left">
        [ some contents...]
    </div>
    <div id="right">
        <div id="inner">
            [ some templates... ]
        </div>
    </div>
</div>

In this code, I have two divs and I want the height of #right to be fixed at the same height as #left, even when the content in #inner is longer and requires a vertical scrollbar. How can I achieve this? I've considered using table-cell display, but that method causes the first div to increase in height to match the height of #inner.

htmlcss

Answer №1

CSS Styles:

#wrapper {min-height: 100px; background-color: beige;}
#right-side {float: right; position: relative; max-width: 200px;}
#content {position: relative; height: 100px; overflow: auto;}

HTML Markup:

<div id="wrapper">
    <div id="right-side">
        <div id="content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </div>
    </div>
    <div id="left-side">
        [ insert your content here...]
    </div>
</div>

You can view the code snippet on this link: http://jsfiddle.net/c29t7/

Answer №2

http://example.com/jsfiddle-template-123

Sample HTML Structure:

<section id="container">
    <article id="left">
        [ content goes here...]
        <br />
        <br />
        <br />
        <br />
        [ more content goes here...]
        <div id="right">
            [ content goes here...]
            <div id="inner">
               [ templates go here... ]
                <br />
                <br />
                <br />                    
                <br />
                <br />
                <br />
                [ more templates go here...]
            </div>
        </div>
    </article>
</section>

CSS Styling:

#container {
    position:relative;
}
#left {
    float:left;
    position:relative;
    width:100%;
}
#right {
    height:100%;
    position:absolute;
    right:0px;
    top:0px;
    width:75%; /*adjust as needed*/

    background:#00ff00;
}
#inner {
    float:right;
    height:100%;
    overflow:auto;
    width:75%; /*adjust as needed*/
}

Note: To achieve the desired layout, make sure to nest #right inside #left.

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

What is the correct way to display or hide a button based on my specific situation?

Creating a 'show more' button for my app has presented me with a challenge. I am using a directive to handle actions when the user clicks on the read more button: (function(window, angular) { var app = angular.module('myApp'); ...

javascripthtmlangularjs

Controlling Formatting in ASP.NET

Feeling puzzled by a seemingly simple question with no clear solution in sight. We're attempting to transition an interface to an ASP.NET control that currently appears like this: <link rel=""stylesheet"" type=""text/css"" href=""/Layout/CaptchaLa ...

asp.netjavascriptcsscontrolsformatting

Dragging an image in KineticJS gets stuck after the drag operation is completed

My experience with KineticJS has been positive so far, but I have encountered an issue with dragging images. In the example below, I have set the image to be draggable, but after the initial drag, it seems like the image can't be moved again. var sta ...

javascripthtmlcanvashtml5-canvaskineticjs

How to convert a Django template table to an Excel file (.xlsx)

Exploring the world of Django templates for the first time and in need of exporting data. Seeking guidance on how to export a table from a Django template to a .xlsx file. Is there a specific method for achieving this task? Here is a snippet from my views. ...

pythonhtmldjangodjango-templates

How can I adjust the size of an element without causing the other elements to move around on the

Currently, I am working on a live web page. You can view it at the following address: The issue I am facing is with the element just before the body's closing tag, the div "games_grid." When hovering over the game capsule image, it expands, causing t ...

htmlcss

Tips for arranging accordion buttons side by side so they all expand into a single element

I'm currently working on a unique accordion design where multiple buttons expand into individual areas below when clicked. The standard accordion layout isn't quite what I'm aiming for. I envision the buttons all in a row, and when clicked, ...

javascriptcssaccordion

How to incorporate Django syntax into CSS styling

Imagine a scenario where a Django site is equipped with numerous stylesheets. CSS and JS files are located in the static/ directory within an app's folder or in the global site directory. Various color themes are employed across different pages, neces ...

pythondjangocss

Tips for aligning ticks to the left on a d3 bar chart

i recently finished creating a stacked bar graph with varying tick lengths on the y-axis side. my goal is to align the text within the ticks to the left, similar to this example: http://jsfiddle.net/2khbceut/2/ here is the HTML: <title>Diverging Sta ...

javascripthtmlcssd3.js

Retrieve the source code of an HTML element

When you run this code, you will see the output as [object HTMLUListElement]: ul = document.createElement('ul'); $('textarea').val(ul) Is it possible to get the output as <ul></ul> directly? The following solution wo ...

javascriptjqueryhtml

Dynamic motion of balloons using jquery technology

I am trying to make an image move smoothly inside a div using jQuery and CSS. I have tried rotation and animation, but nothing has worked the way I need it to. <div class="baloon" style="position:fixed;left:0px;top:160px;"> <img id="rot" class="r ...

jqueryhtmlcss

Placing text over an image appears to be causing the navigation links to vanish - could it be a conflict with floating elements?

As a beginner, I'm facing a rather embarrassing situation here. Picture me banging my head on the table level of embarrassment... but let's give it a shot anyways. I've got a navigation bar and an image underneath (not behind). Both seem to ...

htmlcss

Cannot load the next page using jQuery ajax

I am working on a project with an index.html file that includes a nav menu, header, footer, and a div.content where jQuery is used to parse the html of page1.html. Initially, page1.html loads perfectly. However, I encountered an issue when trying to imple ...

javascriptjqueryhtmlajax

Ways to reduce the size of a Select box when the option text is too lengthy

How can I reduce the size of the select box by splitting the lines of the options I attempted to modify the CSS with: select { width:100px; } However, only the select element was affected. The options remained the same size. My goal is to have ...

htmlcss

How do you create space between a label and a textbox within separate <td> elements in a single row in a C# web application?

I need help formatting a label and textbox in a table row. I want to have the label right-aligned and the textbox left-aligned with a two-digit space between them. My current code is as follows: <table> <tr> <td align="right" class="s ...

c#asp.nethtmlalignment

Incompatibility Issues Between CSS and WordPress Custom Menu Functionality

I'm having trouble getting a custom menu to work in my Wordpress theme. Although I've enabled the feature and added the menu to my layout successfully, the CSS styling for the menu doesn't seem to be applying. I initially had a custom CSS f ...

csswordpress

Is there a way to determine if a property can be animated using CSS3 transitions?

Inconsistencies in the list of properties that can be animated with a CSS3 transition exist among browsers and are subject to change with new browser versions. For instance, -moz-transform is not animatable with -moz-transition in FF3.6 but it is in FF4. ...

javascriptanimationcsstransformtransition

Allowing BeautifulSoup to bypass a portion of my html code or divide it

<!DOCTYPE html> <html class="client-nojs" dir="ltr" lang="en"> <body> <h2><span class="mw-headline" id="Danish">Danish</span></h2> <h3><span class="mw-headline" id="Noun">Noun</span><span clas ...

pythonhtmlbeautifulsoup

The data from the dropdown menu is not being successfully saved in the database, specifically the values pertaining to the department are not being

<!DOCTYPE html> <html> <head> <title>User Registration System</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="header&quo ...

phphtmldatabaseinsertdropdown

What is the best way to show a second button once the first button has been clicked?

Is there a way to show a second button only after the first one is clicked? I'm looking for a way to have a user click on a button, which then reveals another button. When this second button is clicked, the user should be taken back to the original b ...

javascripthtml

How to Prompt CSS Rule Evaluation to Ensure Proper Functionality (Solution)

When encountering the issue of browsers, specifically Internet Explorer in my case, failing to correctly implement complex CSS rules, is there a way to force the evaluation? For example: body[data-some-flag="3"] #someElement .someClass svg stop:first-chi ...

css