0

While dealing with html code in one of my project I faced one problem in which I have taken one main div as a container,inside which I have taken one sub div in the left position,second one in the right position and third one following in the next row. Till now my code is running very perfectly as u can see in my code.But i want my third div exactly bottom of my first div of which height is less then my second div. So,I just want to know that is their any other property in html or css except using "margin-top" property in my third div, by which I can make it possible. To make it more clear I have given one example below.

I will be more then happy if any one will even bother my question and suggest me anything.Thank you in advance.

<div style="width:500px;">
        <div style="width:150px;height:50px;background-color:black;float:left; color:white;">
        1st div
        </div>
    
        <div style="width:100px;height:100px;background-color:#0CF;float:right;">
        2nd div
        </div>
    <div style="clear:both"></div>
     <div style="width:50px;height:50px;background-color:#F00;float:left;">
     3rd div
     </div>   
</div>
Sanjay
  • 47
  • 1
  • 7

2 Answers2

1

You need to start by removing the <div> with clear:both; - this is pushing your third div beneath the other two.

Then add clear:left; to the third div. This causes it to clear any items floated left while ignoring those floated right.

<div style="width:500px;">
    <div style="width:150px;height:50px;background-color:black;float:left; color:white;">
    1st div
    </div>

    <div style="width:100px;height:100px;background-color:#0CF;float:right;">
    2nd div
    </div>
 <div style="width:50px;height:50px;background-color:#F00;float:left;clear:left;">
 3rd div
 </div>

See JSFiddle

You may also want to look at this question on SO, which covers float And clear in more detail.

Community
  • 1
  • 1
PTD
  • 1,028
  • 1
  • 16
  • 23
0

I am not quite sure what you want exactly, but this is what i understood of it.

Try running this snippet:

<div style="width:500px;">
        <div style="width:150px;height:50px;background-color:black;float:left; color:white;">
        1st div
        </div>
    
        <div style="width:100px;height:100px;background-color:#0CF;float:right;">
        2nd div
        </div>
    <div style="clear:both"></div>
     <div style="width:50px;height:50px;background-color:#F00;float:left;position:relative;top:-40px;">
     3rd div
     </div>   
</div>

I just added position:relative; top:-40px;

That -40 px means it moves 40 pixels towards the direction "top". That makes that object go up. But if you typed in there 40px instead of -40 it will go 40 pixels away from "top" making it go down :)

Hope this helps you :)

Alexander Sabiona
  • 121
  • 8
  • -thanks a lot ..but,as i have mentioned in my comment that apart from margin-top..because using margin-top property with too much -ve number is not a good practice. Moreover,what if my second div's height is more then 100px as not giving exact height to it but it will increase as per it's content? – Sanjay Feb 26 '15 at 11:13