Relative Positioning Problem of 3 main layout divs

  • chickenbak
  • Novice
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

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><!-- #BeginEditable "Title" -->Site<!-- #EndEditable --></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">
                            <!-- #BeginEditable "C2HeaderImage" -->
                            <img src="images/elementMainBodyColumn2HeaderImage.jpg" alt="" name="HeaderImage" border="0" /></div>
                            <!-- #EndEditable -->
                        <div id="elementMainBodyColumn2Title">
                            <!-- #BeginEditable "C2Title" -->
                            C2Title / Change Me
                            <!-- #EndEditable -->
                        </div>
                        <div id="elementMainBodyColumn2Body">
                            <!-- #BeginEditable "C2Body" -->
                            C2Body / Change Me
                            <!-- #EndEditable -->
                        </div>
                        <div id="elementMainBodyColumn2Address">
       Address
                        </div>
                    </div>
                    <div id="layoutMainBodyColumn3">
                        <div id="elementMainBodyColumn3Title1">
                            Login
                        </div>
                        <div id="elementMainBodyColumn3Body1">
                            Login Form
                        </div>
                        <div id="elementMainBodyColumn3Title2">
                            <!-- #BeginEditable "C3Title2" -->
                            C3Title2 / Change Me
                            <!-- #EndEditable -->
                        </div>
                        <div id="elementMainBodyColumn3Body2">
                            <!-- #BeginEditable "C3Body2" -->
                            C3Body2 / Change Me
                            <!-- #EndEditable -->
                        </div>
                        <div id="elementMainBodyColumn3Title3">
                            <!-- #BeginEditable "C3Title3" -->
                            C3Title3 / Change Me
                            <!-- #EndEditable -->
                        </div>
                        <div id="elementMainBodyColumn3Body3">
                            <!-- #BeginEditable "C3Body3" -->
                            C3Body3 / Change Me
                            <!-- #EndEditable -->
                        </div>
                    </div>
                </div>
                <div id="layoutMainFooter">
                    <div class="elementDivider">
                        
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
  6.         <title><!-- #BeginEditable "Title" -->Site<!-- #EndEditable --></title>
  7.         <link href="css/css.css" rel="stylesheet" type="text/css" media="all"/>
  8.     </head>
  9.     <body>
  10.         <div id="layoutPage">
  11.             <div id="layoutMain">
  12.                 <div id="layoutMainHeader">
  13.                     <div id="elementMainHeaderLogo">
  14.                         <img src="images/elementMainHeaderLogo.gif" alt="" width="331" height="50" border="0"/>
  15.                     </div>
  16.                     <div id="layoutMainHeaderDivider">
  17.                         <div class="elementDivider">
  18.                             <a class="elementDivider" href="contactus.html">contact us</a>
  19.                         </div>
  20.                         <div class="elementDivider">
  21.                             <a class="elementDivider" href="aboutus.html">about us</a>
  22.                         </div>
  23.                     </div>
  24.                 </div>
  25.                 <div id="layoutMainBody">
  26.                     <div id="layoutMainBodyColumn1">
  27.                         <table>
  28.                             <tr>
  29.                                 <td class="layoutMainBodyColumn1Nav">Home</td>
  30.                             </tr>
  31.                             <tr>
  32.                                 <td class="layoutMainBodyColumn1Nav">About Us</td>
  33.                             </tr>
  34.                             <tr>
  35.                                 <td class="layoutMainBodyColumn1Nav">Property Acquisitions</td>
  36.                             </tr>
  37.                             <tr>
  38.                                 <td class="layoutMainBodyColumn1Nav">Asset Management</td>
  39.                             </tr>
  40.                             <tr>
  41.                                 <td class="layoutMainBodyColumn1Nav">Limited Partnerships</td>
  42.                             </tr>
  43.                         </table>
  44.                     </div>
  45.                     <div id="layoutMainBodyColumn2">
  46.                         <div id="elementMainBodyColumn2HeaderImage">
  47.                             <!-- #BeginEditable "C2HeaderImage" -->
  48.                             <img src="images/elementMainBodyColumn2HeaderImage.jpg" alt="" name="HeaderImage" border="0" /></div>
  49.                             <!-- #EndEditable -->
  50.                         <div id="elementMainBodyColumn2Title">
  51.                             <!-- #BeginEditable "C2Title" -->
  52.                             C2Title / Change Me
  53.                             <!-- #EndEditable -->
  54.                         </div>
  55.                         <div id="elementMainBodyColumn2Body">
  56.                             <!-- #BeginEditable "C2Body" -->
  57.                             C2Body / Change Me
  58.                             <!-- #EndEditable -->
  59.                         </div>
  60.                         <div id="elementMainBodyColumn2Address">
  61.        Address
  62.                         </div>
  63.                     </div>
  64.                     <div id="layoutMainBodyColumn3">
  65.                         <div id="elementMainBodyColumn3Title1">
  66.                             Login
  67.                         </div>
  68.                         <div id="elementMainBodyColumn3Body1">
  69.                             Login Form
  70.                         </div>
  71.                         <div id="elementMainBodyColumn3Title2">
  72.                             <!-- #BeginEditable "C3Title2" -->
  73.                             C3Title2 / Change Me
  74.                             <!-- #EndEditable -->
  75.                         </div>
  76.                         <div id="elementMainBodyColumn3Body2">
  77.                             <!-- #BeginEditable "C3Body2" -->
  78.                             C3Body2 / Change Me
  79.                             <!-- #EndEditable -->
  80.                         </div>
  81.                         <div id="elementMainBodyColumn3Title3">
  82.                             <!-- #BeginEditable "C3Title3" -->
  83.                             C3Title3 / Change Me
  84.                             <!-- #EndEditable -->
  85.                         </div>
  86.                         <div id="elementMainBodyColumn3Body3">
  87.                             <!-- #BeginEditable "C3Body3" -->
  88.                             C3Body3 / Change Me
  89.                             <!-- #EndEditable -->
  90.                         </div>
  91.                     </div>
  92.                 </div>
  93.                 <div id="layoutMainFooter">
  94.                     <div class="elementDivider">
  95.                         
  96.                     </div>
  97.                 </div>
  98.             </div>
  99.         </div>
  100.     </body>
  101. </html>
  • chickenbak
  • Novice
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

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 }
  1. #layoutPage /* Main layout div, covers whole page */  { background-color: aqua; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100% }
  2. #layoutMain /* Layout div for actual content */   { background-color: white; text-align: left; margin: auto; top: 0; width: 760px; height: 100% }
  3. #layoutMainHeader  { position: relative; width: 100% }
  4. #layoutMainHeaderDivider { background-color: #300; text-align: right; position: static; width: 100%; height: 22px }
  5. a.elementDivider { color: white; font-size: 8pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; background-color: #300; padding: 4px; float: right }
  6. .elementDivider { background-color: #300 }
  7. #layoutMainBody { position: relative; top: 1px; width: 100% }
  8. #layoutMainBodyColumn1  { font-family: Verdana, Arial, Helvetica, sans-serif; margin: auto; position: absolute; top: 0; left: 0; width: 159px; border-right: 1px solid #fff }
  9. .layoutMainBodyColumn1Nav { font-size: 12px }
  10. #layoutMainBodyColumn2 { position: absolute; top: 0; left: 160px; width: 400px; float: right }
  11. #elementMainBodyColumn2HeaderImage { position: relative; height: 125px }
  12. #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 }
  13. #elementMainBodyColumn2Body    {}
  14. #elementMainBodyColumn2Address     { color: #999; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; position: relative }
  15. #layoutMainBodyColumn3 { position: absolute; top: 0; left: 560px; width: 199px !important; width: 200px; border-left: 1px solid #fff }
  16. #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 }
  17. #elementMainBodyColumn3Body1 { background-color: #ddd; position: relative; height: 105px }
  18. #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 }
  19. #elementMainBodyColumn3Body2 { background-color: #eee; padding: 10px; position: relative; height: 55px }
  20. #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 }
  21. #elementMainBodyColumn3Body3 { background-color: #eee; padding: 10px; position: relative }
  22. #layoutMainFooter { background-color: #300; position: relative; bottom: 0; width: 100%; height: 22px }
  • chickenbak
  • Novice
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

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
  • Graduate
  • Mr Smith
  • Posts: 150
  • Loc: Birmingham, England

Post 3+ Months Ago

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
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

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
  • Graduate
  • Mr Smith
  • Posts: 150
  • Loc: Birmingham, England

Post 3+ Months Ago

chickenbak wrote:
Code: [ Select ]
                        </div>
                    </div>
                </div>
                <div id="layoutMainFooter">
                    <div class="elementDivider">
                        
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>
  1.                         </div>
  2.                     </div>
  3.                 </div>
  4.                 <div id="layoutMainFooter">
  5.                     <div class="elementDivider">
  6.                         
  7.                     </div>
  8.                 </div>
  9.             </div>
  10.         </div>
  11.     </body>
  12. </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
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

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
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

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
  • Graduate
  • Mr Smith
  • Posts: 150
  • Loc: Birmingham, England

Post 3+ Months Ago

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 8)

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)

