Styling div elements within other div elements using CSS

I am currently working on creating a layout with three divs, each containing an image. The challenge is to set the height of the first div (top) to 10% of the screen size, the second (middle) to 60%, and the third (bottom) to 30%. I want these divs to maintain their full size without resizing.

Here is my current code:

#right
{
    display: block;          
    float: left;
    margin-left: 81%;            
    width: 19%;
    height: 100%;
}

.logo
{
    top-margin: 0%;
    height: 10%;
    width: 100%;
}
.MiddleRight
{
    top-margin: 10%;
    width: 100%;
    max-height: 60%;
    height: 100%;
}
.footer
{
    top-margin: 80%;
    height: 30%;
    width: 100%;
}
img
{
    position: absolute;
}

(#right is the main container where logo represents the first div, MiddleRight the second, and footer the third. I will rename them later but for now, I just want it to work).

And here is the HTML snippet:

<div id="right">
    <div class="logo">
        <img src="logo.png" style="max-width: 100%; max-height: 100%; position: relative;"</img>
    </div>
    <div class="MiddleRight">
        <img src="middle.PNG" style="max-width: 100%; max-height: 100%; position: relative;"</img>
    </div>
    <div class="footer">
        <img src="footer.png" style="max-width: 100%; max-height: 100%; position: relative;"</img>
    </div>
</div>

I am still new to HTML/CSS and struggling to figure out what's causing the issue. Can someone assist me?

EDIT [Issue Resolved]: Here's a solution that worked: CSS :

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
}
#right {
    display: block;          
    float: left;
    margin-left: 81%;            
    width: 19%;
    height: 100%;
}
.logo {
    height: 10%;
    background: red;
}
.MiddleRight {
    height: 60%;
    background: blue;
}  
.footer {
    height: 30%;
    background: green;
}
#right img {
    max-width: 100%;
    max-height: 100%;
    position: relative;
}

HTML :

<div id="right">
    <div class="logo">
        <img src="logo.png" style="width: 100%; height: 100%;">
    </div>
    <div class="MiddleRight">
        <img src="middle.PNG" style="width: 100%; height: 100%;">
    </div>
    <div class="footer">
        <img src="footer.png" style="width: 100%; height: 100%;">
    </div>
</div>
htmlcss

Answer №1

Check out this solution that I have for you.

In this case, you can omit the margin top and width properties since they will default to 100% width and stack on top of each other.

To ensure that the floated div has a height of 100%, it is important to set the body's height as well, which I have included in the code snippet below:

html, body {
  margin: 0;
  height: 100%;
}
#droite {
    display:block;          
    float:left;
    margin-left:81%;            
    width:19%;
    height:100%;
}
.logo {
    height: 10%;
  background: red;
}
.DroiteMilieu {
    height: 60%;
  background: blue;
}
.basDePage {
    height: 30%;
  background: green;
}
#droite img {
  max-width: 100%;
  max-height: 100%;
  position: relative;
}
<div id="droite">
  <div class="logo">
    <img src="logo.png">
  </div>
  <div class="DroiteMilieu">
    <img src="droite.PNG">
  </div>
  <div class="basDePage">
    <img src="minimap.png">
  </div>
</div>

Answer №2

You have a couple of errors to correct in your code. First off, top-margin is not a valid property. You should be using margin-top instead.

Additionally, by including height: 100%;, you are instructing your div to occupy 100% of its parent's space (does this mean it takes up 100% of the screen height?).

To address your issue, if your project only needs to support CSS3, I would recommend utilizing the property known as vh or viewport height.

Check out this helpful tutorial for more information:

You can implement it like so:

.droite{
    height: 10vh; /* This sets the height to 10% of the viewport height */
}

In simpler terms, 1vh equals 1% of the viewport height.

Answer №3

By applying a height of 100% to .DroiteMilieu which inherits from droite, you are potentially pushing other elements out of place.

Try removing the max-height: 60% on .DroiteMilieu and instead set the height to 60% to see how it affects the layout.

It's important to note that top-margin is not a valid CSS attribute.

.DroiteMilieu
{
    top-margin:10%; <---- incorrect CSS syntax
    width:100%;        
    height: 60%; <----
}

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

Using jQuery to Toggle Visibility of Table Rows

I'm facing a challenge in creating a basic table layout where all the table rows are initially hidden when the document loads. The goal is to display specific rows when a corresponding button is clicked, but my current implementation doesn't seem ...

jqueryhtml

Animating multiple elements in Angular 2 using a single function

