Welcome to WebmasterWorld Guest from 50.19.190.144

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)

New User

5+ Year Member

joined:June 26, 2009
posts: 6
votes: 0


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 July 1, 2009 (gmt 0)

New User

5+ Year Member

joined:Mar 17, 2009
posts: 27
votes: 0


Hi Slam,

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

Cheers

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

New User

5+ Year Member

joined:June 26, 2009
posts: 6
votes: 0


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 July 1, 2009 (gmt 0)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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 July 6, 2009 (gmt 0)

New User

5+ Year Member

joined:June 26, 2009
posts: 6
votes: 0


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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members