Relative Positioning Problem of 3 main layout divs

chickenbak
Novice
Joined: Oct 03, 2004
Posts: 21
Status: Offline

October 3rd, 2004, 10:08 am

I hope that I can get some clarification on some CSS issues...

The following is my html source code...

Code: [ Select ]

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
        <title>Site</title>
        <link href="css/css.css" rel="stylesheet" type="text/css" media="all"/>
    </head>

    <body>
        <div id="layoutPage">
            <div id="layoutMain">
                <div id="layoutMainHeader">
                    <div id="elementMainHeaderLogo">
                        <img src="images/elementMainHeaderLogo.gif" alt="" width="331" height="50" border="0"/>
                    </div>
                    <div id="layoutMainHeaderDivider">
                        <div class="elementDivider">
                            <a class="elementDivider" href="contactus.html">contact us</a>
                        </div>
                        <div class="elementDivider">
                            <a class="elementDivider" href="aboutus.html">about us</a>
                        </div>
                    </div>
                </div>
                <div id="layoutMainBody">
                    <div id="layoutMainBodyColumn1">
                        <table>
                            <tr>
                                <td class="layoutMainBodyColumn1Nav">Home</td>
                            </tr>
                            <tr>
                                <td class="layoutMainBodyColumn1Nav">About Us</td>
                            </tr>
                            <tr>
                                <td class="layoutMainBodyColumn1Nav">Property Acquisitions</td>
                            </tr>
                            <tr>
                                <td class="layoutMainBodyColumn1Nav">Asset Management</td>
                            </tr>
                            <tr>
                                <td class="layoutMainBodyColumn1Nav">Limited Partnerships</td>
                            </tr>
                        </table>
                    </div>
                    <div id="layoutMainBodyColumn2">
                        <div id="elementMainBodyColumn2HeaderImage">
                            
                            <img src="images/elementMainBodyColumn2HeaderImage.jpg" alt="" name="HeaderImage" border="0" /></div>
                            
                        <div id="elementMainBodyColumn2Title">
                            
                            C2Title / Change Me
                            
                        </div>
                        <div id="elementMainBodyColumn2Body">
                            
                            C2Body / Change Me
                            
                        </div>
                        <div id="elementMainBodyColumn2Address">
       Address
                        </div>
                    </div>
                    <div id="layoutMainBodyColumn3">
                        <div id="elementMainBodyColumn3Title1">
                            Login
                        </div>
                        <div id="elementMainBodyColumn3Body1">
                            Login Form
                        </div>
                        <div id="elementMainBodyColumn3Title2">
                            
                            C3Title2 / Change Me
                            
                        </div>
                        <div id="elementMainBodyColumn3Body2">
                            
                            C3Body2 / Change Me
                            
                        </div>
                        <div id="elementMainBodyColumn3Title3">
                            
                            C3Title3 / Change Me
                            
                        </div>
                        <div id="elementMainBodyColumn3Body3">
                            
                            C3Body3 / Change Me
                            
                        </div>
                    </div>
                </div>
                <div id="layoutMainFooter">
                    <div class="elementDivider">

                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<title>Site</title>