Currently, I am delving into Angular and faced a challenge while attempting to create a toggle categories menu. Within my navbar component, I have an animation trigger set up as follows: trigger('slideCategory', [ state('opened&apo ...

htmlangulartypescriptevent-handlingfrontend

Textarea with integrated checkbox

Can checkboxes be incorporated within a textarea using basic HTML and CSS? I'm aware that this can be achieved with tables, but I'm curious if it's possible within a textarea itself. ...

htmlcss

What is the method to adjust the opacity of a background in CSS without affecting the entire container?

Although it seems simple, I am trying to design a website background with a container that has semi-transparent properties. When I include opacity: 0.5; within the #content code, the entire container, along with its content and text, becomes transparent. ...

css

Troubleshooting Challenges in JavaScript/jQuery Hangman Game

Having trouble with my hangman game's game loop. Attempting to replace correct letters as the game runs through the word, but it's currently: looping through the word checking if the guessed letter is in the word returns index[0] Tried splitti ...

javascriptjqueryhtmlloops

dealing with a situation where the call to the getElementsByTagname method returns null

Here is a snippet of JavaScript code that I am working with: <script language="JavaScript" type="text/javascript"> var sendReq = getXmlHttpRequestObject(); var receiveReq = getXmlHttpRequestObject(); var lastMessage = 0; var mTimer; ...

htmlxmlajax

Vertical Orientation in HTML

Would appreciate some assistance on creating a vertical text with HTML similar to the example in the linked screenshot. It needs to be straightforward and vertically oriented. Check out the screenshot for reference ...

javascripthtmlcssvertical-text

Generating dynamic links in HTML

I've been stuck on this problem for a while now. What I'm trying to do is create a Django website that pulls in Twitch livestreams and displays them on different pages. It's a project I'm working on to learn how to use APIs in web appli ...

htmldjangoobject

Screen rendering can be a challenging task

As I dive into learning how to use THREE.js for creating browser games, I've encountered a roadblock. Every time I attempt to import a model using the code, the screen just renders black. Surprisingly, I've been smoothly coding and running it in ...

javascripthtmlthree.js

Steps for making a toggle button with Bootstrap

Initially, I developed a web application using HTML, CSS, and JavaScript. Later on, I was requested to recreate it using Bootstrap as well. While I managed to complete the task successfully, I encountered an issue where toggle buttons in the web app revert ...

javascriptjquerycsstwitter-bootstrapjqtouch

Guide to displaying highcharts using external json data for numerous series

Having an issue with using angularjs and highcharts with multiple series where the data is coming from an external JSON file. When trying to access the data with a for loop using data.data[i].data, it's not working properly. Can anyone offer assistanc ...

jqueryhtmlangularjsajaxhighcharts

Add a circular transition effect to Font Awesome icons

Check out my code snippet on JSFIDDLE: https://jsfiddle.net/8f3vLh0a/14/ I am using font awesome icons and I would like to add a circling effect on hover similar to this demo: http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/ How can I implement t ...

htmlcss

Accordion-style elements arranged in a grid format, smoothly displacing surrounding content

I am facing an issue with a grid of accordions, as demonstrated in the codesandbox linked below. The problem arises when I open one accordion, causing all the accordions in the row below to shift down. Ideally, only the accordion directly below should be p ...

cssflexboxmaterial-uigridaccordion

Is there a way to incorporate cell highlighting on IE?

I've implemented a method to highlight selected cells based on the suggestion from jointjs. It surrounds the cell with a 2-pixel red border, which works well in Chrome. However, I need the outline to work in IE as well. Unfortunately, when I reviewed ...

javascripthtmlsvgjointjs

The font-family CSS properties inheritance is not functioning as I had anticipated

I'm currently working on a webpage where I want to add a list of links that resemble tabs. While this style is functioning correctly for the main pages, I'm having trouble implementing it for a new section. The existing list is located within: ...

fontscss

Maintain the default material-ui class styles while making customizations to override others

Currently, I am working on customizing the material-ui tooltip and specifically need to adjust the margin for the tooltipPlacementTop class: const useStyles = makeStyles(theme => ({ tooltipPlacementTop: { margin: '4px 0' ...

cssreactjsmaterial-uioverriding

Customizing label printing using HTML and CSS. Learn how to dynamically adjust label and container sizes based on label dimensions

After spending some time developing the code for a label size of 5cm by 2.2cm, I have successfully printed it without any issues. Now, my goal is to create a flexible solution that automatically adjusts font sizes and containers for various label sizes. T ...

htmlcssprintinglabelautosizing

Switching the background image with a single click and reverting it back with a double click using jquery

I am working on a project with multiple div elements which need their background images to change upon clicking and revert back to the original image when clicked again. Below is the CSS code for one of the divs, including its Class and ID: .tab_box { wid ...

jquerycssimageonclicktoggle

Modifying dynamic input fields based on the selected input field type

Seeking advice on a challenge I'm facing while testing a website. My task is to mask input fields in screenshots after executing tests because we share data with other teams. I've tried using JS before the script by changing the input type to &ap ...

javascripthtmlseleniumselenium-webdriver

After upgrading from Windows 7 to Windows 10, I noticed that the CSS, HTML, and Bootstrap elements seemed to have lost their impact

<!DOCTYPE html> <html> <head> <title>Registration</title> <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="bootstrap.css"> <link href ...

htmlcss