PDA

Click to See Complete Forum and Search --> : divs and positioning



pea3698
01-26-2007, 10:14 AM
I was doing some reading and wanted to clarify some things.

Lets say that I have a header and this header has 4 divs within the header container. Now I want to move down to the content area, which will have 3 columns. For the positioning of the content div would you not be able to use the float for the positioning? The reading I was doing said that float would keep the divs inline and not allow the divs to shift down. So in this instance would I need to use absolute positioning? Also is absolute positioning good accross the main browsers?

Thanks in advance

rdoyle720
01-26-2007, 10:30 AM
I'm not 100% clear on what you're asking, but if you a float a bunch of div's in a row, they will try to line up side by side (unless there's not enough room to do so). If you want them to display on separate lines, either don't float them or clear the floats by using CSS such as clear: left, clear: right, or clear: both.

Absolute positioning generally works pretty well, though generally I try to avoid it except in cases where something must display on top of something else.

pea3698
01-26-2007, 11:25 AM
I think what you are saying is what I understood in my reading. I will have to try it out later tonight. I was playing with positioning last night and it always hurts to know you wasted 3 hours due to one word.

aversion
01-26-2007, 11:32 AM
You can use positioning or floats to line up columns. Most people use floats as they respond to other elements and events on the page. It's also just a lot easier if you ask me.

There are many many CSS layout resources on the net, this (http://www.maxdesign.com.au/presentation/page_layouts/) is a good place to start perhaps.

The two basic mistakes made when constructing a layout from floated divs are:

1. Not clearing the floats properly.
Anything that is floated needs to be cleared so that the next block element, like a footer after columns, will position itself correctly. Clearing can involve extra markup, which is a pain, but I've found this way (http://www.quirksmode.org/css/clearing.html) works perfectly.

2. Problems with fixed width columns varying between broswers.
This problem stems from the different ways in which browsers interpret the box model (http://www.w3.org/TR/REC-CSS2/box.html). When you have an element of a fixed size any borders and padding you add will expand the width (or height) of that element by the same amount. Except in IE. Instead of making the element wider IE just makes the content area smaller to accommodate the borders or padding.

There are various hacks, the most famous of which is explained here (http://tantek.com/CSS/Examples/boxmodelhack.html), but it's best to avoid hacks whenever possible, a lot of people found themselves having to return to their code and fix hacks that IE7 ignored for example. In this case it means avoiding putting any padding or borders on an element with a fixed width, instead put them on the elements inside the div, like paragraphs or headings that don't have a fixed width.

To bring this back to floated columns, a lot of people see their fixed width floated columns failing in firefox and other standards compliant browsers because they don't realise that the padding they added to the columns increases their width and so forces one column to 'jump down' below the other.

pea3698
01-26-2007, 01:52 PM
Thank you once again Aversion. That was very insightful and I think you may have pinned my problem down. I don't think that I have properly cleared divs.

I did set up my header in multi div setup. I have a header div and the a header content div, and then each of the 4 divs within have the padding and other adjustments. This seems to be working great. I will admit it took me a bit to get to that point but not as long as it would have two weeks ago lol.

I will try your suggestion before resorting to absolute positioning and once again thank you very much for you help with this.