CSS - Div Expanding Past Fixed Width

going bonkers, I have tried everything to find out why on earth the background goes all the way to the right when this page is viewed in IE..

Black Background Not Stoping!!

Hi there

I have a container DIV that nests 4 DIVs one on top of the next (logo, navigation, content and footer, all the same widths).

If there is a single paragraph (or small amount) of text in the content DIV of the page, the page looks fine.

However, if there is a large amount of text in the content DIV of the page, the width gets pushed out slightly. IE5 is fine. Firefox and Opera are the problem.

Note: I have left the height of the content DIV blank as it will be of varied size. When I set a height of say, 500px, the page looks fine (but because a background colour is needed for the DIV, it doesn't appear as I intended it to).

Any ideas to why this is happening?

Thanks in advance :-)

-Solange.

Hi guys,

I'm trying to sort out the top level menu. It's supposed to allow a hover effect, where a sub menu then appears.
This secondary nav then spans across in an inline fashion.

The link to the site is: http://yoursitetest.co.uk/index2.php

However it seems to have some kind of 'width' set on the parent which the sub menu cannot expand past.

This is some of the code i think is relevant: (Rest of nav cut due to repeating nature)
Code:

<ul id="navigation">

			        <li class="main" style="position:absolute; font-size:11px; z-index:90; left:0px;"><a href="#" class="co">Home</a>

        	<ul style="display:none; z-index:100; height:28px;">

            	<li style="background-image:url(images/sm-l.png); background-repeat:no-repeat; width:15px; height:30px;"></li>

                    <li><a href="#" style="background-color:#EEE;">asa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                <li style="background-image:url(images/sm-r.png); background-repeat:no-repeat; width:15px; height:30px;"></li>

            </ul>

        </li>
</ul>

CSS:
Code:

ul#navigation li.main {
	display:inline-block;
	list-style:none;
	position:relative;
	background-image:url(../images/tab_off.png);
	background-repeat:none;
	width:109px;
	height:8px;
	padding:10px;
}

ul#navigation li.main a {
	color:#FFF;
}

ul#navigation li.main:hover {
	background-image:url(../images/tab_on.png);
	background-repeat:none;
}

ul#navigation li ul {
	position:absolute;
	left:-50px;
	top:20px;
}

ul#navigation li ul li {
	display:inline-block;
	list-style:none;
}

Hope someone can help,
Regards,
Joe.

I have set my table cell #3 to 246px and have placed an image (called keyboard.jpg) with a width of 246px in it as a background image (the only cell in the table with an image), yet the table cell has expanded beyond that 246px width.

I need to set the cellpadding to 5px because for legibility for all the other cells (with just text) in the table. Can I turn off the cellpadding for just this one cell #3 that has an image in it? Why does a background image in a table cell react to the table's cellpadding? Should I remove the keyboard.jpg as a background image and make it an in-table image?

<em>Whatever the case, how can I make the image fit nicely without any extra space in the cell?</em>


Here's my code and my stylesheet:

<div id="table">
<table width="725" border="0" cellpadding="5" cellspacing="0" class="table">
<tr>
<td width="1">&nbsp;</td>
<td class="cell1" width="130"><p><strong>Yada</strong></p>
<p>Bla bla bla</p>
<p>Bla bla bla</p></td>
<td class="cell2" width="124"><p><strong>Yada</strong></p>
<p>Bla bla bla</p>
</td>
<td class="cell3" width="246"></td>
<td class="cell4" width="174"><p><strong>Yada</strong></p>
<p>Bla bla bla<br />
<br />
Bla bla bla</p></td>
</tr>
<tr>
<td class="tdblue">&nbsp;</td>
<td class="cell5"><p><strong>Yada</strong></p>
<p>Bla bla bla</p></td>
<td class="cell6"><p><strong>Yada</strong></p>
<p>Bla bla bla</p></td>
<td class="cell7"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p></td>
<td class="cell8"><p><strong>Yada</strong></p>
<p>Bla bla bla</p></td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="cell9"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla</p></td>
<td class="cell10"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla.</p></td>
<td class="cell11"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla </p></td>
<td class="cell12" width="174"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla </p></td>
</tr>
</table>

Here's my stylesheet:

table {
width: 760px;
margin: auto;
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 150%;
text-align: left;
text-decoration: none;
letter-spacing: .5px;
}

table td {
vertical-align: top;
}

