CODEWITHSUNDEEP
htmlcsscss-floatcss-position
Brandon Nadeau
Brandon Nadeau

Reputation: 3706

HTML/CSS: Absolute Positioning

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>]

Upvotes: 1

Views: 1245

Answers (2)

arttronics
arttronics

Reputation: 9955

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;
}

Upvotes: 2

Usha
Usha

Reputation: 1468

If all the divs have the same position:absolute attribute then they are all going to overlap.

Have a parent div for the divs that you want to show at the bottom. And style this parent div with position:absolute and bottom:0

Heres the JSFIDDLE. I hope this is what you want.

Upvotes: 2

Related Questions