Tips on aligning three divs horizontally within a container while maintaining a height of 100%

Question

Tips on aligning three divs horizontally within a container while maintaining a height of 100%

UPDATE: The alignment has been corrected by adding floats. However, the height still doesn't fill 100%. Check out the new look: Image Link

In my footer container, I want to arrange 3 columns (colored green, white, and red for clarity). Currently, they are stacking vertically, but I aim to have them side by side with a height of 100% to match the container's height. Here is the current layout: Current Layout

Each column has a width of 33% to adhere to responsive design principles. I have already removed padding and margins from all div elements.

Your assistance in achieving this layout would be highly appreciated. Thank you.

HTML:

<div id="Page">

        <div id="content" class="wrapper">

        </div>      

        <div id="footer">
            <div id="footerContainer">
                <div id="footerLeft">
                    <p>
                    Test
                    </p>
                </div>
                <div id="footerCenter">
                    <p>
                    Test
                    </p>
                </div>
                <div id="footerRight">
                    <p>
                    Test
                    </p>
                </div>
            </div>    <!-- footerContainer -->
        </div> <!-- Footer -->

    </div> <!-- Page -->

CSS:

#content {
    background-color: black;
}

.wrapper {
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

#footer {
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: black;
}

#footerContainer {
    width: 60%;
    max-height: 100%;
    margin: 0 auto;
}

#footerLeft {
    width: 33%;
    height: 100%;
    float: left;
    background-color: darkolivegreen;
    padding: 0;
}

#footerCenter {
    width: 33%;
    height: 100%;
    float: left;
    background-color: white;
    padding: 0;
}

#footerRight {
    width: 33%;
    height: 100%;
    float: left;
    background-color: firebrick;
    padding: 0;
}

javascript jquery html css

Answer 1

Answer №1

Make the following changes to improve the styling of the footer:

#content {
    background-color: black;
}

.wrapper {
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

#footer {
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: black;
}

#footerContainer {
  display: flex;
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

#footerLeft {
    width: 33%;
    background-color: darkolivegreen;
}

#footerCenter {
    width: 33%;
    background-color: white;
}

#footerRight {
    width: 33%;
    background-color: firebrick;
}

<div id="Page">

        <div id="content" class="wrapper">

        </div>      

        <div id="footer">
            <div id="footerContainer">
                <div id="footerLeft">
                    <p>
                    Test
                    </p>
                </div>
              <div id="footerCenter">
                    <p>
                    Test
                    </p>
                </div>
              <div id="footerRight">
                    <p>
                    Test
                    </p>
                </div>
            </div>    <!-- footerContainer -->
        </div> <!-- Footer -->

    </div> <!-- Page -->

Here is a simplified version with improved CSS styling for the footer:

#content {
  background-color: black;
}
.wrapper {
  width: 60%;
  height: 100%;
  margin: 0 auto;
}
#footer {
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: black;
  display: flex;
  justify-content: center;
}
#footer > div {
  width: 20%;
}
#footerLeft {
  background-color: darkolivegreen;
}
#footerCenter {
  background-color: white;
}
#footerRight {
  background-color: firebrick;
}

<div id="Page">

  <div id="content" class="wrapper">

  </div>

  <div id="footer">
    <div id="footerLeft">
      <p>
        Test
      </p>
    </div>
    <div id="footerCenter">
      <p>
        Test
      </p>
    </div>
    <div id="footerRight">
      <p>
        Test
      </p>
    </div>
  </div>
  <!-- Footer -->

</div>
<!-- Page -->

For compatibility with older browsers, use the following CSS styles for the footer:

#content {
  background-color: black;
}
.wrapper {
  width: 60%;
  height: 100%;
  margin: 0 auto;
}
#footer {
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: black;
}
#footerContainer {
  display: table;
  width: 60%;
  height: 100%;
  margin: 0 auto;
}
#footerContainer > div {
  display: table-cell;
  width: 33%;
}
#footerLeft {
  background-color: darkolivegreen;
}
#footerCenter {
  background-color: white;
}
#footerRight {
  background-color: firebrick;
}