<link href="css/css.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<div id="layoutPage">
<div id="layoutMain">
<div id="layoutMainHeader">
<div id="elementMainHeaderLogo">
<img src="images/elementMainHeaderLogo.gif" alt="" width="331" height="50" border="0"/>
</div>
<div id="layoutMainHeaderDivider">
<div class="elementDivider">
<a class="elementDivider" href="contactus.html">contact us</a>
</div>
<div class="elementDivider">
<a class="elementDivider" href="aboutus.html">about us</a>
</div>
</div>
</div>
<div id="layoutMainBody">
<div id="layoutMainBodyColumn1">
<table>
<tr>
<td class="layoutMainBodyColumn1Nav">Home</td>
</tr>
<tr>
<td class="layoutMainBodyColumn1Nav">About Us</td>
</tr>
<tr>
<td class="layoutMainBodyColumn1Nav">Property Acquisitions</td>
</tr>
<tr>
<td class="layoutMainBodyColumn1Nav">Asset Management</td>
</tr>
<tr>
<td class="layoutMainBodyColumn1Nav">Limited Partnerships</td>
</tr>
</table>
</div>
<div id="layoutMainBodyColumn2">
<div id="elementMainBodyColumn2HeaderImage">
<img src="images/elementMainBodyColumn2HeaderImage.jpg" alt="" name="HeaderImage" border="0" /></div>
<div id="elementMainBodyColumn2Title">
C2Title / Change Me
</div>
<div id="elementMainBodyColumn2Body">
C2Body / Change Me
</div>
<div id="elementMainBodyColumn2Address">
Address
</div>
</div>
<div id="layoutMainBodyColumn3">
<div id="elementMainBodyColumn3Title1">
Login
</div>
<div id="elementMainBodyColumn3Body1">
Login Form
</div>
<div id="elementMainBodyColumn3Title2">
C3Title2 / Change Me
</div>
<div id="elementMainBodyColumn3Body2">
C3Body2 / Change Me
</div>
<div id="elementMainBodyColumn3Title3">
C3Title3 / Change Me
</div>
<div id="elementMainBodyColumn3Body3">
C3Body3 / Change Me
</div>
</div>
</div>
<div id="layoutMainFooter">
<div class="elementDivider">
</div>
</div>
</div>
</div>
</body>
</html>

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

October 3rd, 2004, 10:08 am

chickenbak
Novice
Joined: Oct 03, 2004
Posts: 21
Status: Offline

October 3rd, 2004, 10:09 am

The following is my CSS...

Code: [ Select ]

