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

The robot will automatically update its own message after a designated period of time

Font that has been downloaded is not showing up on the HTML document

How to modify this to return a function and eliminate the need for declaring a function

The program encountered an unexpected identifier 'getProject' instead of ';'. It was expecting to find a semicolon after the async variable declaration

Error: The variable is not declared in the AJAX/JQuery code

Comparing two tables in jQuery/Javascript for matching data

What is the best way to delay a recursive JavaScript function for 3 seconds?

Guide on converting HTML datetime picker datetime-local to moment format

PHP XML loop encountering issues with functionality

The asynchronous request sent to the API action in MVC does not trigger the success event (ASP.NET Web API)

Modify the background color of each word within the search bar

Top tips for handling HTML data in JSON format

How to customize JavaFx context menu appearance using CSS to achieve a full-width background color

<ol><li>Arranges elements in a peculiar way if the image is aligned to the left</li></ol>

Retrieval of jQuery remove() method

Can you identify the nature of the argument(s) used in a styled-component?

An Alternative Approach for Executing a Function within an AngularJS Directive

The list of suggestions is not populating when triggered by the 'change' event

Retrieve and save only the outcome of a promise returned by an asynchronous function

Switch the header from left to right movement for mobile devices