Home/ Questions/Q 9005405
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T01:08:09+00:00

Would like to place the bottom (green) container below the left and right containers

  • 0

Would like to place the bottom (green) container below the left and right containers (red and blue) but still keep it inside the main (black) container. Cannot get it to work. Any suggestions? (jsfiddle):

<!DOCTYPE HTML>
<html>
<body>

<div class="main_container">

    <div class="left_container">
    </div>

    <div class="right_container">
    </div>

    <div class="bottom_container">
    </div>

</div>

</body>
</html>​

CSS:

div.main_container {
    background: #000;
    border: none;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    width: 100%;
    min-height: 400px;
    margin: auto;
    position: relative;
}

div.left_container {
    float:left;
    position:absolute;
    width: 220px;
    background: red;
    margin: 0;
    min-height: 100%;
    padding: 0;
}

div.right_container {
    position: relative;
    margin-left: 220px;
    width: 715px;
    height: 100px;
    background: blue;
}

div.bottom_container {
    width: 100%;
    height: 100px;
    background: green;
}

​

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This should size the height of the left container to be everything except 100px and put the green container on the bottom of the whole thing.

    div.bottom_container {
    width: 100%;
    height: 100px;
    background: green;
    position: absolute;
    bottom: 0;
}
div.left_container {
    position:absolute;
    bottom: 100px;
    top: 0;
    width: 220px;
    background: red;
}
    • 0