I did not anticipate % height working this way

I'm currently working on building a responsive div that contains a section and an aside. The parent div should take up 25% of the height. I want the child divs to occupy 80% of the parent container. However, I'm running into issues with the child divs not taking up the correct height when using percentage values. Strangely, everything works fine when I switch to pixel values. Can anyone point out where I might have made a mistake? Below is the HTML code snippet:

<div class="container">

  <section>
    This is where the section content goes
  </section>
  <aside>
    This is the aside content

  </aside>

</div>


And here is the corresponding CSS:

.container{
  width: 100%;
  background: red;
  height: 25%;
}

.container::before,
.container::after{
  content: "";
  display: table;
}

.container::after{
  clear: both;
}

section{
  float: left;
  width: 40%;
  height: 100%;
  display: block;
}

aside{
  float: right;
  width: 40%;
  height: 80%;
}

section, aside{
  background: green;
  border-radius: 6px;
  margin: 5%;
}

If you'd like to see the code in action, here is a link to my fiddle: https://jsfiddle.net/gvpmahesh/Lhpv0k2x/3/

Answer №1

To ensure proper layout, don't forget to set the height for the body and html tags.

Check out this demo for reference: https://jsfiddle.net/Lhpv0k2x/5/

body,html { height: 100%; }

UPDATE

If you must use floats, consider making these adjustments:

Here is the updated demo: https://jsfiddle.net/Lhpv0k2x/9/

The changes made include:

  • .container now has vertical padding of 5% to eliminate vertical margins
  • section, aside now have a 5% horizontal margin

With these tweaks, your layout should be good to go!

Answer №2

In order to make use of percentage height, it is essential to add

position: relative; height: 100%;
to the parent elements such as html and body.

Additionally, applying position: relative; to the elements where you intend to utilize % height is crucial.

Here is the Fiddle link for reference: https://jsfiddle.net/vdy82azk/

UPDATE: It has been highlighted that position: relative; may not be required on every element. (refer to somethinghere's comment)

Answer №3

To achieve the desired layout, you should include the following CSS styling:

 html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;

            }
.container{
  width: 100%;
  background: red;
  height: 25%;
}

.container::before,
.container::after{
  content: "";
  display: table;

}

.container::after{
  clear: both;
}

section{
  float: left;
  width: 40%;
  height: 80%;
  display: block;
}

aside{
  float: right;
  width: 40%;
  height: 80%;
}

section, aside{
  background: green;
  border-radius: 6px;
  margin:5%;
}

Here is the link for your reference:

 https://jsfiddle.net/1utwx2fp/

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 a Razor view using inline CSS and responsive media queries

I need to add some simple inline styling for print purposes to an .cshtml page I'm working on. I initially tried using the @media print media query, but it is causing issues with my cshtml page. Is there a workaround for this problem? The culprit see ...

Steps for showcasing stars (1-5) based on the data stored in the database

I recently completed a project where I created a user achievement page that displays their progress. Within the page, there is a table containing the user's level. The table structure looks like this: Users( id, username, password, sum_score, level) ...

Upon opening index.html in the browser, the jQuery code fails to execute, as no errors are displayed in the console

I am struggling to make a simple toggleClass() function work in jQuery and I can't seem to figure out why. This is just a beginner exercise for me with jQuery. The code works perfectly when I test it as a snippet or manually in the console, but when I ...

Browsing with PHP/HTML on Safari from Mac Os 10.6.5 seems to run at a sluggish pace

