Space below footer

HTML & CSS
1

Hi everyone,
I’m new to the forum and I’m in need of some assistance. I’m a graphic designer, so I’m not too great with web design. I built a page in Fluxv3 and when I publish the page, there’s quite a but of space below the footer. When I open the page in dreamweaver, the wrapper is shows as 1000x(1612px) which I’m assuming is the cause for the extra space below the footer. Any ideas/suggestions on how I can fix this?

http://hhs02reunion.com/test

here’s the html:

<html><head>
<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8” >
<meta name=“author” content=“Flux User” >
<meta name=“description” content=“My Website” >
<meta name=“keywords” content=“Flux, Mac” >
<title>Hermitage High School Class of 2002 || 10-year Class Reunion</title>
<link href=“main.css” rel=“stylesheet” media=“screen” type=“text/css” ></head>
<body id=“body_main” >

<div id=“main_wrapper” ><div id=“main_top_banner” flux:locked=“true” ></div><div style=“position:relative; width:800px; height:20px; " ></div><div id=“main_image” flux:locked=“true” ></div><div style=“position:relative; width:800px; height:20px; left:0; top:2px; " flux:locked=“true” ></div><div id=“main_menu” ><img src=“images/navigation/nav_select_01.png” alt=”” ><img src=“images/navigation/nav_deselect_02.png” alt=“” ><img src=“images/navigation/nav_deselect_03.png” alt=“” ><img src=“images/navigation/nav_deselect_04.png” alt=“” ><img src=“images/navigation/nav_deselect_05.png” alt=“” ></div><div style=“position:relative; width:800px; height:20px; left:0; top:5px; " flux:locked=“true” ></div><div id=“main_left_content” ><img src=“images/header_buttons/red_buttons_02.jpg” alt=”" ></div><div id=“main_footer” style=“background-color:#0B0068; " ><br>HOME || REUNION || GALLERY || IN MEMORIAM || CONTACT US<br><br>Site designed by Shannon Williams of Ryano Graphics</div><div style=“position:relative; width:800px; height:20px; left:1px; top:-60px; " flux:locked=“true” ></div><div id=“main_right_content” ><img src=“images/header_buttons/red_buttons_06.jpg” alt=”” ><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><img src=“PastedObjects/red_buttons_08.jpg” alt=“” ></div></div></body></html>

and here’s the css:
#body_main {
background-image:url(images/js_woodslats.jpg);
max-height:inherit;
left:0;
top:-5px;
}

#main_right_content {
position:relative;
left:555px;
top:-602px;
background-color:#FFFFFF;
padding-left:10px;
padding-bottom:10px;
padding-right:10px;
height:510px;
width:225px;
}

#main_left_content {
position:relative;
left:0;
top:8px;
background-color:#FFFFFF;
height:505px;
width:501px;
padding:0px 15px 15px 15px;
}

#main_footer {
position:relative;
font-family:Arial;
color:#7D7E81;
font-size:8pt;
text-align:center;
padding:inherit;
height:50px;
width:800px;
padding-bottom:10px;
padding-top:10px;
left:0;
top:32px;
}

#main_menu {
position:relative;
width:800px;
height:106px;
left:0;
top:3px;
background-color:rgba(255,255,255,0.75);
}

#main_image {
position:relative;
width:800px;
height:190px;
left:0;
top:1px;
background-image:url(images/slideshow/herm.jpg);
}

#main_wrapper {
position:relative;
float:none;
margin-left:auto;
margin-right:auto;
display:block;
left:1px;
top:49px;
width:800px;
height:1000px;

}

#main_top_banner {
position:relative;
width:800px;
height:150px;
background-image:url(images/main_banner.jpg);
}

.mystyle {
}

2

Welcome to Sitepoint.
And thank you for posting a concise, legible, specific question including all the code.

When I viewed your site (in Chrome and Safari) I don’t see any space below the footer.
Are you referring to the line height of the text IN the footer? The space between rows of text there?

