CSS - Overflow In Div Tag Without Fixed Width

It always amazes me how Microsoft can mess something up that was working before. Take the following example, a table cell set to a specific width, containing a div, width set to 100% of its containing block element (the table cell). Overflow:auto is applied to the div and content is placed in the cell that cannot be wrapped. See the code that follows:

html4strict Code:
Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 100%; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>

  

  


 <table width="200px" cellpadding="0" cellspacing="0" border="0">


   <tr>


     <td style="width: 200px;">


       <div style="width: 100%; overflow: auto;">


         <p style="white-space: nowrap;">Content that should not be wrapped.</p>


       </div>


     </td>


   </tr>


 </table> 

One would expect to have the table cell display with a width of 200 pixels and scrollbars will be displayed for the un-wrappable content.

IE7 does not do that. It widens the cells width to accommodate the content. FF follows this perfectly. To fix this, one has to set the div to the same width as the table cell, like so:

html4strict Code:
Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 200px; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>

  

  


 <table width="200px" cellpadding="0" cellspacing="0" border="0">


   <tr>


     <td style="width: 200px;">


       <div style="width: 200px; overflow: auto;">


         <p style="white-space: nowrap;">Content that should not be wrapped.</p>


       </div>


     </td>


   </tr>


 </table> 

Only then, IE7 will correctly display it. Just something to keep in mind when working with percentage widths.

Hey all, up until recently I have used the various styles and hacks using :after or clear:both; to rectify and force divs to clear. However knowing that these methods won't validate and aren't strictly proper, I've decided to ditch all those methods and try to sort floated divs out correctly.

Here is the culprit;
Code:

<div style="height:144px; margin-bottom:10px;">
								
	<div style="height:110px; padding:0px 0px 5px 0px;">
		<div style="width:80px; height:110px; float:left;">
			<div><!-- DYNAMIC IMAGE --></div>
		</div>
	
		<div style="width:655px; height:110px; float:left;">
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div>
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div>
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div>
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC DESCRIPTION --></div>
		</div>
	</div>
	
	<div style="height:29px; background-color:#D8D8D8;">
		<div style="padding:7px 0px 0px 10px; margin:0px 5px 0px 0px; float:left;"><!-- DYNAMIC TEXT --></div>
		<div style="padding:7px 0px 0px 10px; float:left;"><!-- DYNAMIC TEXT --></div>
		<div style="padding:3px; float:right;"><!-- DYNAMIC TEXT --></div>
	</div>
	
</div>

The problem is with the contents of <!-- DYNAMIC DESCRIPTION -->. This is user entered through a HTML editor in their admin console. This can have line breaks etc. and therein is where my problem lies.

I have restricted the showing of the "Description" text to 175 chars. Meaning, and providing the user enters more than 175 chars before a line break, it would rarely go on to a new line when displayed in the above page. However if a user added multiple line breaks the content would still display overlaying the bottom, and final div.

Now I understand I could remove line breaks etc before rendering, but I would like not to have to do that, I would rather the "Description" div stretch to accomodate the text however it presents itself than run the risk of one day having "leaking" overlaying content.

I tried the width:100%; overflow:auto; but this results in scrollbars. I don't want to use hidden either because again it rendered badly.

I've also used clear:both; on the final div with no joy.

Is there anything that can be done? I'm sure there is, maybe I just can't see the wood for the trees at the moment.

Any suggestions would be hugely appreciated. Thanks in advance.

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 have a site with a fixed width, but a few pages on the site are reports with wide tables that overflow that fixed width. Per the spec, they overflow their containers instead of expanding the containers (as happened in the old table layout). Is there a way to get the old table behavior out of the styled div tags?

This is a short example of what the site uses for layout. The first block is normal content. The second has content overflowing and I would like all containers to expand (Main expands for the content, Page expands b/c Main expanded, Header* and Footer expand b/c their container (Page) expanded). The third is what it'd look like after that expansion (table rendered).
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
	Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<style type="text/css">
	<!--
	body { background-color: green }
	.Page {
		width: 200px;
		margin: 50px auto;
	}
	.Header1 {
	}
	.Header2 {
		background-color: red;
		border: 1px solid Black;
		border-width: 1px 1px 0;
	}
	.Footer {
		background-color: blue;
		border: 1px solid Black;
		border-width: 0 1px 1px;
	}
	.Main {
		background-color: white;
		border: 1px solid Black;
		border-width: 0 1px;
	}
	-->
	</style>
</head>
<body>
<div class="Page">
	<div class="Header1">Header1</div>
	<div class="Header2">Header2</div>
	<div class="Main">
		Main
	</div>
	<div class="Footer">Footer</div>
</div>
<div class="Page">
	<div class="Header1">Header1</div>
	<div class="Header2">Header2</div>
	<div class="Main">
		MainMainMainMainMainMainMainMainMainMainMainMain
	</div>
	<div class="Footer">Footer</div>
</div>
<table class="Page" cellpadding="0" cellspacing="0">
	<tr><td class="Header1">Header1</td></tr>
	<tr><td class="Header2">Header2</td></tr>
	<tr><td class="Main">MainMainMainMainMainMainMainMainMainMainMainMain</td></tr>
	<tr><td class="Footer">Footer</td></tr>
</table>
</body>
</html>

I won't go back to tables, but I'd really like a general solution that can be applied to all pages, instead of doctoring widths and margins on the pages in question to get tolerable results. The page should be the set fixed width unless the content demands otherwise, then the entire page should stretch to flow. Any ideas?

A screenshot for viewing sans personal test file.

Hi,

I've created a fixed width Div/CSS design for my forum, and while Firefox can handle excessively wide user-posted images, IE handles it badly and stretches the div that the image is in, breaking the layout.

An example is he http://forums.hiveworldterra.co.uk/viewtopic.php?t=496 (currently with my CSS work around - not pretty)

What I would like is a non-Javascript, CSS-based method (or very minimal that gives acceptable results when JS is off) of making the containing Div of the image scroll horizontally when the image is over 590px wide, but not show a vertical scroll bar and not show any scroll bars if the image is under 590px.

Is that even possible? thanks for any suggestions

IBBoard

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.

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??

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?

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?

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, 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

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?

Hi everyone,

I'm interested in making the ads in the rightmost sidebar stay within the 900px of the layout. How can I alter this page so that:

1. The images stay inside the container div

2. If the images are larger than the rightmost column, the column expands to the left and will make the main content feed smaller. I'm still kind of rusty with how fluid width works.

Site is h**p://www.topofferspage.com

Hi,

I'm wondering how do you make two divs next to each other, in line with each other, but have one to the left be a set width, and the one on the right be everything else that is left (changes as the user scales the browser).

Here is an example:
( -100px- )( ---------everything else that is left---------- )
(more stuff can go here now)

I'm having trouble having one float: left and width: 100px, the other float: right and width: 100% (I think this part is the problem).

this should be simple, but im just not finding my answer. im trying to figure out how to evenly spread several links across a fixed width. i could manually set the padding or margins for each link, but i figure there has to be a way to do it in css automagically.