CODEWITHSUNDEEP
htmlcss
iJade
iJade

Reputation: 23791

Position a div to bottom left

How to move the inside div sqrBall to the bottom left of the parent div container. Here is the HTML code:

<div class="container">
    <div class="sqrBall">

    </div>
</div>

Here is the CSS:

.container{
        width: 500px;
        height: 500px;
        border: 1px solid black;
        margin: 0 auto;
    }
    .sqrBall{
        width: 10px;
        height: 10px;
        background-color: blue;

    }

Here is a DEMO

Upvotes: 4

Views: 12527

Answers (6)

user4571931
user4571931

Reputation:

You have to add two more properties to your existing class .sqrBall

Properties are...

position: relative;
top: 98%;

Below is the working demo, hope it helps you 

<style type="text/css">
.container
{
   width: 500px;
   height: 500px;
   border: 1px solid black;
   margin: 0 auto;
}
.sqrBall 
{
    background-color: blue;
    height: 10px;
    position: relative;
    top: 98%;
    width: 10px;
}
</style>



<html>
<div class="container">
		<div class="sqrBall">

		</div>
	</div>

</html>

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

Try like this: Demo

Add the following along with your code

CSS:

.container {       
    display:table;
}
.sqrBall {       
    float:left;
    margin-top: 100%;
}

Upvotes: 0

paul
paul

Reputation: 350

.container{
        width: 500px;
        height: 500px;
        border: 1px solid black;
        margin: 0 auto;
        position:relative;
    }
    .sqrBall{
        width: 10px;
        height: 10px;
        background-color: blue;
        position:absolute;
        bottom:0;
        left:0;

    }

Upvotes: 0

frogatto
frogatto

Reputation: 29285

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 0 auto;
  position: relative /* Container should have relative position */
}
.sqrBall {
  position: absolute; /* Child should have absolute position */
  bottom: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: blue; 
}
<div class="container">
  <div class="sqrBall">

  </div>
</div>

Upvotes: 0

priya786
priya786

Reputation: 1834

try this demo Fiddle

.sqrBall {
width: 10px;
height: 10px;
 background-color: blue;
 position: absolute;
 top: 98%;
 left: 0;
   }
.container
{
position:relative;
}

Upvotes: 1

atmd
atmd

Reputation: 7490

You can use absolute positioning on the inner element if the parent element has relative positioning. for example:

.container{
    width: 500px;
    height: 500px;
    border: 1px solid black;
    margin: 0 auto;
    position:relative;
}

.sqrBall{
    width: 10px;
    height: 10px;
    background-color: blue;
    position:absolute;
    bottom:0;
    left:0;
}

n.b. if the parent isn't positioned relatively, the inner element will be positioned to the bottom left of the body, not its parent. (at least in this example)

Upvotes: 6

Related Questions