For future reference, you can wrap the code in BBCode tags to make it more readable.

3

I love it when site-creation sites include their own website into the metadata :smiley:

Like ParkinT, I can’t see any space below the footer (in Chrome).

If you want to decrease the line height, you can just delete a single <br> tag above your name.

Edit - I just plugged it in to IE8 and saw exactly what you see. I can’t, at this moment, diagnose what’s wrong. My gut instinct is the obscene amount of <br /> tags that are in place and are used for spacing. Try deleting those first. I would try, but I don’t have your images.

Code:

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <meta name="author" content="Flux User" />
      <meta name="description" content="My Website" />
      <meta name="keywords" content="Flux, Mac" />
      <title>Hermitage High School Class of 2002 || 10-year Class Reunion</title>
      <link href="main.css" rel="stylesheet" media="screen" type="text/css" />
   </head>
   <body id="body_main">
      <div id="main_wrapper">
         <div id="main_top_banner" flux:locked="true"></div>
         <div style="position:relative; width:800px; height:20px; "></div>
         <div id="main_image" flux:locked="true"></div>
         <div style="position:relative; width:800px; height:20px; left:0; top:2px; " flux:locked="true"></div>
         <div id="main_menu"><img src="images/navigation/nav_select_01.png" alt="" /><img src="images/navigation/nav_deselect_02.png" alt="" /><img src="images/navigation/nav_deselect_03.png" alt="" /><img src="images/navigation/nav_deselect_04.png" alt="" /><img src="images/navigation/nav_deselect_05.png" alt="" /></div>
         <div style="position:relative; width:800px; height:20px; left:0; top:5px; " flux:locked="true"></div>
         <div id="main_left_content"><img src="images/header_buttons/red_buttons_02.jpg" alt="" /></div>
         <div id="main_footer" style="background-color:#0B0068; "><br />HOME || REUNION || GALLERY || IN MEMORIAM || CONTACT US<br />Site designed by Shannon Williams of Ryano Graphics</div>
         <div style="position:relative; width:800px; height:20px; left:1px; top:-60px; " flux:locked="true"></div>
         <div id="main_right_content"><img src="images/header_buttons/red_buttons_06.jpg" alt="" /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><img src="PastedObjects/red_buttons_08.jpg" alt="" /></div>
      </div>
   </body>
</html>

Good luck.
~TehYoyo

Edit: I’m sure the rest of the members will enjoy the formatted code much better than the original version :smiley:

4

Thanks for your help guys. I deleted the breaks, but to no avail. I dont have IE on my computer, but it does show the space below the footer in Firefox. Safari web and mobile versions do not show the spacing. Any other suggestions?

5

Hi,

The space below the footer is because you have dragged the right column back upwards using relative positioning.


#main_right_content {
    background-color: #FFFFFF;
    height: 510px;
    left: 555px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    top: -602px;
    width: 225px;
}

Relative positioning is not meant for that type of structural layout and I am going to sound a bit like a schoolteacher but "don’t do it again " :slight_smile:

When you move something with position:relative you only move it visually not physically. It always occupies the same place in the flow that it always did. It’s like tearing an article out of a newspaper and sticking at the top of the newspaper but there’s always going to be a big hole in the page where you ripped the article out. The space that the element originally occupied is always preserved. Relative positioning is generally use for more subtle effects where you want to move something but not change the flow of the document or want elements to overlap.

In essence you will rarely use relative positioning unless you are doing advanced layouts (although you will need position relative without co ordinates to create stacking context for z-index and absolutely placed children.)

It’s never a good idea anyway just to drag something back up to fit because if you have more content or the text is resized then it will never fit. You should just float both those columns with appropriate width and then they will line up side by side without having to do anything special. Of course tha means changing the html into the correct structure as those left and right columns will need to follow each other in the html and then you would have the html for the footer which would be set to clear:both and will clear the floated columns.

