Do You Position Elements with the Position Property or with Margin and Padding?

[Fluoresce]

I tend to position elements using margin, padding and float. I don't usually use the position property, unless I want elements to overlap.

 

Do you do the same?

 

When are you supposed to use each of the different options?

[haku]

98% of the time, with floats, margins and padding. There are times where absolute/relative/static positioning are useful or even necessary, but they are exceptions.

[supergrame]

Hi there... this may not be any use two you but I am currently learning css and i found this very useful.

 

http://www.barelyfitz.com/screencast/html-training/css/positioning/

[supergrame]

OK well i just learnt, Never use padding and or margins to form your site layout because it is really buggy in IE, to get around this you can use a container element to store all your other elements in, just set a fixed width and height for the container element and the rest of the elements should be fine going off margins and padding.

 

Keeping in mind I'm still in the early stages of learning this css stuff:)

[jcombs_31]

To be safe you can avoid using padding on containing elements and set margins on the child elements.  For example if you have a sidebar set to 200px wide, you probably don't want to set your padding on the sidebar container, but set margins on the child elements like p, ul, h1-h5, etc.  This is a safe way to avoid box model problems.

[supergrame]

what if you want to have a border around all your divs that are inside of the container div like what I'm trying to do.

 

lol does anyone else feel like going back to tables and, ok im having a blank.. the other layout option

[haku]

If you want a border around all the child elements, but inside the containing div, then you can do this:

 

<div style="width:200px">

  <div style="margin:20px; border:solid black 1px;">

    <h1 style="margin:0 10px">H1</h1>

    <p style="margin:10px;">paragraph</p>

  </div>

</div>

 

(note: I put the styles inline just for visual representation. They shouldn't actually be put inside the HTML tags like that.)

[supergrame]

thank you I have finally got the result I was after thanks to you much respect.

 

Now to jump into the php side of things, I was trying to avoid this for as long as possible.

 

Thanks again no doubt ill be back in the css section soon  ;Denough hehe