ansaurus

Question

how to place last div into right top corner of parent div? (css)

Answer 1

+2 A:

.block1 {color:red;width:100px;border:1px solid green; position: relative;}
.block2 {color:blue;width:70px;border:2px solid black;position:absolute; top: 0px; right: 0px;}

Should do it... Assuming you dont need it to flow....

prodigitalson 2010-05-16 02:11:42

excuse me but what does it mean? `you dont need it to flow`

Radek 2010-05-16 02:26:26

He means using absolute positioning or hard coding the position of the element inside of block 1. Usually you try to avoid this solution if possible but in some situations it's what you have to do.

Jason Rowe 2010-05-16 02:31:56

I need it to flow ....

Radek 2010-05-16 05:00:50

Answer 2

+2 A:

 <div class='block1'>
    <p  style="float:left">text</p>
    <div class='block2' style="float:right">block2</div>
    <p  style="float:left; clear:left">text2</p>

 </div>

You can clear:both or clear:left depending on the exact context. Also, you will have to play around with width to get it to work correctly...

Alexander 2010-05-16 02:14:44

@xander can I work on block1 properties itself instead of what ever inside. The content comes from WordPress so I am not sure how to cover everything within block1 in css

Radek 2010-05-16 02:25:21

@Radek Is there always one (1) div inside of "block1" if so you could target through CSS selector `div.block1 div` or if `div.block1`'s child has a class then `div.block1 div.block2 { float:right; }` should do the trick along with `div.block1 p { float:left; clear:left }`

Alexander 2010-05-16 02:29:13

@xander: I like your solution the best but I am struggling to implement it in on this page http://vk.onalllevels.com/about/limor I cannot tell what elements are going to be inside `<div class="format_text">`

Radek 2010-05-16 02:52:03

if it helps I can move `<div class='block2'>block2</DIV>` after definition of block1 in html

Radek 2010-05-16 02:55:59

That would be best. to move it (`div.block2`) after the first `<p>` tag that is floated left. Everything else can "flow" after them...

Alexander 2010-05-16 03:36:11

I cannot move block2 within block1. Block2 could be the last thing in block1 or after block1 completely.

Radek 2010-05-16 03:40:38

Answer 3

+1 A:

If you can add another wrapping div "block3" you could do something like this.

 <html>
      <head>
      <style type="text/css">
      .block1 {color:red;width:120px;border:1px solid green; height: 100px;}
      .block3 {float:left; width:10px;}
      .block2 {color:blue;width:70px;border:2px solid black;position:relative;float:right;}
      </style>
      </head>

    <body>
    <div class='block1'>

        <div class='block3'>
            <p>text1</p>
            <p>text2</p>
        </div>

        <div class='block2'>block2</DIV>

    </div>

    </body>
    </html>

Jason Rowe 2010-05-16 02:28:05

I don't think I can wrap it in block3 :-(

Radek 2010-05-16 02:42:25

ansaurus

tags:

views:

answers:

how to place last div into right top corner of parent div? (css)

related questions