|
CSS - Expand Container On Width Overflow
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. Similar TutorialsHello, i'm trying to make a tableless image gallery, each image is inside <span></span> (i don't know the dimensions of the image, it's resized by server side) while the div container expands fine, the span container does not expand to fit the image, and i also don't know how to vertically center it. i can't use <div> because images can be in the same row. Code:
body {
margin:0px
padding:10px;
background-color: #ffffff
}
body, div,span {
font-family: Arial; font-size: 12px; color: #000000
}
a {
color:#000099
}
a:hover {
color:#0000ff
}
div.paging {
padding:10px;
border:1px solid red;
}
div.paging span {
padding-left:10px;
border:1px solid red
}
div.gallery {
padding:10px;
border:1px solid red
}
div.gallery span {
margin:20px;
border:1px solid green;
}
div.gallery img {
border:1px solid black
}
this is the result http://addf.net/tests/m_g/gallery.php is float the only option? must i float every element on the page? what if it's a module for another not floated website? i'd rather not use float or a table. if you could help thank you Hi, what I'm trying to do is get two divs next to each other. That much I can do if I give them both a style of 'float:left;', but the problem with that is that they will overflow out of the div that they both sit in. Is there anyway to get two divs to sit next to each other, but to also expand the parent div if necessary? Thanks! 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;"> 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've got the div below Code:
<style>
div
{
height: 100px;
position: absolute;
overflow-y: auto;
}
</style>
<div>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
</div>
This div is the width required to hold the text. Unfortunately once the scroll bar is added to the div it obscures the text. Is there a way to make the div expand horizontally that bit extra required by the scrollbar? I know i can put padding-right on the div. I'm looking for a way that will only expand if further if a scrollbar is needed. Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... Hello, I have been searching through the threads in search of a solution but decide to ask outright. I am trying to develop a way for a css layer to stretch the height of a window 100% and scroll its content inside of itself. I have only been able to trigger the scroll bars inside of the content layer on using a defined pixel height for the container layer that it sits in. My main goal is to get the content layer to stretch the full height of the browser window and scroll its content so that I have no horizontal scroll bars on the browser itself but rather on the content layer. Trying to guess the height of a browser window to specify a happy medium, for different screen resolutions seems silly. Any ideas would be Gratefully appreciated! Ex: http://edward.sensite.net/Hyundai/ CSS: body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #000000; } .numbertext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF; vertical-align: middle; } td { vertical-align: middle; text-align: center; } .container { position: relative; margin: 0 auto; width: 780px; height: 200px; text-align: left; } .headerlayer { position: absolute; visibility: visible; z-index: 1; height: 206px; width: 780px; top: 0px; } .contentlayer { position: absolute; visibility: visible; z-index: 2; top: 207px; width: 780px; height: 100%; background-color: #FFFFFF; overflow: auto; } I am trying to set a height of a container div, and have the inner div spill out of the container without changing the height of the container div: Code: <style media="screen" type="text/css">
.inner{
width: 80px;
height: 80px;
background-color: #0000FF;
}
.outer {
width: 120px;
height: 20px;
background-color: #FFFF00;
overflow:visible;
}
</style>
IE 6 is giving me trouble. It insists on making the container div the same height as the inner div. Anything I can do to tell IE6 to not change the height of the container? Hi all 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>
<title> new document </title>
<style>
div.outer {
background-color: yellow;
overflow: auto;
}
h1 {
margin: 10px;
}
</style>
</head>
<body>
<div class="outer">
<h1>Title</h1>
</div>
</body>
</html>
Expected result (Firefox): expected.JPG Unexpected result (Internet Explorer): unexpected.JPG Is there something I can do against this instead of adding a padding-top to the H1 or a padding-top to the div.outer? Thanks for help, Josh Hey guys. I've gotten awesome help here before, so I decided to come back. Here is the web page I am trying to change (note-far from done. Don't laugh too hard): http://metroairvirtual.org/pilot_profile.php?pilot=1645 If you scroll down to "My Career History," you'll notice that (for example, the very first row of the table), it says "Email address updated from," and doesn't continue with the rest of the statement (gets cut off). I want to make it so I can scroll horizontally to view the whole statement by scrolling. I was successful by using the white-space: nowrap and then overflow-x: scroll. While that allowed me to do what I wanted, the actual DIV doesn't continue with the content, as shown in the shots below. Do you guys have any idea on how I can make the div style fill the scroll space? I can't really do a fixed width because history content varies from member to member and it is shorter/longer than others. Thanks for any help you can offer! If you need used code below that's fine, but I assume you can just use FireBug to inspect it. Thanks again! 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>
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>
Only then, IE7 will correctly display it. Just something to keep in mind when working with percentage widths. 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>
<a href="">Profiles</a>
<a href="">Chat</a>
<a href="">Forums</a>
<a href="">Messages</a>
<a href="">Extras</a>
<a href="">Tickets</a>
<a href="">Suggestions</a>
</div>
</div>
<div id="sidemenu" style="height: 405px; width: 200px; background-color: #FF0000; overflow: auto;">
<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, I have the following css: Code: #container { background: url(../images/page.gif) repeat-y center;
position:relative;
width:100%;
height:100%;
}
#banner {background:url(../images/banner.gif) no-repeat center;
height:108px;
width:100%;
position:relative;
}
#menu {background:url(../images/menu.gif) no-repeat top center;
height:124px;
width:100%;
position:relative;
}
#content {
margin-left: 240px;
font-family:'Helv', Arial, Helvetica, Geneva, sans-serif;
font-size:14px;
letter-spacing:1px;
color:#000;
text-align:justify;
width:580px;
position:relative;
}
#footer {background:url(../images/pgfooter.gif) bottom center no-repeat;
height:46px;
width:100%;
position:relative;
}
all background are fixed width for 1024x768 and i have the following html <div id="container"> <div id="banner"></div> <div id="menu"></div> <div id="content"> All text goes here </div> <div id="footer"></div> </div> now the problem is that if i set the #container width to let say 1000px; it works fine (only resizeing the browser instantly ihave the horizontal scroller). So i want to set thethe container width to 100%. As soon as i set that and resize the browser the page flows well But the text in the #content div remains static and doesn't move along with the bkgrounds, thus flowing "out" of the text area. the links is here Code: http://ocdmonline.org/michael/ username: ocdmonline pass:4yGx3fM Any ideas? 10x 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 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. 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 folks, I hope this is achieveable ... I have tried numerous ways of floating and whatnot, here is what i want: I want to have one container, having 3 divs inside. of these 3 divs the left and the right one are fluid, the center one is an image with a fixed width. looking like this: Code: ________________________ l l l fluid fix fluid l ________________________ restrictions: i do not want to use positioning at all. best would be, if it is all achieved with float and margins, looking good in IE and FF .... i have a page up, that will show you my design .... note, that only the box containing the image is the problem part on that page (some of you will recognize this i believe) the names of the classes are textboxleft, textboxright and id big_logo thanx! i want to redesign the page i have to only be displayed with floats and margins and no more positioning .... My CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? 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.... |
|||||||