CSS - Getting Footer To Extend Entire Width Of Browser

hi,

i m trying to design a page with a logo at the top.just like this site.

http://richgirlstore.com/xcart/home.php

but i want the logo to be displayed in a way that it covers the entire width of the browser window when a user opens the page.the screen sizes are different depending on the type of monitor used by people.so how can i fix this problem.thanks...

I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen.

The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content.

Is there a way to get this effect?

Hi,

Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance.

Here is the CSS code and Html code for your reference:

CSS:

Code:

<style type="text/css">

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;


}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}


.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}

.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}

HTML Code:

Code:

<table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;">
	<tr>

		<td background="menubg.jpg" align="center">
		
<div class="horizontalcssmenu" align="center">
<ul>

<li><a href="default.htm">Home</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> 


<li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> 

<li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Service</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">References</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li>

</ul>
</div>
		</td>
	</tr>
</table>

Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated.

Howcome:

html, body {
color: #06F;
background-color: #000;
font-size: 16px;
text-align: center;
width: 768px;
}

Doesn't center the page in the browser? How can I center it?

Output example on my website here.

Hi

i want to have a site with 3 columns a header and a footer where the height of the content and both the columns spreads to fill the page even if there is only a few lines of content.

Also i wanted to have a margin round the page so that the page doesnt fill the screen horizontal.

i cant seem to get it to work correctly

does anyone have an example i can look at?

cheers
Andy

Hello,
im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer.

-Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header

-the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need.

Thanks in Advanced
Samer

I'm using The Man in Blue's "footerStickAlt" code to ensure a footer sticks at the bottom of the page even with *short* content.

No problem there til I resize my browser window. When the browser window shortened and I scroll down, the footer has jumped up and is concealing part of the menu. Yikes.

Pages where the content is longer than the menu are fine, so I haven't uploaded them. It's only when content is shorter than the menu that this issue arises ~ which is the exact issue it's supposed to be tackling!

Flaw/s in the code?

I've already tried ripping out the horizontal min-widths and it seems there's no conflict there. From what I can make out, it's just a matter between the menu and the footer.... altho, when the browser is shortened in the way I've described the actual footer moves higher than it should be. Still, can't believe it's blueman at fault here. Must be something I've missed or tagged wrong. Or maybe it just doesn't work with this kind of menu?

For reference, Blue Man's original code is he http://themaninblue.com/writing/perspective/2005/08/29/

Am just hoping the clever folk here will have some advice. I've burnt the whole day on this to no avail :|

Trying to delete my post but no option to delete so just removing content.

Please see:

http://www.larreamma.com/staff2.html

Is there a better way to expand 'main2' then adding/increasing the 'margin-bottom' of the last (empty) paragraph?

<p style="margin-bottom:150px">&nbsp;</p>

Without it the bottom floated image overlaps 'main2' and meets the footer. This was not an issue on the other pages of the site as the text extended beyond the floated image(s)/elements.


C'mon Kravvitz...

Hi,

I like to know how to extend an existing class.

.footertext50per
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 3px;
WIDTH: 50%;
COLOR: #c1cfe9;
PADDING-TOP: 1px;
}

.footertext50perleft
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 3px;
WIDTH: 50%;
COLOR: #c1cfe9;
PADDING-TOP: 1px;
TEXT-ALIGN: left
}

As you see in the second class "footertext50perleft", the only difference with respect to the first class "footertext50per" is the 'text-align'. This lead to duplication of coded.

I like to know whether it is possible to extend "footertext50per" to "footertext50perleft" and just define the additions or modifications only.

Thanks.

Hello everybody, I present myself, I'm Alessandro a new member from Italy.
I found this forum very useful.
Hope to find good answers following topics and hope to help someone when I'm able to.
Ciaooooo

I have this issue for the moment:

I have a homepage layout with 3 columns with an images and captions inside everyone.
I have a subtitle also, and I want the subtitle extends orizzontally over the div without resizing it and without rollbars.

see a screenshot he http://www.alessandroboselli.it/foto/screenshot.jpg

and here is the involved CSS code:

Code:

/* Homepage layout --- start */
#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 980px;
}

#side-left {
	float: left;
	width: 300px;
}

#center { 
	float: left;
	width: 300px;
}

#side-right {
	float: right;
	width: 380px;
}
/* Homepage layout --- end */


/* Homepage images --- start */
.homepageimage {
	position:relative;
	float:left; /* optional */	
	top:40px;
	-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f');
}
.homepageimage a {
	text-decoration: none;
	float: left;
}
.homepageimage a .homepageimagetitle {
	display: block;
	font-family: 'Molengo', Arial, serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	text-shadow: none;
	text-decoration: none;
	letter-spacing: 0.050em;
	word-spacing: 0em;
	line-height: 1.2;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	color: #fff;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 5px;
	margin: 0;
	width: 190px;
	/*position: absolute;
	right: 20px;
	bottom: 20px;
	filter:alpha(opacity=65);
	opacity:.65;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}

.homepageimage a .homepageimagesub {
  	display: block;
 	font-family: 'Buda', serif;
 	font-size: 22px;
 	font-style: normal;
 	font-weight: 400;
 	text-shadow: none;
 	text-decoration: underline;
 	text-transform: none;
 	letter-spacing: 0.007em;
 	word-spacing: 0em;
 	line-height: 1.15;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	color: #fff;
	position: absolute;
	top: 215px;
	left: 0px;
	padding: 5px;
	margin: 0;
}

I have this problem on and off in different web sites I have designed. Somehow I get around it, however, I really do not understand why I have the problem, and how I solve it.

here is the link:
http://mizuedesign.com/0000.html

in IE7, my #mainContainer extends as I put in some other divs etc. (there is a border around it.)

However in FF, Safari, and Opera the same DIV does not extend.

I am trying to achive the results I see in IE7.

Any help would be greatly appriciated.

S. Boztepe

I've been trying for days to get this to work and nothing i do makes this stupid page extend with the content that i put in. If anyone has any idea's as to why and could point me in the right direction i would very much appreciate it. The link to the site is below, thank you in advance.

hxxp://adrian.briansykes.netau.net/