<div id="Page">

  <div id="content" class="wrapper">

  </div>

  <div id="footer">
    <div id="footerContainer">
      <div id="footerLeft">
        <p>
          Test
        </p>
      </div>
      <div id="footerCenter">
        <p>
          Test
        </p>
      </div>
      <div id="footerRight">
        <p>
          Test
        </p>
      </div>
    </div>
    <!-- footerContainer -->
  </div>
  <!-- Footer -->
  <!-- Footer -->

</div>
<!-- Page -->

Answer 2

Make the following changes to improve the styling of the footer:

#content {
    background-color: black;
}

.wrapper {
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

#footer {
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: black;
}

#footerContainer {
  display: flex;
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

#footerLeft {
    width: 33%;
    background-color: darkolivegreen;
}

#footerCenter {
    width: 33%;
    background-color: white;
}

#footerRight {
    width: 33%;
    background-color: firebrick;
}

<div id="Page">

        <div id="content" class="wrapper">

        </div>      

        <div id="footer">
            <div id="footerContainer">
                <div id="footerLeft">
                    <p>
                    Test
                    </p>
                </div>
              <div id="footerCenter">
                    <p>
                    Test
                    </p>
                </div>
              <div id="footerRight">
                    <p>
                    Test
                    </p>
                </div>
            </div>    <!-- footerContainer -->
        </div> <!-- Footer -->

    </div> <!-- Page -->

Here is a simplified version with improved CSS styling for the footer:

#content {
  background-color: black;
}
.wrapper {
  width: 60%;
  height: 100%;
  margin: 0 auto;
}
#footer {
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: black;
  display: flex;
  justify-content: center;
}
#footer > div {
  width: 20%;
}
#footerLeft {
  background-color: darkolivegreen;
}
#footerCenter {
  background-color: white;
}
#footerRight {
  background-color: firebrick;
}

<div id="Page">

  <div id="content" class="wrapper">

  </div>

  <div id="footer">
    <div id="footerLeft">
      <p>
        Test
      </p>
    </div>
    <div id="footerCenter">
      <p>
        Test
      </p>
    </div>
    <div id="footerRight">
      <p>
        Test
      </p>
    </div>
  </div>
  <!-- Footer -->

</div>
<!-- Page -->

For compatibility with older browsers, use the following CSS styles for the footer:

#content {
  background-color: black;
}
.wrapper {
  width: 60%;
  height: 100%;
  margin: 0 auto;
}
#footer {
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: black;
}
#footerContainer {
  display: table;
  width: 60%;
  height: 100%;
  margin: 0 auto;
}
#footerContainer > div {
  display: table-cell;
  width: 33%;
}
#footerLeft {
  background-color: darkolivegreen;
}
#footerCenter {
  background-color: white;
}
#footerRight {
  background-color: firebrick;
}

<div id="Page">

  <div id="content" class="wrapper">

  </div>

  <div id="footer">
    <div id="footerContainer">
      <div id="footerLeft">
        <p>
          Test
        </p>
      </div>
      <div id="footerCenter">
        <p>
          Test
        </p>
      </div>
      <div id="footerRight">
        <p>
          Test
        </p>
      </div>
    </div>
    <!-- footerContainer -->
  </div>
  <!-- Footer -->
  <!-- Footer -->

</div>
<!-- Page -->

Answer 3

Answer №2

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
    width:100%;
    height:100%;
} 
#div1 {
    width:33%;
    display:inline-block;
    float:left;
    height:100%;
}
#div2 {
    width:33%;
    display:inline-block;
    height:100%;
}
#div3 {
    width:33%;
    display:inline-block;
    float:right;
    height:100%;   
}
</style>
</head>
<body>
<div id="container">
<div id="div1"><!--
--><div id="div2"><!--
--><div id="div3">
</div>
</body>
</html>

Ensure that the second div is properly aligned by adjusting the #container text-align property to center. Remember to utilize comments to remove any extra spacing between the divs.