This is the program: <?php require_once 'swift-mailer/lib/swift_required.php'; $name = $_POST['name']; $email = $_POST['email']; $form_subject = $_POST['form_subject']; $form_message = $_POST['form_message ...

Determining outcomes of forms added in real-time

Need assistance with dynamically creating tickets, calculating prices, and displaying results when additional tickets are added. Currently facing an issue where price data is not being calculated when a new ticket is added. Any help would be greatly apprec ...

An error occurred while using Phonegap's FileTransfer() method - it seems that the File

After exploring various resources and finding no solutions, I have turned to this platform for help. I am attempting to initiate a .pdf download upon clicking on the following link: <a onclick="BeginDownload()" class="link" href="#">My guides</a ...

Incorporating shadow effects along the right border of alternating table cells: a step-by-step guide

How can I set a proper shadow border for alternating td elements in a table? I've been experimenting with the code below. While the shadow effects work, they are getting cut off at each td junction. Can anyone provide assistance? Here is my table: ...

Identifying mobile device model

I'm currently working on a web application focused on image manipulation, including cropping and applying effects like sepia. Is there a library available that can help me detect, whether on the front or back end, the type of device a user is using ( ...

What are some creative ways to design the selected tab?

In my Vue parent component, I have multiple child components. There are several elements that toggle between components by updating the current data. The issue is that I am unsure how to indicate which tab is currently active. I've tried various li ...

Arrow indicating the correct direction to expand or collapse all items with a single click

I have successfully implemented the "expand/collapse all" function, but I am facing an issue with the arrow direction. The arrows are not pointing in the correct direction as desired. Since I am unsure how to fix this problem, I have left it empty in my co ...

Combining two forms into one PHP page, but intending to submit only a single form

I'm facing an issue on my page where I have both a sign-in and a sign-up form. Whenever I click on either the sign-in or sign-up button, it always ends up submitting the sign-up form. What am I doing wrong? Here's the PHP code snippet: if($_SE ...

Aligning an image in a way that adjusts to different screen sizes

Struggling with centering an image horizontally in a responsive manner while using Bootstrap v3.3.5? Here's my code: <div class="container"> <div style="margin:0 auto;"> <img src="images/logo.png" alt="logo" /> ...

The transparent image is causing the menu item to be hidden underneath it because of z-index complications

Could you please review this jsfillde? <nav role="navigation" class="nav-main"> <ul class="nav nav-pills" id="menu-primary-navigation"> <li class="active menu-home"><a href="/">Home</a></li> <li ...

Display full lines of nested tree view HTML lists upon hovering using HTML, CSS, Angular, and Bootstrap

I currently have an Angular 4 application where a left-side div displays a tree of items as recursive HTML lists. The issue I am facing is that long texts within this div get cut off by the right border, with a scrollbar appearing instead. What I would lik ...

The checkbox is not being triggered when an <a> tag is placed within a <label>

I have a unique case where I need to incorporate <a> within a <label> tag. This is due to the fact that various CSS styles in our current system are specifically designed for <a> elements. The <a> tag serves a purpose of styling and ...

jquery function context

I'm having trouble grasping function scope in this scenario. When a button is clicked, it triggers a dialog box with a textarea inside displaying a URL that can be copied for camera setup. <button id="axis-details" onclick="apikey('<?php e ...

Angular not updating the values in real time

First and foremost, I am utilizing socket.io to emit data. Data is emitted upon connection (so the website does not appear blank) as well as when certain events occur. Upon initial connection or page refresh, everything updates and functions smoothly. Howe ...

Having trouble displaying database model information in the template

My challenge is displaying information from the Django third model (class Jenkinsjobsinformation) in the template. I've been successful in showcasing data from the first and second models (Projectname and Jenkinsjobsname). See below for a snippet of m ...

The thumbnail of the embedded YouTube video appears pixelated and unclear

I've integrated the most recent video from a YouTube channel onto my website. However, the thumbnail of the video is appearing very blurry/low quality. Is there a way to ensure a high-quality thumbnail is displayed? You can see a live demonstration h ...

How to use Nokogiri to efficiently extract targeted nodes from HTML

In my Ruby script, I am trying to extract specific values from an HTML document using the Nokogiri gem. The HTML content I'm parsing includes information about a user and their registered device. #!/usr/bin/ruby require 'Nokogiri' doc = No ...