1. Home
  2. Forums Index
  3. Browser Side / CSS 11:19 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Footer and Code Improvement

         

Saboi

7:24 pm on Jul 15, 2014 (gmt 0)

10+ Year Member



Hello friend,

I had challenges placing on footer within the wrapper DIV. So I placed it outside it which is just so wrong. I need assistance to fitting it within the wrapper DIV. Below is the code.

I am also asking for comments on how to improve the code. From studying Law to Code, major transition,lol 


<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Title</title>

<link href="stylepage.css" rel="stylesheet" type="text/css"/>

</title>

</head>

<body>

<div id="fb-root"></div>
<div id="fb-root"></div>
<div id="fb-root"></div>


<div id = "wrapper">

<div id="top">

<div id = "menuContainer">

<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a>
<ul>
<li><a href="#">Menu 5 sub 1</a></li>
<li><a href="#">Menu 5 sub 2</a></li>
<li><a href="#">Menu 5 sub 3</a></li>
</ul>
</li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Menu 7</a></li>
</ul>

</div><!--menuContainer DIV-->

<div id = "header">

<h2>Some Text Here</h2>

</div><!--End header DIV-->

</div><!--End of TOP Div-->

<div id="leftMenu">

<ul>
<li><a href="#">Left Menu 1</a></li>
<li><a href="#">Left Menu 2</a></li>
<li><a href="#">Left Menu 3</a></li>
<li><a href="#">Left Menu 4</a></li>
<li><a href="#">Left Menu 5</a></li>

</div>

<div id="content">

<p>Welcome!</p>

</div><!--End of Content-->



</div><!--End of Wrapper DIV-->

<div id="footer">

<P>&copy Owner, 2014</p>

</div><!--End of footer-->

</body>

</html>


Here is the CSS file: 


body, div, leftMenu, leftMenu ul, leftMenu li
{
margin:0;
padding:0;
}

#top
{
height: 50px;
position: fixed;
top: 0px;
}

#wrapper
{
width: 900px;
height: 100%;
background-color: pink;
margin-left: 200px;
margin-top: 0px;
}

#header
{
width: 896px;
margin: 0px 0px;
background-color:blue;
color: white;
text-align: right;
padding: 2px 2px 2px 2px;
float: clear;
top: 50px;
padding-top: 20px;
}

#menuContainer
{
height: 30px;
background-color: grey;
position: fixed;
width: 900px;
}

#menuContainer ul
{
list-style: none;
margin:0;
padding: 0;
}

#menuContainer ul li
{
text-decoration: none;
float: left;
width: 120px;
border-right: 1px solid black;
text-align: center;
position: relative;
height: 30px;
line-height: 30px;
}

#menuContainer li ul
{
position: absolute;
top: 30px;
left: 0;
visibility: hidden;
}

#menuContainer li ul li
{
float: none;
/*border-top: 1px solid black;*/
background-color: yellow;
border-bottom: 1px solid black;
border-right: 1px black;
border-left: 1px black;
}

#menuContainer a
{
text-decoration: none;
display: block;
}

#menuContainer li:hover
{
background-color: maroon;
}

#menuContainer li:hover ul
{
visibility: visible;
}

#leftMenu 
{
width: 150px;
background-color: grey;
height: 85%;
float: left;
margin-top: 89px;
margin-left: 0px;
text-align: justify;
border: 0;
padding: 0px;
padding-top: 0px;

}

#leftMenu ul
{
padding: 0px;
height: 30px;
margin:0px;

}

#leftMenu a
{
text-decoration: none;
display: block;
}


#leftMenu ul li
{
text-decoration: none;
list-style: none;
border-bottom: 2px solid black;
background-color: yellow;
border-left: 0px;
text-align: center;
display: block;
line-height:30px;
}

#leftMenu a:hover
{
display: block;
background-color: black;
height: 30px;

}

#Content
{
background-color: green;
width: 730px;
float:left;
padding-left: 20px;
height: auto;
margin-top:89px;

}

