Welcome to WebmasterWorld Guest from 54.166.227.36

Forum Moderators: not2easy

Message Too Old, No Replies

Text area won't display at top right corner of page

problem with css

     
11:52 am on Jul 1, 2009 (gmt 0)

5+ Year Member



I am trying to design an image order form.

I would like my layout to be; name, email, phone number displayed top left. One text field under the other. (no problem with this).

Delivery address text area displayed top right. (here is where I am having trouble, it sits at the bottom right of the form).

image order, quantity and size to sit in a row (spanning the width of the page) at the bottom.

Could someone help please?

Here is my code:

<div class="delivery">
<p>
<label for="address">Delivery address:</label>
<textarea name="address" id="address" cols"45" rows="5"></textarea>
</p>
</div>

.delivery {
width:420px;
padding:5px;
margin-top:0px;
}

The margin-top property is not doing anything I have messed about with the float and margin properties but it won't shift from the bottom of the page.

5:21 pm on Jul 1, 2009 (gmt 0)

5+ Year Member



Hi Slam,

Try property {float : right}. That should do the trick.

Cheers

6:06 pm on Jul 1, 2009 (gmt 0)

5+ Year Member



Hi Stivare,

thanks for getting back to me, I've just done what you suggested but it hasn't worked. For some reason it won't sit at the top of the page.

8:25 pm on Jul 1, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome aboard slam 38,

Delivery address text area displayed top right. (here is where I am having trouble, it sits at the bottom right of the form).

In order for the floated element to float, it has to have something to float around - put the delivery element first in the code source. Additionally, only element on the page using this selector? Make it an ID (not the problem, but is appropriate.) Also a wrapping div is probably not necessary, use the <p> you have there.

#delivery {
float: right;
width:420px;
padding:5px;
margin-top:0px;
}

...........

<p id="delivery">
<label for="address">Delivery address:</label>
<textarea name="address" id="address" cols"45" rows="5"></textarea>
</p>

<div id="company-info">
Name, address, etc, I will naturally be at the LEFT if a selector doesn't tell me to do otherwise.
</div>

9:43 pm on Jul 6, 2009 (gmt 0)

5+ Year Member



Hi rocknbil

thankyou for the detailed reply, sorry for the late reply haven't been on the forum for a few days.

I'm going to try out what you have suggested.

thanks again.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month