8)

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;}
  1. .div1 {background-color:#666;font-family:verdana, arial, sans-serif, helvetica;font-size:12px;font-weight:bold;text-align:center;}
  2. .div2 {background-color:#777;font-family:verdana, arial, sans-serif, helvetica;font-size:12px;font-weight:bold;text-align:left;}
  3. .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;}
  1. * {font-family:verdana, arial, sans-serif, helvetica;font-size:12px;text-align:center;}
  2. .div1, div2, div3
  3. {font-weight:bold;background-color:#666;padding-left:5px;}
  4. .div2 {background-color:#777;text-align:left;}
  5. .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
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

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
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

Ahhhhh attack of the divs!
  • chickenbak
  • Novice
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

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
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

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
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

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
  • Graduate
  • Mr Smith
  • Posts: 150
  • Loc: Birmingham, England

Post 3+ Months Ago

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
  • chickenbak
  • Novice
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

Relative to its inherant position, which should be below the body div...given the natural flow of the divs, and how they are rendered, the default "relative" position should be right below the body div.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

But why declare it's position as 'relative' if you aren't gonna move it? Just skip it out entirely.
  • chickenbak
  • Novice
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

Because I was going to do a relative top 1px to create a border at the top, instead of declaring the border directly...
  • chickenbak
  • Novice
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

I moved it outside of the "layoutMain" parent div...this is the heiarchy of divs..

layoutPage (the "background of the page" )
layoutMain (the actual body parent div)
layoutHeader (Header div)
layout Body (Body div)
layoutFooter (Footer div)


I have moved the footer so that layoutPage is the parent div of layoutFooter...now it is even a little more weird...

http://fivestates.planningphase.com/about.php
  • chickenbak
  • Novice
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

I reverted it back to inside the layoutBody div, and took off the "relative" attribute, now it seems like all it did was change the "zindex"...since now it is in the back...
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

Man that is weird. Your source is just hard to follow, not sure why. Try moving the footer down 1 more div.
  • chickenbak
  • Novice
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

Done, it is now in the layoutPage div, which is the div for the whole site, not the div for content...

If I move it down a div, and outside of the "layoutBody" div, it just places the div in the middle of the page, and makes it 100% of the screen...as you can see...


I just don't understand why it is just stretching it all the way heightwise when it is in the layoutBody div...
  • chickenbak
  • Novice
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

http://jigsaw.w3.org/css-validator/vali ... medium=all

Everything is validated, and compliant, but Firefox is still not liking it...any other suggestions?

http://fivestates.planningphase.com/about.php is the page

any suggestions :(
  • Mr Smith
  • Graduate
  • Graduate
  • Mr Smith
  • Posts: 150
  • Loc: Birmingham, England

Post 3+ Months Ago

chickenbak wrote:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ffivestates.planningphase.com%2Fabout2.php&usermedium=all

Everything is validated, and compliant, but Firefox is still not liking it...any other suggestions?

http://fivestates.planningphase.com/about.php is the page

any suggestions :(


remember though, that validation doesn't mean that the page will display as it should, it just means all the tags are closed correctly etc.

btw, i've just viewed the site in firefox, and it looks like you've managed to bring the footer down....the only problem now, is that you need to change the background color of the main and left menu to white as it's showing in red.
  • chickenbak
  • Novice
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

The problem is, that is actually the footer stretching up to the header, not the background actually being red...I don't know what else to do :(
  • Airnutz1
  • Born
  • Born
  • Airnutz1
  • Posts: 2

Post 3+ Months Ago

You should really clean up your code, you would have FAR fewer problems. Try making your .css a little easier to read. You'd be suprised how much easier things will be once your consolidate and simplify.
  • chickenbak
  • Novice
  • Novice
  • chickenbak
  • Posts: 21

Post 3+ Months Ago

Airnutz1 wrote:
You should really clean up your code, you would have FAR fewer problems. Try making your .css a little easier to read. You'd be suprised how much easier things will be once your consolidate and simplify.



In what ways should the code be simplified, someone said that before, and I believe they concured that the divs were all for the most part necessary. Reason being is, it isn't a static page, and thus everything needs to move around each other if there is more content...thus you have "aggregate section divs" as well as the content divs themselves. If you have an example of how I can "clean up the code" than please give it.

As far as simplifying the css, that was already discussed as well.

Post Information

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

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