Home/ Questions/Q 9146645
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T10:47:53+00:00

I am using position: absolute; so my div can be placed at the bottom,

  • 0

I am using position: absolute; so my div can be placed at the bottom, but I also need to use float: left; so that each new div will be placed next to it, but they are just being placed in the same spot, any suggestions?

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">

        .media_container{
                min-width:  800px; max-height: 800px; 
                min-height: 300px; max-height: 300px;
                border: 2px solid #f00; 
                position: relative;
                }

        .media_header{
                min-width:  220px; max-width:  220px;
                min-height: 50px; max-height: 50px;
                border: 2px solid #f00;
                float: left;
                /*position: absolute;*/
                margin-left: 30px;
                bottom: 30px;
                }

    </style>
  <title>Test</title>
</head>


<body>

  <div class='media_container'>

    <div class='media_header'>Header 1</div>
    <div class='media_header'>Header 2</div>
    <div class='media_header'>Header 3</div>

  </div>

 </body>]
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    jsFiddle DEMO

    In order to float divs at the bottom of the webpage, your container needs to be set absolute and placed at the bottom.

    Then, all contents in this container are relative along with your float requirements. Done!

    .media_container {
  position: absolute;
  bottom: 0;
  min-width: 800px;
  max-height: 800px;
  min-height: 300px;
  max-height: 300px;
  border: 2px solid #f00;
}
.media_header {
  position: relative;
  float: left;
  margin-left: 30px;
  margin-top: 30px;
  min-width: 220px;
  max-width: 220px;
  min-height: 50px;
  max-height: 50px;
  border: 2px solid #f00;
}
    • 0