issue with arranging content in a two-column layout with headers

Question

issue with arranging content in a two-column layout with headers

Currently working on my first website and running into some CSS issues. I'm aiming for a two-column + header layout that fills the entire screen space of the website.

I have the following specifications in mind:

Header takes up 20% of the screen height
Left column at 20% width of the screen & 80% height of the screen (the remaining free space)
Right column at 80% width of the screen & 80% height of the screen (the remaining free space)

I also want to make sure that the divs do not overlap each other. Not entirely sure if this is achievable using % for width and height, but I'm hopeful :). Would greatly appreciate any help with this. Thank you in advance!

html css

Answer 1

Answer №1

Utilizing a dynamic height for a header may not be the standard approach, but if this is your preference, you can implement it as follows:

<div id="header">
</div>
<div id="content">
   <div id="left">
   </div>
   <div id="right">
   </div>
</div>

Additionally, apply the accompanying CSS:

html, body {
   height:100%; /* crucial for certain browsers */
} 
#header {
   height:20%;
   width:100%;
} 
#content {
   height:80%;
   width:100%;
   float:left;
}
#left {
   width:20%;
   float:left;
}
#right {
   width:80%;
   float:left;
}

Answer 2

Utilizing a dynamic height for a header may not be the standard approach, but if this is your preference, you can implement it as follows:

<div id="header">
</div>
<div id="content">
   <div id="left">
   </div>
   <div id="right">
   </div>
</div>

Additionally, apply the accompanying CSS:

html, body {
   height:100%; /* crucial for certain browsers */
} 
#header {
   height:20%;
   width:100%;
} 
#content {
   height:80%;
   width:100%;
   float:left;
}
#left {
   width:20%;
   float:left;
}
#right {
   width:80%;
   float:left;
}

issue with arranging content in a two-column layout with headers

Answer №1

Similar questions

Creating a unique dimming effect for modals in a React application

Top tip for combating form misuse in Django applications

Booking form pop-up appearing beneath the section

What could be the reason for the image not displaying properly in a React application?

Top Choice for Customizable Location Bar Dragging

Inflexible lists refusing to wrap

Dynamically change the fill color of an SVG using styled-components

Why is the "text-overflow: ellipsis" property of a parent div not functioning properly for its child div?

Show the HTML page returned by the server on the client side

Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy

When using Angular with mdbootstrap, the mdb-tabs directive will move to the end if the ngIf condition is true

Utilizing React in conjunction with i18next and incorporating the HTML attribute lang

Colorful D3.js heatmap display

Determining the window height using jQuery when overflow is set to hidden

Show information from mysql in a dual-column format

There is a significant spacing issue between the header and main category when viewed on a mobile device

Enhancing page accessibility through the implementation of shortcuts

The Angular routing feature seems to be malfunctioning as the URL is showing up but the page fails to load

What could be the reason for my code experiencing issues with fetching data from the database using a prepared statement

What is the best way to grab the initial section of a website's text while using a WKWebView?