two adjacent DIV elements with matching heights

Currently, I am in the process of developing an internal web page with a wrapper DIV structure based on recommendations from an online tutorial. Within this wrapper, there are different sections including a header, mainnav, content, sidenav, and footer. The content and sidenav are positioned as side by side DIVs, with the sidebar featuring a menu that is subject to change. My current challenge lies in trying to ensure that the content DIV matches the height of the sidenav.

Below is the CSS for these two DIVs:

#content {
    width: 75%;
    float: left;
    padding-top: 5px;
    height: 100%;
}
#sidenav {
    width: 25%;
    float: right;
}

In addition, here is the CSS code for the overall wrapper:

#wrapper {
    background-color: #FFFFFF;
    width: 100%;
    min-width: 740px;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    -webkit-box-shadow: 0px 1px 20px #999999;
    box-shadow: 0px 1px 20px #999999;
}
htmlcss

Answer №1

Assign the following attribute to both elements:

height:100%;

If you specify a height for the wrapper div, they will occupy the entire height. It is recommended to include an additional div after them and apply the styling below to prevent overflow:

width: 100%;
clear: both;

Answer №2

When using a height of 100%, it may not work if there is no parent element with a defined height. If you need elements to have the same height, consider adding a background color to the wrapper and adjusting styles as needed. For tackling challenges like this in the future, exploring frameworks like Bootstrap can be helpful.

Check out this example on JSFiddle

.column {
    float: left;
    width: 33%;
}
.menu {
    background:red;
}
.content {
    background:blue;
}
.clear {
    clear: both;
    width: 100%;
}

The provided Fiddle demonstrates the use of clear, but note that the columns do not necessarily have the same height.

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

Viewing content on a mobile device and using the scrolltop

I am working on a website that needs to be mobile-friendly. With the release of iOS 7, I wanted to achieve a depth and blurry effect. I used an iframe with a CSS3 filter applied to it and made it scroll along with the page using jQuery. Everything looks go ...

jqueryioscssscrollviewport

Flashing Effect of Angular Ui-Bootstrap Collapse During Page Initialization

Below is the code snippet I've implemented to use the ui-bootstrap collapse directive in my Angular application. HTML: <div ng-controller="frequencyCtrl" style="margin-top:10px"> <button class="btn btn-default" ng-click="isCollapsed = ...

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap

Experiencing a problem with Datatables where all columns are being grouped together in a single row

After creating a table with one row using colspan and adding my data to the next row, I encountered an issue with the datatables library. An error message appeared in the console: Uncaught TypeError: Cannot set property '_DT_CellIndex' of unde ...

javascriptjqueryhtmldatatables

Access an HTML file in Text Edit on a Mac directly from a web browser

Is there a way to utilize Javascript or another appropriate script to open an HTML file in Text Edit on my Mac? I have created a local web page using Text Edit that has different tabs linking to other Text Edit files within the page. I am looking for a m ...

javascripthtmlmacosedittextedit

Nested Property Binding in CallByName

I am looking to utilize CallByName in VBA to extract specific data from various webpages with differing html structures. In my scenario, I need to reference multiple parent nodes to access an element with or tags. Here is an example of the code: The eleme ...

htmlvbacallbyname

Display my additional HTML content on the current page

Is it possible for my addon to open a predefined html page in the current window when it is started? And if so, how can this be achieved? Currently, I am able to open my addon page in a new window using the following command: bridge.boot = function() { ...

javascriptjqueryhtmlfirefoxfirefox-addon

Transforming the add to cart button into a view button within the product listings: an easy guide

I am currently developing a unique ecommerce website called bookslab.in. To enhance the user experience, I would like to replace the "add to cart" button with a "view details" button when users view the list of available products. Furthermore, when users c ...

phphtmlmagentobuttone-commerce

Achieve an overlapping effect between absolutely positioned sibling divs without the need to specify a background color

Exploring the development of a swipe-to-action list component. <div class="list-container"> <div class="row"> <div class="content"> Sample Content 1 </div> <div class="action"> ...

cssangulardomcss-position

Which CSS properties can I implement to ensure that the text remains legible regardless of the background behind it?

Looking ahead, I am displaying an issue where the colors are almost perfect, but when different percentages are applied, some or all of the text becomes obscured. My goal is to assign the font color based on the background difference. I vaguely remember s ...

css

How to send variables to a function when a value changes in TypeScript and Angular

As someone who is new to Angular and HTML, I am seeking assistance with the following code snippet: <mat-form-field> <mat-select (valueChange)="changeStatus(list.name, card.name)"> <mat-option *ngFor="let i of lists"> {{i.name}} ...

htmlangulartypescript

Tips for adding a space before the footer in a document

Implementing a Top Navigation Bar with grey spacing Avoid having any extra space just before the footer: Organizing my Layout File ("navigation_top" refers to the black navigation bar at the top) %body = render "navigation_top" .main-content .cont ...

cssruby-on-railshaml

Assess how my website is displayed to an algorithm

A website can be accessed not just by a user through a browser, but also by programs, bots, and crawlers. I have a website hosted on Google App Engine with Python that features non-static HTML pages generated by a Python program by manipulating strings. Th ...

pythonhtmlgoogle-app-enginebrowsersearch-engine

Consolidate radio group in Vuetify platform

I'm having trouble centering the v-radio-group. Here's my current setup: <v-container grid-list-md text-xs-center> <v-form ref="form"> <div v-if="question.question_type == 'YESNO' "> <v-radio-group ...

javascriptcssvue.jsvuejs2vuetify.js

Why isn't the right-clear property functioning correctly?

My understanding of `clear: left`, `clear: right`, and `clear: both` in CSS has always been a bit fuzzy. I know that `clear: both` means it prevents floating elements from appearing on both sides, but I recently did some testing here. I expected the layout ...

csscss-float

CSS code for targeting specific screen sizes in the Bootstrap grid system

I'm not an expert in styling, but I often use Bootstrap for small projects. Currently, my main challenge lies within the grid system. With one monitor at a 1920x1080 resolution and another at 1366x768, I find myself wanting to adjust the grid system b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Hide the parent div element if the nested unordered list does not contain any items

I transformed an HTML template into a typo3 template using automaketemplate. Within the HTML code, there is a structure of divs like this <div class="bigPostItWrap">1 <div class="postit">2 <div class="p ...

templateshtmltypo3typoscript

Using percentages for sizing and margins in CSS

Looking to create a visually appealing page that always fills the entire screen? Check out this code snippet that does just that: #posts{ width:100%; height:auto; background:#666; } .entry{ float:left; margin-left: 4%; margin-top:10 ...

javascriptjquerycss

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

Check out this informative article here I'm looking for a way to gather the values from all the text boxes and store them in an array within my JavaScript form. I attempted to enclose it in a form, but I'm struggling to retrieve the HTML ID beca ...

javascriptjqueryhtmlcssnode.js

Tips on concealing the overflow content within a Material UI table cell, rather than allowing it to wrap around

I have been trying to use the material UI Table component in order to display a table. The issue I am facing is that when the content in a cell exceeds the allotted space, instead of showing ellipses (...), the text wraps within the cell. I attempted to ap ...

cssreactjsmaterial-ui

Embedding PHP script within HTML code can enhance website functionality and

I am completely new to PHP and have never worked with it before. I'm interested in running a PHP script from within an HTML file on a Linux system. Can anyone guide me through the process? Below is the code from my HTML file: <!DOCTYPE HTML PUBLI ...

phphtmllinux