td.cell1 {
background: white;
padding: 5;
width: 130px;
}

td.cell2 {
background: #F7F4EE;
padding: 5;
width: 124px;
}

td.cell3 {
background: #ffffff;
background-image: url(../images/keyboard.jpg);
background-repeat: no-repeat;
spacing: 0;
padding: 0;
width: 246px;
}

td.cell4 {
background: #F7F4EE;
padding: 5;
width: 174px;
}

td.cell5 {
background: #DFE5F0;
padding: 5;
width: 130px;
}

td.cell6 {
background: white;
padding: 5;
width: 124px;
}

td.cell7 {
background: #DFE5F0;
padding: 5;
width: 246px;
}

td.cell8 {
background: white;
padding: 5;
width: 174px;
}

td.cell9 {
background: white;
padding: 5;
width: 130px;
}

td.cell10 {
background: #F7F4EE;
padding: 5;
width: 124px;
}

td.cell11 {
background: white;
padding: 5;
width: 246px;
}

td.cell12 {
background: #F7F4EE;
padding: 5;
width: 174px;
}

.tdblue {
background: #DFE5F0;
}

.tdtan {
background: #F7F4EE;
}

I have a page whose outer-most container has a fixed width. On some pages, there is a table whose width I cannot set to be fixed because its contents (more specifically the number of <td>s) are dynamic.

My problem is that when the table has so many <td>s that its width is forced to be greater than its parent <div>'s fixed width, the other page elements are not rendered as desired.

Here is a simple illiustration of what I'm talking about. The text on the page explAins my issues (although it should be evident from loooking at it in a browser).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">

	body	{
		font-family: Arial, Helvetica, sans-serif;
	}
	
	#outer	{
		width: 950px;
		min-width: 950px;
		background-color: #fc0;
	}
	
	#hdr	{
		background-color: #66c;
		height: 50px;
		padding: 10px;
		color: #fff;
		margin-bottom: 25px;
	}
	
	table#data1	{
		background-color: #eee;
		margin: 10px;
	}
	
	table#data1 td	{
		font-weight: bold;
	}
	
</style>
</head>

<body>
	<div id="outer">
		<div id="hdr">
			This box should span the entire width of its orange container box even if the orange box's width exceeedes the width of the browser window due to the content it contains.
		</div>
		<table id="data1" border="1">
			<tr>
				<td colspan="24"><p>This table has a lot of TDs which causes its width to go beyond both the 900px assigned to its containg DIV as well as the width of my browser window. My desired behaviours a </p>
				<ol>
					<li>the containing element would expand to the width of the table (meaning that the orange background will be displayed behind the content of the grey table)</li>
					<li>the DIV with the blue background at the top would also expand to the width of its parent container (the DIV with the orange background)</li>
				</ol>
				<p>Neither of these are happening in Mozilla and only #1 is happening in IE.</p>
				<p>I'm sure that Mozilla is displaying properly per the CSS spec, but there must be a way to acheive what I'm trying to do.</p></td>

			</tr>
			<tr>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
			</tr>
		</table>
	</div>
</body>
</html>

I'm not saying my code is correct and that the browsers are not displaying it properly. I know I'm doing something wrong, I just can't figure out what.

Any suggestions?

Dear all,

IE problems trying to get a large amount of content to sit in a smaller div with overflow set to auto. In FF it works perfectly, but in IE the outer div ignores the width value I have set and instead expands to the width of the content.

My code:
Code:

<div id="calendarWrapper" style="width:800px;height:600px;overflow:scroll;">
<div style="width:4000px;height:1000px;overflow:auto;background-image:url(img/calendarBackground.gif);position:relative">
<div style="background-color:#FFFFCC;position:absolute;top:76px;left:150px;width:1000px;height:74px;">Test</div>
<div style="background-color:#FFFFCC;position:absolute;top:151px;left:300px;width:750px;height:74px;">Test</div>
<div style="background-color:#FFFFCC;position:absolute;top:1px;left:75px;width:100px;height:74px;">Test</div>
</div>
</div>

I found a couple more threads similar to this but none with a solution.

any help most appreciated. Mark

I'm having a serious brain fart here...I must have come across this issue a million times before but I guess I haven't thought about it for so long, that I'm at a loss....