#layoutPage /* Main layout div, covers whole page */  { background-color: aqua; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100% }
#layoutMain /* Layout div for actual content */   { background-color: white; text-align: left; margin: auto; top: 0; width: 760px; height: 100% }
#layoutMainHeader { position: relative; width: 100% }
#layoutMainHeaderDivider { background-color: #300; text-align: right; position: static; width: 100%; height: 22px }
a.elementDivider { color: white; font-size: 8pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; background-color: #300; padding: 4px; float: right }
.elementDivider { background-color: #300 }
#layoutMainBody { position: relative; top: 1px; width: 100% }
#layoutMainBodyColumn1 { font-family: Verdana, Arial, Helvetica, sans-serif; margin: auto; position: absolute; top: 0; left: 0; width: 159px; border-right: 1px solid #fff }
.layoutMainBodyColumn1Nav { font-size: 12px }
#layoutMainBodyColumn2 { position: absolute; top: 0; left: 160px; width: 400px; float: right }
#elementMainBodyColumn2HeaderImage { position: relative; height: 125px }
#elementMainBodyColumn2Title { color: white; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 20px; background-color: #300; padding-left: 10px; position: relative; top: 1px; left: 0; height: 20px }
#elementMainBodyColumn2Body    {}
#elementMainBodyColumn2Address     { color: #999; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; position: relative }
#layoutMainBodyColumn3 { position: absolute; top: 0; left: 560px; width: 199px !important; width: 200px; border-left: 1px solid #fff }
#elementMainBodyColumn3Title1 { color: #fff; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 20px; background-color: #333; padding-left: 10px; position: relative; height: 20px }
#elementMainBodyColumn3Body1 { background-color: #ddd; position: relative; height: 105px }
#elementMainBodyColumn3Title2 { color: #fff; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 20px; background-color: #666; padding-left: 10px; position: relative; top: 1px; height: 21px }
#elementMainBodyColumn3Body2 { background-color: #eee; padding: 10px; position: relative; height: 55px }
#elementMainBodyColumn3Title3 { color: #fff; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 20px; background-color: #666; padding-left: 10px; position: relative; top: 1px; height: 20px }
#elementMainBodyColumn3Body3 { background-color: #eee; padding: 10px; position: relative }
#layoutMainFooter { background-color: #300; position: relative; bottom: 0; width: 100%; height: 22px }

#layoutPage /* Main layout div, covers whole page */ { background-color: aqua; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100% }
#layoutMain /* Layout div for actual content */ { background-color: white; text-align: left; margin: auto; top: 0; width: 760px; height: 100% }
#layoutMainHeader { position: relative; width: 100% }
#layoutMainHeaderDivider { background-color: #300; text-align: right; position: static; width: 100%; height: 22px }
a.elementDivider { color: white; font-size: 8pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; background-color: #300; padding: 4px; float: right }
.elementDivider { background-color: #300 }
#layoutMainBody { position: relative; top: 1px; width: 100% }
#layoutMainBodyColumn1 { font-family: Verdana, Arial, Helvetica, sans-serif; margin: auto; position: absolute; top: 0; left: 0; width: 159px; border-right: 1px solid #fff }
.layoutMainBodyColumn1Nav { font-size: 12px }
#layoutMainBodyColumn2 { position: absolute; top: 0; left: 160px; width: 400px; float: right }
#elementMainBodyColumn2HeaderImage { position: relative; height: 125px }
#elementMainBodyColumn2Title { color: white; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 20px; background-color: #300; padding-left: 10px; position: relative; top: 1px; left: 0; height: 20px }
#elementMainBodyColumn2Body {}
#elementMainBodyColumn2Address { color: #999; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; position: relative }
#layoutMainBodyColumn3 { position: absolute; top: 0; left: 560px; width: 199px !important; width: 200px; border-left: 1px solid #fff }
#elementMainBodyColumn3Title1 { color: #fff; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 20px; background-color: #333; padding-left: 10px; position: relative; height: 20px }
#elementMainBodyColumn3Body1 { background-color: #ddd; position: relative; height: 105px }
#elementMainBodyColumn3Title2 { color: #fff; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 20px; background-color: #666; padding-left: 10px; position: relative; top: 1px; height: 21px }
#elementMainBodyColumn3Body2 { background-color: #eee; padding: 10px; position: relative; height: 55px }
#elementMainBodyColumn3Title3 { color: #fff; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 20px; background-color: #666; padding-left: 10px; position: relative; top: 1px; height: 20px }
#elementMainBodyColumn3Body3 { background-color: #eee; padding: 10px; position: relative }
#layoutMainFooter { background-color: #300; position: relative; bottom: 0; width: 100%; height: 22px }

chickenbak
Novice
Joined: Oct 03, 2004
Posts: 21
Status: Offline

October 3rd, 2004, 10:09 am

The issue is this, there are three main divs...

<div id="layoutMainHeader"></div>
<div id="layoutMainBody"></div>
<div id="layoutMainFooter"></div>

All of them are relatively positioned, but for some reason, the Footer div is automatically positioned right below the Header div, why isn't it below the Footer div? Any help with this would be much appreciated! Thanks!

Mr Smith
Graduate
Joined: Jul 29, 2004
Posts: 150
Loc: Birmingham, England
Status: Offline

October 4th, 2004, 4:24 am

chickenbak,

no offense, but this code is pretty ugly and OTT for what you're trying to create....was it created using (bare with me, don't like saying these words) dreamweaver or frontpage?

there's so many unnecessary div and table tags flying around it's untrue....i suggest you scrap that and start over with your own hand writing the code....it's just too painful to have to look through all that code to find out the problem.....is there meant to be somthing in that footer div? it's empty......

chickenbak
Novice
Joined: Oct 03, 2004
Posts: 21
Status: Offline

October 4th, 2004, 8:09 am

I used GoLive, but I handwrote the code, and are you sure we are looking at the same code, because there is only one table in the whole page...

Also, there are not too many divs if you break it down, there is a parent div for the layoutHeader, there is a parent div for the layoutBody, and a parent div for the layoutFooter, and then in the body, and div for each column, and then a div for each section, absolutely no more than that...the reason I have chosen to do it this way is because everything has to be "liquid" in the sense that the header won't always be that size, since the img will change, the body must be able to expand, and all three columns should be able to be moved independantly, since later they will be dynamic and modular...and the footer should move below the body.

If you have a better way of doing this, I would like suggestions, because I see no "superflous" divs (I wrote it myself), and I firmly believe you just didn't take the time to actually look at the code, you just opened it and started blathering about useless tables and divs, and then stated it was over the top instead of actually trying to help me out. I wrote every div in there, and every css code with a direct purpose...so what am I doing wrong?

Mr Smith
Graduate
Joined: Jul 29, 2004
Posts: 150
Loc: Birmingham, England
Status: Offline

October 4th, 2004, 8:48 am

chickenbak wrote:

Code: [ Select ]

                        </div>
                    </div>
                </div>
                <div id="layoutMainFooter">
                    <div class="elementDivider">

                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

</div>
</div>
</div>
<div id="layoutMainFooter">
<div class="elementDivider">
</div>
</div>
</div>
</div>
</body>
</html>

the two div tags above (footer and elemnt divider) are empty....which is a bit weird, as if they contain nothing what is the point of them?

the reason i asked if you used a generator is because your code looks like it was generated....there are too many common pieces of code being repeatedly called when there's just no need, and the table is also needless, as you could use an absolute div with z-index for that job.

anyways....enough about code.....could you possibly post a link to this page? it would be far easier to work out what's going on in there than looking through the code.

chickenbak
Novice
Joined: Oct 03, 2004
Posts: 21
Status: Offline

October 4th, 2004, 9:21 am

Sure, not a problem...I apologize if I seemed a little harsh...the initial page was generated with GoLive, but all the "innards" are mine, the only thing that was generated was the typical "header".

You are correct, the footer is empty, just because I haven't placed anything within them, do you think that might be the cause? When you say there are common pieces of code that are repeatedly called, which ones are you referring to? I by no means am an expert, so anything you can tell me to help educate me would be great!

The reason I used the table is just because its easy to create the table, and then give a background URL. I use the "negative background-position" method of rollovers, I suppose using divs would be just as well...

This is the page in action, still haven't placed anything in the footer, but I will...thanks for your help!

http://fivestates.planningphase.com/about.php

chickenbak
Novice
Joined: Oct 03, 2004
Posts: 21
Status: Offline

October 4th, 2004, 9:22 am

P.S. It works beautifully in IE, looks OK in Opera, except for on the right, the column2body doesn't expand with the text, but in Mozilla, it goes crazy, and the footer won't stay beneath the layoutBody!

Mr Smith
Graduate
Joined: Jul 29, 2004
Posts: 150
Loc: Birmingham, England
Status: Offline

October 4th, 2004, 10:20 am

a couple of quick suggestions;

in mozilla, the reason the column to the right is not working as it should is because when specifying absolute divs, you need to set the height of the div's content. i think it may be this bit of code (though it could be the wrong column, basically is the main column on the right that contains most of the content):

Code: [ Select ]

#layoutMainBodyColumn3 { position: absolute; top: 0; left: 560px; width: 199px !important; width: 200px; border-left: 1px solid #fff }

you need to put a height in there, and the bit below (column 'five states news') will then start to go down until you enter the correct pixel height.....it's a pain, i know, as you literally have to figure the exact height out.....but that solves that one anyway

as regards the footer problem,

i think this may be because of a couple of things:
1. in the header, for the 'about' and 'contact' links (*side note, these should be in one div btw not two) the class is 'elemntdivider'

2. in the footer at the bottom, you have declared that as being relatively positioned. but, becuase this div contains the 'elemntdivider' class, as per the header, it is being positioned relative to the header div (in other words, below it)

you could solve this by renaming the footer class, or placing the whole div after the other div tags have been closed (i.e, not within the main layout body or whatever div it is contained in)

this should now work hopefully.....

i must say though, even though your site can be done in divs, i still pretty much use tables for multiple columns like those you have because it's easier, and they all scroll together instead of messing about with div positions and heights and stuff.....thats just personal preference though, but for that kind of job it would be easier than having divs contained inside other divs, which are contained inside other divs.....etc....

Quote:

When you say there are common pieces of code that are repeatedly called, which ones are you referring to?

common things like font-size, color, family, certain divs with equal props (say for example the same widths, borders etc.) can be grouped together, so instead of writing

Code: [ Select ]

.div1 {background-color:#666;font-family:verdana, arial, sans-serif, helvetica;font-size:12px;font-weight:bold;text-align:center;}

.div2 {background-color:#777;font-family:verdana, arial, sans-serif, helvetica;font-size:12px;font-weight:bold;text-align:left;}

.div3 {background-color:#888;font-family:verdana, arial, sans-serif, helvetica;font-size:12px;font-weight:bold;text-align:right;}

.div1 {background-color:#666;font-family:verdana, arial, sans-serif, helvetica;font-size:12px;font-weight:bold;text-align:center;}
.div2 {background-color:#777;font-family:verdana, arial, sans-serif, helvetica;font-size:12px;font-weight:bold;text-align:left;}
.div3 {background-color:#888;font-family:verdana, arial, sans-serif, helvetica;font-size:12px;font-weight:bold;text-align:right;}

you could write

Code: [ Select ]

* {font-family:verdana, arial, sans-serif, helvetica;font-size:12px;text-align:center;}

.div1, div2, div3
{font-weight:bold;background-color:#666;padding-left:5px;}

.div2 {background-color:#777;text-align:left;}
.div3 {background-color:#888;text-align:right;}

* {font-family:verdana, arial, sans-serif, helvetica;font-size:12px;text-align:center;}
.div1, div2, div3
{font-weight:bold;background-color:#666;padding-left:5px;}
.div2 {background-color:#777;text-align:left;}
.div3 {background-color:#888;text-align:right;}

the * means all, so basically every block of text will contain those properties, unless you declare otherwise in a specified tag.

the comma seperated divs are there to say that all those divs contain those props, so no need to declare them individually as per the first code example above. then, to specify certain props for the individual divs, you declare them seperately.

hope this helps.

chickenbak
Novice
Joined: Oct 03, 2004
Posts: 21
Status: Offline

October 4th, 2004, 10:36 am

Thanks a million for your help, turns out the reason that body was not being forced longer was because I had a height tag that should have been deleted, I didn't notice it until you said something.

In regards to the footer, I was not aware that css would render based on class rather than location of div...that is interesting, do you have any documentation on this effect, I definitely want to read up on it, so I don't make that same mistake again!

I am going to take your suggestion to consolidate code to heart, although I am so indecisive, my css code is rarely the same for 3 minutes, so I probably should do it after I am completely done then during, as it will only confuse the matter! Thanks a million for your help, I sincerely appreciate it!

neksus
Mastermind
Joined: Sep 10, 2004
Posts: 2194
Loc: Canada
Status: Offline

October 4th, 2004, 10:36 am

Ahhhhh attack of the divs!

chickenbak
Novice
Joined: Oct 03, 2004
Posts: 21
Status: Offline

October 4th, 2004, 10:42 am

Also, the reason I put the two divs for the links in the top "divider" is because there is eventually going to be a dynamic number links on there, should I just output it with nbsps instead of putting them in padded divs? It seemed to me that the padded div approach would be more "correct"...per se...

Also, after looking at it in depth, do you still think I have too many divs? If so, which ones do you think I should get rid of? Thanks to everyone for their help!

chickenbak
Novice
Joined: Oct 03, 2004
Posts: 21
Status: Offline

October 4th, 2004, 10:49 am

I just made the changes to the footer, and it went even crazier in Mozilla....perfect in Opera and IE, but crazy in Mozilla, the footer stretches across the whole page from top to bottom now...

http://fivestates.planningphase.com/about.php

neksus
Mastermind
Joined: Sep 10, 2004
Posts: 2194
Loc: Canada
Status: Offline

October 4th, 2004, 10:59 am

That's because Mozilla is the only thing rendering your CSS correctly.
In your CSS, you have:

Code: [ Select ]

#layoutMainFooter { background-color: #300; position: relative; bottom: 0; width: 100%; height: 22px }

Positioning relative to what? Also, bottom is not a valid tag. I believe only top and left can be used.

Mr Smith
Graduate
Joined: Jul 29, 2004
Posts: 150
Loc: Birmingham, England
Status: Offline

October 4th, 2004, 11:04 am

even then, position:relative means exactly that; relative to what comes before it in the html.

try putting your footer tag outside the other closing div tags

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

October 4th, 2004, 11:04 am

1, 2

To Reply to this topic you need to LOGIN or REGISTER. It is free.

Post Information

Total Posts in this topic: 27 posts
Users browsing this forum: No registered users and 152 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

Relative Positioning Problem of 3 main layout divs

Post Information

Sponsored Links

Other Languages

Website Development

Graphics

OS & Hardware

Internet Marketing

Marketplace

Community Area

Ozzu Maintenance

Forum Network

Forum Partners

Other Information