CSS - How To Cover The Entire Width Of The Screen?

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.

Hi, is there anyway to make the horizontal menu on the top of the webpage fit the entire width of the screen along with the titlebar? I mean, irrespective of the number of menu items, the menu should be exactly as wide as the screen.

Thanks.

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.

Hang on to this post, I have found a couple of answers, so will post again when i get stuck!


Charlie

I've been working on a CSS style for a web site, and I've got a small issue with the right hand column not staying within the bounds of the screen. When using a tool to see where the div's borders the right is about 200 px going off the right of the screen, making the screen horizontally scrolling.

I am not a CSS expert. I know enough to get around, but this I don't understand.

(I might have posted too much, but I figured if someone needed something more, it's already all there.)

Thanks for any assistance that can be provided.

HTML
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Experience Inc. - Warren and Forest Counties Office of Aging</title>
<link href="css/grey_style.css" rel="stylesheet" type="text/css">
</head>
<body>
	
	<div id="header">
		<span style="float:left;">
			<img src="images/logo.gif" />			
		</span>
		<span style="float:right;">
			<div style="text-align:center">
				<div id="outerFirst"><a href="index.php"><span>Home</span></a></div>
				<div id="outerFirst"><a href="index.php"><span>Services</span></a></div>
				<div id="outerFirst"><a href="index.php"><span>Senior Centers</span></a></div>
				<div id="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div>
				<div id="outerFirst"><a href="index.php"><span>Trips / Events</span></a></div>
				<div id="outerFirst"><a href="index.php"><span>About / Contact</span></a></div>
			</div>						
		</span>
	</div>
<div class="CellBackGround">
	<table width="100%">
		<tr>
			<td>&nbsp;</td>
		</tr>
	</table>
</div>
<div id="pictureContainer">
	<div id="largeHomeText">
		Warren and Forest Counties Area Agency on Aging
	</div>
	<div class="together">	
			<img src="images/home_image_bar/image1.jpg" />
			<img src="images/home_image_bar/image2.jpg" />				
			<img src="images/home_image_bar/image1.jpg" />			
	</div>
</div>

<div class="CellBackGround">
	
</div>

	<div id="wrapper">
		<div id="content">
			&nbsp;
		</div>
	</div>
	<div id="navigation">
		<p>
		&nbsp;
		</p>
	</div>
	<div id="extra">&nbsp;

        </div>

	<div id="footer">
		<p>This is the footer area. </p>
	</div>

</body>
</html>

CSS
Code:

body {
	font-family: "Times New Roman", Times, serif;
	font-size: 12pt;
	font-style: normal;
	font-weight: normal;
	color:#FFFFFF;
	background-color:#666666;
	margin-left:0;
	margin-top:0;
	margin-right:0;
}

#header {
	width: 100%;
	background-color: #666666;
	overflow:auto;
	vertical-align:top;
	height:auto;
}

#menu {
	height: 54px;
	margin: 3em 0; 
	padding:0 1em;
	border-bottom: 0px solid black;
	overflow:inherit;
}

#outerFirst {
	float: left;
	width: 90px; 
	height: 130px;
	margin: 0 0px 0 0;
	background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
}
	
#outerFirst a {
	cursor: pointer;
	display: block;
	margin: 0; padding:0;
	width:90px; 
	height:54px;
	overflow:hidden;
	font-family: Arial;
	font-size:0.7em;
	font-weight:normal;
	color:#FFFFFF;
	text-decoration: none;
	background: url( '../images/greyFirst.gif' ) top left no-repeat;
}

#outerFirst span {
	height: 54px;
	display: block;
	margin:0; 
	padding: 25px 0px 0px 0px;
	}
#outerFirst a:hover {
	width:90px; 
	height:54px;
	background: url( '../images/greyFirstRoll.gif' ) top left no-repeat;
	color: yellow;
	}
#outerFirst a:active {
	background: url( '../images/greyFirstRoll.gif' ) top left no-repeat;
	}

.CellBackGround {
	height:2px;
	background: url('../images/redPixel.gif') center center;
}
.CellBack2 {
	background: url('../images/redPixel.gif') center center;
}

#pictureContainer {
	width:100%;
	background-color:#666666;	
	overflow:auto;	
	height:95px;
}

#largeHomeText {	
	color:#999999;
	font-size:13pt;	
	float:left;
	padding-top:74px;
	padding-left:3px;
	
}

.together img {  
	padding: 0;	
	margin: 0;	
	border: 0;	
	display: inline; 
	float: right;
	overflow:hidden;
} 

#mainTextContaner {	
	color:#660000;
	margin-left:-5px;
}

#footer {	
	color:#666666;	
}

/* This code is straight from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml */
.bl {background: url(../images/bl.gif) 0 100% no-repeat #FFFFFF; width: 45%;}
.br {background: url(../images/br.gif) 100% 100% no-repeat}
.tl {background: url(../images/tl.gif) 0 0 no-repeat}
.tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

/* This code is straight from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml */
.bl2 {background: url(../images/bl.gif) 0 100% no-repeat #FFFFFF; width: 35%;}
.br2 {background: url(../images/br.gif) 100% 100% no-repeat}
.tl2 {background: url(../images/tl.gif) 0 0 no-repeat}
.tr2 {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}

a:link {
	font-size: 14pt;
	color:#999999;
}

a:hover {
	font-size: 14pt;
	color:#660000;

}
a:visited {
	font-size: 14pt;
	color:#999999;
}

#news {
	background: url(../images/news.jpg) 100% 0 no-repeat;
	width:370px;	
	height:600;	
}
div#wrapper{
	float:right;	
	margin-right:-30%;
	width:99%;
}
div#content{
	margin-right:30%;
	border-left:2px solid #FFFFFF;
	border-left-color:#660000;
	padding-left:10px;
	padding-right:10px;
	height:400px;
	padding-top:10px;	
}
div#navigation{
	float:left;
	width:32.9%;
	padding-top:10px;
}
div#extra{
	float:left;
	clear:left;
	width:32.9%;
	padding-top:10px;
}

