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

Avoid Conversion of HTML Entities in Table Cells

I cannot understand why I keep receiving <input type="email" value="required"> when all I want is <input type="email" value="" required>

implementing HtmlSpanner with an appended css stylesheet

The CSS infinite animation becomes erratic and sluggish after a short period of time

What causes CSS animations to suddenly halt?

Using a width of 100% with the display inline-block property does not function as intended

I desire to share the JSON information and receive the corresponding response data

Creating a responsive website that utilizes YAML and is optimized for extremely narrow screen widths

Dynamic user group system that leverages Ajax technology for seamless integration with an HTML interface, powered by PHP and

How can you easily center content vertically on a web page?

Is the ng-style not displaying the background image with the interpolated value?

Troubleshooting Issue with Angular Property Binding for Image Dimensions

The Bootstrap Tooltip seems to be glued in place

Guide on integrating jQuery for AJAX responses to gracefully transition into view within an MVC3 View

Retrieve data from the controller of the selected element on the subsequent page using AngularJS

Creating a Vertical Stack of Divs Using HTML and CSS

Is the navbar-nav being unexpectedly placed below the navbar-brand?

What is the correct way to incorporate scrollIntoView() using jQuery?

Is there a Unicode character substitution happening?

Can a universal Save File As button be created for all web browsers?