Also avoid applying heights everywhere especially to content that will hold text content unless you are plainning to control the overflow with scrollbars everywhere. You can used heights for fixed height elements such as banners and images etc but for real content such as fluid text you will rarely set a height. If you do need a height then use min-height and the page can grow.

6

Thanks Paul O’B! I had to read over your comments about 3 times because I was totally lost (I should probably stick to print design lol). After the 3rd read, I finally understood and was able to figure it out! I reordered the html structure and floated the divs and waahla, it’s fixed! Thanks a bunch for your help, it is greatly appreciated!!

http://hhs02reunion.com/test

7

I’d be happier for you if it actually changed something in Google Chrome :stuck_out_tongue:

Paul, what does absolute positioning do? I’ve heard people don’t like to use it…why? If I put it into a container div, will it stay inside?

~TehYoyo

8

Glad you sorted it :slight_smile: I would have given you the code but I was in a hurry but in the end you learned more this way.

Absolute positioning removes the element from the flow. That means it no longer takes part in what ever else is going on around it. The only thing it takes note of of is “where is my positioned parent?”. Any other interaction with the page is non existent and indeed impossible.

An absolute element bases its position (when co ordinates are used) on the nearest parent element that has a value for the “position” property other than static (i.e. position:relative or position:absolute). If no parent (or ancestors) of the absolute element is either position:relative or position:absolute then the co-ordinates are taken from the initial containing block - effectively the viewport.

Therefore if you want to place something absolutely within a specific div you would apply position:relative to the div and then the absolute child will be placed in relation to that parent. If the div moves then so does the absolute child. However the absolute child still takes no place in the flow and will sit on top of anything that happens to get in the way.

Lastly if you make an element position:absolute and don’t provide co-ordinates then it becomes removed from the flow at that exact point it would have been had it been in the flow.However without co-ordinates older IE versions ( 6 and 7) will also take text-align into account and a text-align:center on a parent would make the absolute element appear more to the right than in other browsers.

The reason that absolute positioning is frowned on for structural mark up is easily explained in the case of a two column layout. You can easily create 2 absolute columns to hold your text content but it is then impossible to place a footer under both columns (unless you fix the height of both columns which is undesirable). Absolute elements are useful in small doses where you want to overlay things or position odd elements inside fixed height containers that are already holding the flow of the page. Hope that answers the question :slight_smile:

9

Quite well, thank you :slight_smile:
~TehYoyo

10

Excellent description, Paul. Thanks for clarifying something that - although seemed to make sense whenever I read it in a document - has always puzzled me with (what seemed to be) unpredictable behavior in practice.

11

Never heard of ‘flux’ – and I’m surprised the respondents so far failed to mention it, but you have no doctype. No doctype line a the start of your markup means ALL browsers are in ‘quirks mode’ … a compatibility mode for old code that pretty much guarantees you’ll NEVER get it looking the same across browsers.

Whatever this ‘flux’ is, the lack of semantic markup, the use of image tags for presentational images, and whole host of other issues means that like most other ‘tools’ – it’s leading you down the garden path with outdated methodologies. I’d suggest grabbing a decent HTML/CSS book (like Ian Lloyds), grabbing a plain text editor, and starting over without any of this ‘flux’ or ‘dreamweaver’ nube predation.

As the only thing you can learn from those types of tools is how NOT to build a website. Don’t feel bad, that’s not a slight against you; we all start somewhere. The problem is these ‘tools’ make you THINK you can do it, without actually learning it… and like most shortcuts they bite you in the long run.

More true of those that cost money – in fact it often seems the more they cost, the worse it gets.

12

Yikes!! I do plan to learn html/css from the beginning but since I was thrown into the project, I had to work from what I had. It does have an option to set the doctype, I just missed it. Thanks for the info!

13

Yes I meant to mention the doctype and got sidetracked with my other point :slight_smile: You must have a current valid doctype or all bets are off.