CSS Position vs Float

  • cillianh
  • Newbie
  • Newbie
  • cillianh
  • Posts: 10

Post 3+ Months Ago

Howdy, new to the forum,

I have a question or 2 regarding the structuring/layout of a design using CSS.
I suppose the first thing that comes to my mind is when do you decide to use relative and absolute positioning and when do you decide to use floats when laying out your design?

Would I be right in saying:
If using position: to layout a page/design, it is best to create a container div which is set to position:relative, allowing header, content and nav divs inside the container div to be set to position:absolute, allowing these divs to be positioned relative to the container div. This makes sense to me allowing each div element to be positioned within the container.

If using floats to layout a page, do the divs automatically center on the page? also would it be advisable to use a container div when using floats. Floats do seem a bit more vague, would I be right in thinking you must use margins and borders to control spacing between float elements?

I suppose basically what I want to know is what in your opinion is the better method of laying out a page or if you use both when would you use the different methods.

Thanks for any help

C
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1827
  • Loc: In the Great White North

Post 3+ Months Ago

I find that I rarely use positioning especially absolute positioning. There are a few reasons for this.

First using positioning for global layout leads to vast differences in how your page renders in many browsers (float is somewhat more similar in its interpretation). Second I find that its much easier to allow for fluid content (CMS/Varying lengths of copy, etc) if you leave the page flow the same in the html and presentation. In other words a float is always relative to its parent etc in the page flow so if something has to flex in size the layout won't break where positioning frequently requires you to manually change the location of an object to keep your layout intact.

cillianh wrote:
If using floats to layout a page, do the divs automatically center on the page? also would it be advisable to use a container div when using floats. Floats do seem a bit more vague, would I be right in thinking you must use margins and borders to control spacing between float elements?


Div's don't automatically center. They are by default the entire width of their container (if the body is the container they are 100% the width of the body). If you set a div's width and give it a float it will attempt to reposition itself to which ever side the float is set. If there's something else (floated) in its way your div will bump up against that other floated element.
  • northstjarna
  • Beginner
  • Beginner
  • northstjarna
  • Posts: 58
  • Loc: Chertsey, UK

Post 3+ Months Ago

Use floating, heights and widths, margin and padding whenever possible because that generally does the job. Positioning takes the element out of the flow of the document. I only use positioning when absolutely necessary, say if I want to float a pop up when creating CMS dialogue boxes, generally hiding them until needed... Or if floating really fails.

Also another tip someone told me... if you float right you should put the div before anything else that should be floated left... don't ask why - it's stupid and it just is.

i.e.

Code: [ Select ]
<div style="float:right;" >content</div>
<div style="float:left;" >content</div>
<div style="float:left;" >content</div>
  1. <div style="float:right;" >content</div>
  2. <div style="float:left;" >content</div>
  3. <div style="float:left;" >content</div>


Also a good idea is to come up with a clearfloat class so that you can clear everything and get a clean break.

i.e.

Code: [ Select ]
<div style="float:right;" >content</div>
<div style="float:left;" >content</div>

<br class="clearfloat" />

<div style="float:right;" >content</div>
<div style="float:left;" >content</div>
  1. <div style="float:right;" >content</div>
  2. <div style="float:left;" >content</div>
  3. <br class="clearfloat" />
  4. <div style="float:right;" >content</div>
  5. <div style="float:left;" >content</div>


in your class set clear:both some padding and margin, height to 0 or 1px... can't remember everything on this, but you can find this technique on the net.
Moderator Remark: Added [code] tags

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 26 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.