Duffers guide to CSS DIV positioning

[WiseBuddha]

I fear change, which is why I still use tables for layouts, but I have decided to attempt to overcome my fears and create a site that uses CSS driven DIV to create a layout.

Unfortunatly I have reached an impass I would appreciate any guidance.

I am looking to create a "normal" layout, something like this :

--------- HEADER ---------
--------- HEADER ---------
-NAV- ----- CONTENT -----
-NAV- ----- CONTENT -----
-NAV- ----- CONTENT -----
-NAV- ----- CONTENT -----
--------- FOOTER ---------
--------- FOOTER ---------

The header and footer DIVs needs to be 100% width, the nav div needs to have a fixed width and the content footer needs to resize to fit whatever space it can.

Now I can easily do this with a table infact this is the layout I am attempting to convert :

http://skunkworks.24601.net/layouts/tables/

My current attempt at conversion is here :

http://skunkworks.24601.net/layouts/divs/

The more cunning amoung you will see that the div version has a few "issues", I am not looking for somebody to write the code for me, how would that help me learn? But a gentle prod in the right direction on the following questions would be greatly appreicated :

1) How can I get two DIVs to sit next to each other horizonatally? This is used on the logo header and the footer logo - To make the page size nicely the header/footer logos are split into a left and right image - these are align to, respectively, to left and right so when the page is resized it does so nicely (this effect can be seen on the table layout above)

2) Why does the navigation div have a very small pad at the top and bottom? I have played around with "padding:0px" etc but that gap remains.

3) I need the content div ("blah blah blah") to sit to the right of the nav div, but it needs to leave a gap of about 5 pixels on the left and the right hand side should align exactly with the far right of the header/footer divs (this effect can also be seen on the table layout above)

[Paul O'B]

Hi,

That type of layout is ideal for css as there are no equalising columns and can be achieved quite simply once you've grasped the basic concepts.

As you don't want the answer in code (although it would literally minutes to do) I will prod you in the right direction

How can I get two DIVs to sit next to each other horizonatally? This is used on the logo header and the footer logo - To make the page size nicely the header/footer logos are split into a left and right image - these are align to, respectively, to left and right so when the page is resized it does so nicely (this effect can be seen on the table layout above

Solution: Learn to embrace floats :

To enable elements to sit next to each other it is usual to float them. You can float one element left and one element right. Or float them all left and they will line up.

In a fluid layout floats will drop down to go underneath an element when there is no available space for them to resize so be aware of this as it is more of a feature than a bug.

Alternatively you could float the logo left and put the right image into the background of the container.

2) Why does the navigation div have a very small pad at the top and bottom? I have played around with "padding:0px" etc but that gap remains.

If you are talking about the gap between the nac and the header then its because you have put a break <br> in the html!

3) I need the content div ("blah blah blah") to sit to the right of the nav div, but it needs to leave a gap of about 5 pixels on the left and the right hand side should align exactly with the far right of the header/footer divs (this effect can also be seen on the table layout above)

Float the navigation - float:left and then just set a margin left on the content to clear the float e.g. margin-left:165px. Don't give the content a width and then it will expand to fill the remaining space. (There are some minor fixes needed for ie for its 3 pixel jog but I'll let you research that later.)

You will need to set your footers with clear:both so that the floats are cleared and normal flow is resumed.

Look at the FAQ sticky thread and read about the broken box model because this will come back to haunt you.

Also use a full doctype with uri even when practicing
so you get the best out of the browsers (because every little bit helps.).

Hope thats enough to prod you on your way

Paul

[WiseBuddha]

Well with your help I have actually made some progress in getting this site together, you can see the changes at :

http://skunkworks.24601.net/layouts/divs2/

As normal with these things I still have a few questions :

1) In the table version, when the user resizes the browser the logo/footer images come closer together until they hit. When this happens the width of the table stays the same and the browser uses vertical scrollbars. In the div version the images wrap under each other, how can I create the table functionality using divs?

2) For some reason the background colour doesnt seem to render in Firefox

[Paul O'B]

how can I create the table functionality using divs?

You can't very easily so don't even try This is css not tables and both have different characteristics. Theres not a lot of point in making a css layout behave exactly like a table because you would be better off using a table

As I mentioned above this is a feature of css that tables can't replicate and it is just trying to keep your elements available without scrollbars appearing. When there is no space left the float drops below. Try resizing this sitepoint page and you will see the menu at the top break into pieces and line up under each other.

If you don't want the page to get any smaller then the only fix is to use min-width for mozilla and some js for ie (or expressions (which are proprietary ie code) .

Personally I would just put your right hand header image in the background of the header and then it will just slide underneath the left logo when it gets too small. Alternatively tou could absolutely place the right image to the right and then set the z-index so that it slides under the left at small sizes. I would use the background version because it cleans up the html.

2) For some reason the background colour doesnt seem to render in Firefox

Floats are basically removed from the flow (albeit in a special way) but that means that they will float out of their container because the container doesn't know they are there.

This is by design and the answer is that you have to clear the floats before the closing div of the parent container. This will force the background to encompass the floats.

The easiest way to do this is with a class as follows.

.clearer {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px;
}

html:

 
<div id="mainHeader"><div id="logoImageHolderLeft"><a href='http://24601.net/'><img src='images/mainlogo_left.jpg' alt='Left Logo' border=0></a></div><div id="logoImageHolderRight"><a href='http://24601.net/'><img src='images/mainlogo_right.jpg' alt='Right Logo' border=0></a></div>	<div class="clearer"></div>
</div><!--closing div of parent container -->

The same goes for your footer.

Hope that explains it all satisfactorily

Paul

[WiseBuddha]

Where is the we are not worthy smiley when you need one

Thanks alot for your help