Creating a webpage with a layout that features three full-length columns using

body {
  background-color: blueviolet;
}

.leftcolumn {
  width: 30%;
  height: 100%;
  float: left;
  background-color: brown;
}

.middlecolumn {
  float: left;
  background-color: yellowgreen;
  width: 60%;
  height: 100%;
}
<body>
  <div class="leftcolumn">
    <div>
        test1
    </div>
  </div>
  <div class="middlecolumn">
      test2
  </div>
</body>

I am struggling to create a layout with three adjacent columns, each taking up the entire height of the screen.

The issue seems to be related to using 'float: left;' property. I'm uncertain about the alternative approach that could solve this problem.

htmlcss

Answer №1

When both the left and middle columns are set as div, their default display will be block. To have them appear inline within the same row, you must override this with display: inline-block.

In addition to this adjustment, the columns are currently taking up 100% of the height. To address this, setting the body's height to 100vh ensures they function as expected.

body {
  background-color: blueviolet;
  height: 100vh;
}
.leftcolumn, .middlecolumn {
  height: 100%;
  display: inline-block;
}
.leftcolumn {
  width: 30%;
  background-color: brown;
}

.middlecolumn {
  background-color: yellowgreen;
  width: 60%;
}
<body>
  <div class="leftcolumn">
    <div>
        test1
    </div>
  </div>
  <div class="middlecolumn">
      test2
  </div>
</body>

Answer №2

The reason for the columns not reaching full height is due to the height: 100% property applied to them.

This causes the columns to inherit the full height of their parent element, which in this case is the body. To rectify this issue, you can add a specific height value to the body element like this:

body {
  background-color: cornflowerblue;
  height: 100vh;
  margin: 0;
}

Adding margin: 0 prevents page overflow.

Answer №3

The reason for this is that you need to include height in the html and body elements. Could you kindly implement this code in your CSS? It should resolve the issue.

body,html{height:100%};

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

Learning the process of extracting Fast Fourier Transform (FFT) data from an audio tag within

I am struggling to retrieve the FFT data from an <audio> tag without any syntax errors. After reviewing the Web Audio API documentation, I have written a sample code snippet as follows: <audio id="aud" controls="controls" src="test.mp3"></a ...

htmlaudiofft

Tips for achieving full width design within a container

Hello everyone, I require some assistance. I am attempting to create a full-width navigation while being constrained by a wrapper div with a fixed width of 900. I am unsure of how to achieve this without creating an additional div like the header. I am see ...

htmlcssheaderwidthfooter

Leveraging JavaScript to generate a downloadable PDF document from the existing webpage

My goal is to have the user click a button labeled 'View PDF' or 'Download PDF' on the current webpage. This button would then execute JavaScript code to generate a PDF based on how the current page appears. I attempted using jspdf for ...

javascripthtmldom

Remove 'File' option from the Menu in Tiny MCE

Is there a way to selectively remove the "File" option from the Menu Bar without specifying each individual menu item? https://i.sstatic.net/SFgvi.png I attempted the following method: menu: { edit: {title: 'Edit', items: 'undo redo | cut ...

jquerycsstinymcerich-text-editor

Looking for a way to create a scrollable section in a designated spot?

I've been struggling with this issue for a few days and finally decided to seek some assistance. My goal is to have a scrollable box at a specific location on my website containing an image. Below is the code I currently have: <html> < ...

jqueryhtmlscrollablebox

Excessive spacing issues arise while adjusting CSS height, leading to undesirable vertical scrolling

One of the features of my website is a post section where users can leave comments. These comments are displayed at the bottom of the post. To enhance user experience, I decided to create a modal for posts using HTML and CSS as shown below. However, I enc ...

jqueryhtmlcss

Adjust the size of a textarea once text is removed

When you type text, a textarea expands in size. But what if you want it to dynamically decrease its height when deleting text? $('textarea').on('input', function() { var scrollHeight = parseInt($(this).prop('scrollHeight&apos ...

javascripthtmlcss

displaying a pair of distinct elements using React techniques

I need help adding a react sticky header to my stepper component. When I try to render both components together, I encounter an error. To troubleshoot, I decided to render them separately. Surprisingly, when rendering separately, I do not get the "store is ...

javascripthtmlreactjsreduxmaterial-ui

The origin of the distribution file diverges from the source path of the development

Currently, I have implemented a task runner with Gulp to export all my folders into a distribution folder. However, an issue arises when exporting images to the distribution folder as the path name differs from what is specified in my source files. For ins ...

htmlimagenpmgulp

How to Generate HTML Reports Using JBoss?

Is there a convenient and efficient way to generate .html reports for JBoss applications that is not time-consuming? I have a database containing entities that I need to display in multiple tables. The report should include links to navigate between secti ...

javahtmljbossreport

Ways to verify when leaving the webpage

After spending an excessive amount of time searching for this information, I finally figured it out. So here you have it, I'm sharing the steps to create a custom "ARE YOU SURE YOU WANT TO LEAVE THIS PAGE?" dialog. ...

javascripthtmldomonbeforeunload

What is the best way to maintain the same height for a textarea and input fields?

What is the best way to align the message input field with the name and phone input fields? I need the height of the message input field to match the combined height of the three inputs on the left. It's crucial that the borders line up perfectly. I ...

htmlcsstwitter-bootstrap

Is it possible to reset the value of a current request attribute?

I designed a homepage that consists of a header, a sidebar, and a div tag. When a user clicks on the "register" button, Registration.jsp is loaded into the div tag. After successfully submitting the registration form, I want to redirect it back to the sa ...

jqueryhtmljsprequest

Interactive HTML button capable of triggering dual functionalities

I am working on a project where I need to create a button using HTML that can take user input from a status box and display it on another page. I have successfully implemented the functionality to navigate to another page after clicking the button, but I ...

javascripthtmlbuttonactiondisplay

Automatically Scrolling Div According to its Content

Struggling to figure out how to make a parent div automatically scroll based on its child's content. I have a menu that expands when clicked and needs to scroll if the height of the child exceeds that of the parent. This is the HTML for the menu wra ...

htmlcssscrolloverflow

Adjusting column styles on mobile or desktop devices

My row has two columns <div class="row"> <div class="col-9"> hello </div> <div class="col-3"> world </div> </div> But I want to change the column classes for small screens, so they would be ...

htmlcsstwitter-bootstrapbootstrap-5

Submitting information to an HTML page for processing with a JavaScript function

I am currently working on an HTML page that includes a method operating at set intervals. window.setInterval(updateMake, 2000); function updateMake() { console.log(a); console.log(b); } The variables a and b are global variables on the HTML page. ...

javascriptjqueryhtml

Creating a CSS background that adjusts to fit any screen resolution

Hey there, I'm a beginner to all of this. I want my background image to adjust to fit any web browser resolution, regardless of the size. So far, I've come across this nifty little trick: html { background: url(images/bg.jpg) no-repeat center ...

cssbrowserbackgroundresolutionadjustment

Unable to fetch css file in Node.js

I am currently in the process of learning Node.js, but I have encountered a small issue with retrieving data from a css file. Interestingly, when I directly add the data to the index file's code, it seems to work perfectly. Let me share the relevant ...

javascripthtmlcssnode.js

Collecting, gathering content repeatedly

Hey there, just checking in. I'm currently working on extracting information related to CEO Pay Ratio and compiling links to this section for processing by a function. My goal is for the function to capture content starting from a specified tag and en ...

pythonhtmlweb-scrapingbeautifulsoup