Answer 4

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
    width:100%;
    height:100%;
} 
#div1 {
    width:33%;
    display:inline-block;
    float:left;
    height:100%;
}
#div2 {
    width:33%;
    display:inline-block;
    height:100%;
}
#div3 {
    width:33%;
    display:inline-block;
    float:right;
    height:100%;   
}
</style>
</head>
<body>
<div id="container">
<div id="div1"><!--
--><div id="div2"><!--
--><div id="div3">
</div>
</body>
</html>

Ensure that the second div is properly aligned by adjusting the #container text-align property to center. Remember to utilize comments to remove any extra spacing between the divs.

Answer 5

Answer №3

Apply the float: left property to all 3 elements simultaneously.
Combine the selectors using commas without repeating the properties.

To expand the elements, modify max-height to height in the CSS rule for #footerContainer.

#content,
.wrapper {
  background-color: black;
}

.wrapper {
  width: 60%;
  height: 100%;
  margin: 0 auto;
}

#footer,
#footerContainer {
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: black;
}

#footerLeft,
#footerCenter,
#footerRight {
  float: left;
  width: 33%;
  height: 100%;
  padding: 0;
}

#footerLeft {
  background-color: darkolivegreen;
}

#footerCenter {
  background-color: white;
}

#footerRight {
  background-color: firebrick;
}

<div id="Page">

  <div id="content" class="wrapper">

  </div>

  <div id="footer">
    <div id="footerContainer">
      <div id="footerLeft">
        <p>
          Test
        </p>
      </div>
      <div id="footerCenter">
        <p>
          Test
        </p>
      </div>
      <div id="footerRight">
        <p>
          Test
        </p>
      </div>
    </div>
    <!-- footerContainer -->
  </div>
  <!-- Footer -->

</div>
<!-- Page -->

Answer 6

Apply the float: left property to all 3 elements simultaneously.
Combine the selectors using commas without repeating the properties.

To expand the elements, modify max-height to height in the CSS rule for #footerContainer.

#content,
.wrapper {
  background-color: black;
}

.wrapper {
  width: 60%;
  height: 100%;
  margin: 0 auto;
}

#footer,
#footerContainer {
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: black;
}

#footerLeft,
#footerCenter,
#footerRight {
  float: left;
  width: 33%;
  height: 100%;
  padding: 0;
}

#footerLeft {
  background-color: darkolivegreen;
}

#footerCenter {
  background-color: white;
}

#footerRight {
  background-color: firebrick;
}

<div id="Page">

  <div id="content" class="wrapper">

  </div>

  <div id="footer">
    <div id="footerContainer">
      <div id="footerLeft">
        <p>
          Test
        </p>
      </div>
      <div id="footerCenter">
        <p>
          Test
        </p>
      </div>
      <div id="footerRight">
        <p>
          Test
        </p>
      </div>
    </div>
    <!-- footerContainer -->
  </div>
  <!-- Footer -->

</div>
<!-- Page -->

Tips on aligning three divs horizontally within a container while maintaining a height of 100%

Answer №1

Answer №2

Answer №3

Similar questions

Create a Boxplot chart using Chart.js that dynamically adjusts the minimum and maximum values to allow for additional space on either

Head styles for tinyMCE

Is it possible to achieve a height transition using CSS instead of relying on JavaScript

Sorting by price using the ng-repeat directive is not suitable for this

Having a floating left <UL> list with floating right text boxes positioned below the UL list instead of being set next to it

Eliminate any undefined data in the popup map of Javascript

Tips on arranging JSON elements based on the sequence of another JSON

I am struggling to grasp the concept of how the g flag in JavaScript's string.match(regexp) method operates

Using jQuery/AJAX for nested functions, as well as utilizing the Clone and Cufon properties

What is the best way to place a 3D model at random points on the surface of a sphere while ensuring that it always faces the right direction?

How to fetch and display images using Vue.js with Axios and a web API

Get the JS file by tapping the download button, and access the

What is the best way to optimize a search for objects with extensive field arrays?

Searching by multiple parameters in Angular.js

Reverse animation transition not activating in CSS

JS/PHP: No error message will be alerted

Identifying Master Page Controls Post-Rendering

When using the post method in jQuery, it may send data that is unspecified in the request body

Click event in jQuery to change the background color of <td> element

How can I log an object definition and text in the same console.log statement?