Very simply, I want to have a horizontal menu using text (ie not images) that will fill to fit the width of the page. Now I'd want to make there be a min-width and I can do that, but there's got to be a way to have the padding between the items adjust depending on how wide the browser is, right? And I should be able to do this with CSS and not have to use tables right? In other words, the width of the individual menu items will remain the same, but in a browser that's say 800px wide the space between the first item will be very near the left side of the page, and the last item will be very near the right side of the page and the items will be spaced evenly between them. But if the page is 1200px wide, the first and last items will still be very left and very right, but the spacing in between the rest of them will be bigger so that it fills the page width.

?????????/

Pretty much what the title says, is it possible to center a div in the middle of the screen without giving it a fixed width?

I having a bit of a problem with my div tags.

I have set a table inside the divs to a fixed width of 300px and the same with the div tag.

But if I was to insert text into the table such as:

11111111111111111111111111111111111111111111111111111111111111111111

this makes the table and div tag expand to fit the text on one line.
Making is disappear off the page so people have to scroll to view the text.

I have tried the CSS command of "table-layout:fixed;" but this just makes the table end and cut of the end of the text.

Is there anyway round this??

I cant get the side menu (colored in red at the moment...will eventually be white like the rest) to overflow: auto with 100% height....i know that you need a fixed with for overflow and the only solution i could find (havent tried it tho) was to use javascript to get the window dimensions but i am trying to avoid using javascript.

heres the code:

<b>The Page:</b>
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>
TEST PAGE
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/default.css">
</head>
<body>





<div id="content">
  <div id="logo">
    <img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree">
  </div>
  
  <div id="quicknav" style="height: 25px; background-image: url('/Images/quicknavbackdrop.jpg');">
    <div id="quicknavtext" style="position: relative; top: 4px; margin-left: 25px; font-weight: bold; text-align: center;">
      <a href="index.html">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="">Profiles</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="">Chat</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="">Forums</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="">Messages</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="">Extras</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="">Tickets</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="">Suggestions</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
  </div>
  
  <div id="sidemenu" style="height: 405px; width: 200px; background-color: #FF0000; overflow: auto;">
    &nbsp;<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  
  
  
</div>
</body>
</html>

<b>The CSS</b>
Code:

body {
  background-image: url('/Images/grassbackdrop.jpg');
}

a:link { 
  color: #7E5C14;
  text-decoration: none;
}

a:visited {
  color: #7E5C14;
  text-decoration: none;
}

a:active {
  color: #000000;
  text-decoration: none;
}

a:hover {
  color: #00FF00;
  text-decoration: underline overline;
}

div#content {
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
}

I know that most of the css is in the page and not the external css but thats because i was modifying it heavily to see what would work and what wouldnt. The problem is the fixed width on the side menu as it wont be consistent across different screen resolutions. any help would be much appreciated as i dont want to continue work on this page until i can figure this problem out.

Hi, this is my first post. I have a problem with the navigation bar on a site that I'm developing (musicboxtheatre.com). It renders properly in firefox and safari, but, of course, IE is causing problems. It renders as steps. The tabs are dropping vertically so that their tops are aligning with the bottom of the previous tabs line-height. Does anyone know of a solution?

Update: I rewrote everything, and it somehow works now. Nevermind.

The main body text in IE stays within the width I gave it, but in Firefox, it just goes off the div, its all not showing becasue I have the containing div overflow:hidden, but why won't it stay in the fixed width div, 603px, in Firefox like it does in IE?

mediacontour.com/TCS/frequently-asked-questions.php

Hello all,

I am implementing a 2 column fixed width template. The problem is that the smaller column does not stretch to match the height of the taller column.

All of the online templates I have found remedy this problem by setting a 1 px high background image to span the width of the container div.

My problem is that I would like to place an image at the top and bottom of the smaller column. How can I achieve this?

I'm looking for a nice cross browser (well, actually I mainly interested in IE8 and ff3) 3 column layout with header and footer where the middle column has a fixed width and the left and right are variable width.

I like these: http://matthewjamestaylor.com/blog/perfect-3-column.htm

But none have a fixed width center column (could they be modified for a fixed width center col?)

Any suggestions?

Hello, How can i create a fixed-width menu to the left with content to the right that fills up the rest of the page. ie, no auto-width, it needs to fill up all the way to the right edge.

So if you create a horizontal line <hr> in the content it will draw all the way to the right (except for some padding of course)

Like this pictu tinyurl.com/ydsr2ov