p{
	margin:0 10px 10px
}

div#footer{
	clear:both;	
	border-top:2px solid;
	border-top-color:#660000;	
	border-bottom:2px solid;
	border-bottom-color:#660000;
	text-align:left;
	color:#FFFFFF;

}
div#footer p{
	margin:0;
	padding:5px 10px;
	width:10%;
}

Hi - I'm a bit of a noob when it comes to CSS etc. but have been asked to modify some code for someone. Basically it's a simple site that has the main content centered on the screen (about 960px wide). However there is a large banner image that is about 2000px wide that is supposed to stretch as wide as say a large 27" mac. I am not sure if this is the correct way to do it but I guess they couldn't use a smaller image and repeat it because there is a unique design/pattern throughout the whole width. Anyway, on smaller browsers everything looks good except the horizontal scroll bar allows the user to scroll all the way to to the right. Is there anyway to clip the image on the top to prevent the scroll bar from showing based on screen width?

Hope that makes sense. Thanks.

Mistake. Sorry!

I am trying to get the blue box (which is the content container) to be big enough to cover both divs "cbox1" and "cbox2". Right now it only covers the <h1> title and neither of the cboxs. I also need these two cbox's to be side by side instead of on top of or below each other. I can achieve one of these at a time but not both when I play around with the float values of the cbox's.

I would appreciate any help at getting the results I desire. Thanks.

Here is the basic html I am working with.

Code:

<!DOCTYPE html>
<html>
<head>
<style media="screen" type="text/css">
#content {
	margin:0px;
	padding:0px;
	background-color:#90C0FF;
}
#cbox1 {
        border-radius:15px;
	border: 2px solid #000000;
	width:250px;
	background-color:#FFFFFF;
	padding:20px;
	float:left;
}
#cbox2 {
        border-radius:15px;
	border: 2px solid #000000;
	width:200px;
	background-color:#FFFFFF;
	padding:20px;
	margin-left:10px;
	float:left;
}
</style>
</head>
<body>
    <div id="content">

	<h2>LOREM IPSUM:</h2>
	<div id="cbox1">
          "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
	</div>

	<div id="cbox2">
          But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
	</div>

    </div>

</body>
</html>

You can pop this right into try it:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

Hi;

i don't known why background color does not cover over all the boxs in Firefox but IE does, could anyone help, please.

my code as following

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">
<style type="text/css">
html,body{
  padding: 0;
  margin:0;
}


#container {
   position: relative;
   width: 796px; /* width + border for IE 5.x */
   w\idth: 790px; /* real width */
   height: auto;
   border: 0px;
   padding: 0;
   margin-top: 10px;
   margin-bottom:auto;
   margin-left: auto;
   margin-right: auto;
   background-color:#f0f0ec;
}

#wrapper{
 margin: auto;
 border:0;
 padding:0;
 width: 640px;
 height:auto;

}
.box{
 border:0;
 padding:0;
 width:190px;
 height:220px;
 float: left;
 margin-left:15px;
 margin-top:20px;
 background-color:#FFFF99;
 color:#333333;
 text-align:center;
 overflow:scroll;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
//in here i am goning to use while loop to select all the data from database, so i may have 30 boxs, or 50boxs.
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
</div>
</div>

</body>
</html>

Hi,

I am a wannabe css compiler...

Have the following problem.

wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen.

I cannot figure out how to compensate the (top/left) position to cover both type screens...

Anyone help me?

Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.

My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off...

The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view!

My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance....

i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width.
The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu.

here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu.
http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm

Also , i get wierd result in netscape navigator. please help

I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>.

This <div> is nested within another <div> for which I have specified a width of 200px.

So something like:
html4strict Code:
Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div>

  

 <div style="position: relative; width: 200px;">


     <div style="position: absolute; top: 10px; left: 20px; z-index: 100;">


         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris.


     </div>


 </div> 

Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries).

Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px.

Am I doing something wrong? or is there a workaround for this?

I dont think you can wrap a <div> inside <a>, but is there any way to make an entire <div> area "linked" ? One idea - Im sure i can hook up an onclick event with javascript, but how would i change the mouse prompt when the user moves thier mouse over it ?

Hi, I'm trying to make a div in my website take up the entire height of the page, or more if the page is longer.
However when I've managed to get the div the full height of the page, the contents leave the div when it's longer than the page.
I want the div to stretch, but be at least as long as the page.

Here is a simplification of my code as an example:
Code:

<html>
<head>
<style>
.contentdiv{
height: 100%;
width: 758px;
top: 0px;
position: relative;
border: 1px solid #89a9c7;
padding-top: 0px;
padding-bottom: 0px;
border-spacing: 5px;
bottom: auto;
}

.footerdiv
{
position: absolute;
bottom: 0px;
background-color: blue;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<div class="contentdiv">
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />

<div class="footerdiv">a</div>
</div>
</body>
</html>