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

The mobile devices do not display minuscule text when rendering the React responsive UI

Recently, I decided to experiment with the responsive drawer feature of React Material UI. To try it out, you can access the online demo through the Code Sandbox link provided in the official documentation. To begin my testing, I copied and pasted the cod ...

cssreactjsmaterial-uimedia-queries

identifying the element targeted on dynamically created links with the help of jquery

I have created dynamic links where clicking on a country link displays the cities of that particular country. I am trying to retrieve the event.target.id of the dynamically generated city link when it is clicked. $(".countryName").children().on('cl ...

javascripthtmljquery

Challenges with dropdown menus in the sub navigation area

I am currently working on a navigation system that includes three levels of sub-navigation elements. While the functionality is fine up to the third level, it only displays one subcategory instead of multiple categories as intended. I suspect there might ...

jqueryhtmlcssnavigation

Ajax - Trouble with Updating DIV Content

As a beginner in AJAX, I am encountering difficulties creating a simple AJAX program. My goal is to have a button that, when clicked, changes the text of the div below it. Despite numerous attempts, I have not been able to identify the issue. Below is the ...

javascriptxmlajaxhtml

React powered interactive tables

I am in the process of creating a dynamic table using React, and here is the data structure I am working with: { numRows: 2, numCols: 3, cells: [ { id: 1, pos: { row: 1, col: 1 }, content: 'This is th ...

javascripthtmlreactjshtml-table

Missing Overlay in jQuery UI Dialog

I have integrated the jquery ui dialogue into my asp.net mvc application. I customized the styles related to ui dialogues by copying and modifying them. For the overlay, I used the following style: .ui-widget-overlay { background: #666666 url(im ...

jquerycssjquery-ui

The hover effect in CSS brings life to list items when filled with content

I am attempting to create an animation for an <li> element that gives the illusion of a fill effect moving from left to right when hovered over. This is my current progress: ul { list-style-type: none; } .hoverTest { float: left; margin-right: 1 ...

javascriptjqueryhtmlcss

Connect PHP code to an HTML document

Recently, I created an entry form login page saved as a .php file which displays content in html and css. The page showcases various elements followed by a login form with two fields: Username, Password, and a 'Log in' button. Additionally, I ha ...

phphtmlcssxampp

Adjusting the dimensions of the central container

Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and a ...

javascriptcssangularjs

Using Jquery to toggle columns based on their index and custom attribute

My table has two rows in the header: the first row with colspan and the second row containing headers. You can see an image below for reference. With a jQuery function, I extract all the table cell values from the second header row and add them to a div w ...

javascriptjqueryarrayshtmlhtml-table

What is the method for creating a transparent background for Material UI v1.0 Dialogs?

I'm attempting to place a CircularProgress component inside a dialog box. However, I'm facing an issue where the background of the dialog box is white and cannot be set to transparent like in previous versions of Material UI (v0.2). style={{ ...

cssreactjsdialogmaterial-ui

Steps for creating an expandable menu in the Magento category list

Looking for a way to create a category menu that expands when clicked on? Check out this example of a left menu (not Magento) at Can this be achieved with CSS alone? Or is there a specific module that can help with this functionality? ...

cssmagentowebshop

Replicate the form to a new one while concealing the elements and then submit it

Initially, I was working with just one form. Now, I find myself in a situation where I need to utilize a different form which contains the same inputs. This is necessary because depending on the action taken upon submission, different processes will be tri ...

javascriptjqueryhtmlforms

Center the panel on the page and decrease its width using Bootstrap

I recently incorporated a Bootstrap panel above a search results table - my first experience working with Panels. This panel contains a form with a select menu, allowing users to filter the list of search results based on their selections. Currently, the ...

htmlcsstwitter-bootstrap

Is there a bug with text rotation in CSS 3?

I'm having trouble understanding how text rotation works in CSS3. For example, when I try to rotate text like you can see here, the rotated text never seems to be in the correct location, despite setting properties like: right: 0; bottom: 0; There ...

cssrotationtext-rotation

Showcasing extensive text in a Bootstrap pop-up message

I'm having some trouble showing a lengthy text in a twitter bootstrap tooltip. As you can observe from the image below, it's not working perfectly. Is there an easy solution to handle text that is too long for the bootstrap tooltip? EDIT (includ ...

jquerycsstwitter-bootstraptwitter-bootstrap-tooltip

Is it possible to resize background images on Safari?

Encountering an issue with Safari where the background isn't scaling properly. It functions perfectly in Firefox, Chrome, and other browsers, but Safari is presenting a problem. Here's a link to the site: This issue occurs when the resolution is ...

jqueryhtmlcss

The Facebook Comments widget causes the webpage to automatically scroll to the bottom on older versions of Internet Explorer like

My webpage is quite lengthy and includes a Facebook comments widget at the bottom. However, when loading in IE7 and IE8, the page instantly jumps to the bottom due to this widget. Interestingly, removing the widget allows the page to load normally. This ...

javascripthtmlfacebookinternet-explorerloading

Ways to conceal a label and the input field when a radio input is switched on

In my HTML file, I have coded an application form using CSS to style it. Some of the tags have been removed for display purposes. <label>Member</label> <input type="radio" name="Answer" value="Yes"/>Yes<br/> <input type="radio" ...

htmlcssradio-buttonlabelhide

Changing the arrow in jQuery's slideToggle for different div elements is a breeze

Good day, I'm struggling with getting the arrow switch to work correctly for slideToggle. Even though I have three of them, the arrow changes only for the first one - no matter which div I click on. Any suggestions on what I might be missing? Thank yo ...

jqueryhtmlcss