Hi

 

When writing code free hand, whats the easiest way of positioning images and divs, and so on.

 

Example (im at work so apologies if i've entered it wrong, just an example)

 

{

#text area

 

margin-top: -10px;

}

 

Is the best way doing it with px and playing around with the integer?

 

Im asking because i tried positioning some text and it seemed to take alot of work positioning it in the right place. Also its the same with images.

 

Are floats easy to use and would this be easier?

 

Thanks

you have 3 choices when positioning with css

 

1) absolute / relative / fixed positioning e.g.

 

#textarea {
position:absolute;
left:70px;
top:50px;
}
#textarea {
position:fixed {
bottom:1px;
left:300px;
}
#textarea {
position:relative;
} 

 

2) floating

#textarea {
float:left;
}
#textarea {
float:right;
}

 

3) margins

#textarea {
margin:50px auto 10px auto;
}
the order of the margins above is : top, right, bottom, left

#textarea {
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}

 

you can also add minus margins, so you can move a div over a image, etc (http://net.tutsplus.com has this with the logo halfway between the content and the nav.

 

#textarea {
margin-top: -50px;
}

 

You can add the margins to the floats too

#textarea {
float:left;
margin:10px 0 0 300px;
} 

 

 

It depends on your design and what you feel best working with. I use floats / margins mostly but been using absolute and relatives more.

Thanks for your reply

 

I don't get floats, the CSS will say float left/right/center whichever, but this doesn't indicate exactly on the page where it should sit.

 

I have tried floating left, but it doesn't go quite as far as I'd like and also it looses it's top margin.

 

Can you specify where it should sit using a float?

 

UPDATE

 

Sorry, I just saw the bottom of your post there, thanks tis makes sense! x

best bet is to only float in a div, e.g,

 

<div id="wrapper">
<div id="col1">
</div> 
<div id="col2">
</div>
</div>

#wrapper {
width:1000px;
height:100%;
}
#col1 {
float:left;
width:50%;
}
#col2 {
float:right;
width:50%;
}

 

that creates 2 colums each 50% in width, with each set to a float. You really need to set a width on the floated div or it won't look like its floated.

floats and margins is my choise