#footer
{
float: both;
background-color: black;
height: 30px;
margin-top:0px;
width: 898px;
margin-left: 200px;
color: white;
text-align: center;
line-height: 30px;
}

not2easy

7:58 pm on Jul 15, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Can you move this line: 

</div><!--End of Wrapper DIV-->

to just before the </body tag?

And in #footer, remove: 
float: both;
width: 898px;
margin-left: 200px;


- 
float: both;
isn't doing anything, maybe you want to use 
clear: both;
(?) if there are any floats open from the content preceding it.

- 
width: 898px;
with the footer inside the #wrapper container, the width is limited by the width of the wrapper div.

- 
margin-left: 200px;
Again, the width and position of the #footer div are taken care of by the #wrapper and setting a 200px left margin would leave you with a black box on a pink background divided close to the middle of the footer vertically.

And is there a reason to have only one line that is the entire height of your footer? If not, in #footer css remove: 
height: 30px;

and let the inherited margins take over unless appearance says it needs some other setting.

Note: I didn't view the whole page, but since you asked about fixing the footer, that is the only part I am addressing, here, apologies if there's something I missed.

lucy24

9:56 pm on Jul 15, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



<div id="fb-root"></div>
<div id="fb-root"></div>
<div id="fb-root"></div>

I hope this is just an artifact of posting. You can't have multiple elements with the same id (name, yes, sometimes) -- and why have them at all, if they're empty?

I had challenges placing on footer within the wrapper DIV.

Can you explain this more? What form did the "challenges" take, or what happened when you tried?

not2easy said: 
float: both;

isn't doing anything, maybe you want to use 
clear: both;

(?) if there are any floats open from the content preceding it.

In combination with 
float: clear;

elsewhere in the CSS, it makes me wonder if something got garbled in cutting-and-pasting.

not2easy

9:59 pm on Jul 15, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



OK, I see there were a few things that I missed. A minor fix here - <P>&copy Owner, 2014</p> I'd change that to <p>. I am not familiar with the doctype: <html xmlns:fb="http://ogp.me/ns/fb#"> but usually you would need a ; to use the &copy as in 
&copy;


Your leftMenu is missing a closing </ul tag.

numnum

5:39 pm on Jul 17, 2014 (gmt 0)

10+ Year Member



I just tested your CSS and HTML. Changing float:clear to clear:both in the footer style reveals the footer (which may have been hiding at the top of the page behind one or more other divs). The other issues mentioned by the posters here are unrelated. Perhaps start with a very, very simple CSS framework -- without menus or absolute positioning. Then test it as you build on it -- one element or feature at a time. It's easier to troubleshoot things that way, especially when you're just getting your feet wet in CSS.

Saboi

7:03 pm on Jul 18, 2014 (gmt 0)

10+ Year Member



Hello guys,

Thank you very much. Advise taken. Got the footer in its place using float: clear and that worked just fine.

Guess I may need to go back to the basics.

Cheers!

lucy24

9:06 pm on Jul 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



<topic drift>
usually you would need a ; to use the &copy as in &copy;

You know all those unintentional smileys that moderators are always having to clean up? They arise in part because the closing ; is optional. So 
&)

expands behind the scenes to (space inserted by me) 
&amp; )

which in turn is reanalyzed for smiley purposes as 
&amp ;)

leading to onscreen
&)
because 
&) = &;)

</topic drift>

Got the footer in its place using float: clear

What, if anything, does 
float: clear

mean?

Saboi

7:22 pm on Jul 23, 2014 (gmt 0)

10+ Year Member



A follow-up question guys.

Notice in my code and end product how the left menu and content go right under the header when scrolled down. That is fine. That is how I exactly want it to be.

However, when I embed a Facebook post and scroll down, that content goes above both the header and the top-menu. Any ideas of how this can be corrected?

Thanks.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:19 am May 1, 2026