HTML and CSS

Div position

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Jul 2008

Posts: 2

Reputation: mohammad_molana is an unknown quantity at this point

Solved Threads: 0

mohammad_molana mohammad_molana is offline

Offline

Newbie Poster

Div position

Sep 11th, 2008

hi all.

i have a problem in div usage.
my divs position image is in attachment.

and this is my html tags:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div style="width:430px; height:100%">
<div style="width:100px; height:100px; float:right; border:1px solid #333333">&nbsp; </div>
<div style="width:200px; float:right; border:1px solid #333333; margin-right:10px; background-color:#FF0000">&nbsp; </div>
<div style="width:100px; height:100px; float:right; border:1px solid #333333;margin-right:10px;">&nbsp; </div>
<br />
<div style="width:100px; height:100px; float:right; border:1px solid #333333; margin-top:10px">&nbsp; </div>
<div style="width:200px; float:right; border:1px solid #333333; margin-right:10px; margin-top:10px; background-color:#FFFF00">&nbsp; </div>
<div style="width:100px; height:100px; float:right; border:1px solid #333333;margin-right:10px; margin-top:10px">&nbsp; </div>
<br />
</div>
<div style="width:430px; height:100%">
<div style="width:100px; height:100px; float:right; border:1px solid #333333">&nbsp; </div>
<div style="width:200px; float:right; border:1px solid #333333; margin-right:10px; background-color:#FF0000">&nbsp; </div>
<div style="width:100px; height:100px; float:right; border:1px solid #333333;margin-right:10px;">&nbsp; </div>
<br />
<div style="width:100px; height:100px; float:right; border:1px solid #333333; margin-top:10px">&nbsp; </div>
<div style="width:200px; float:right; border:1px solid #333333; margin-right:10px; margin-top:10px; background-color:#FFFF00">&nbsp; </div>
<div style="width:100px; height:100px; float:right; border:1px solid #333333;margin-right:10px; margin-top:10px">&nbsp; </div>
<br />
</div>

now i want that yellow div go up and grip to red div.

how i do this????
thanks for help.

Attached Thumbnails

•

Join Date: May 2008

Posts: 302

Reputation: sreein1986 is an unknown quantity at this point

Solved Threads: 33

sreein1986 sreein1986 is offline

Offline

Posting Whiz

Re: Div position

Sep 12th, 2008

Hey mohammad_molana
please check this code and check it

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div style="width:430px; height:100%;">
<div style="width:100px; height:100px; float:right; border:1px solid #333333;">&nbsp; </div>
<div style="width:200px; float:right; border:1px solid #333333; margin-right:10px; background-color:#FF0000;">&nbsp; </div>
<div style="width:100px; height:100px; float:right; border:1px solid #333333;margin-right:10px;">&nbsp; </div>
<br />
<div style="width:100px; float:right; border:1px solid #333333; margin-right:10px; left:337px; top:128px; z-index:1; position:absolute; height: 100px;">&nbsp;</div>
<div style="width:200px; float:right; border:1px solid #333333; margin-right:10px; background-color:#FFFF00; left:126px; top:40px; z-index:1; position:absolute; height: 18px;">&nbsp;</div>
<div style="width:100px; float:right; border:1px solid #333333; margin-right:10px; left:12px; top:126px; z-index:1; position:absolute; height: 100px;">&nbsp; </div>
<br />
</div>
<div style="width:430px; height:100%;">
<div style="width:100px; height:100px; float:right; border:1px solid #333333;">&nbsp; </div>
<div style="width:200px; float:right; border:1px solid #333333; margin-right:10px; background-color:#FF0000;">&nbsp; </div>
<div style="width:100px; height:100px; float:right; border:1px solid #333333;margin-right:10px;">&nbsp; </div>
<br />
<div style="width:100px; float:right; border:1px solid #333333; margin-right:10px; left:337px; top:128px; z-index:1; position:absolute; height: 100px;">&nbsp;</div>
<div style="width:200px; float:right; border:1px solid #333333; margin-right:10px; background-color:#FFFF00; left:126px; top:40px; z-index:1; position:absolute; height: 18px;">&nbsp;</div>
<div style="width:100px; float:right; border:1px solid #333333; margin-right:10px; left:12px; top:126px; z-index:1; position:absolute; height: 100px;">&nbsp; </div>
<br />
</div>