|
CSS - Get Body To Expand Beyond Viewport
I have some tables that contain a lot of columns, so the table goes beyond the users viewport. I would like the body of the page to expand to the table, anyone know of a way to get the body to expand horizontally. Below is some code, I would like the red outline to expand to the black.
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>Insert title here</title> </head> <body style="border:1px solid red;"> <table style="border:1px solid green;width:2500px;"> <tr> <td style="">slkfdj</td> </tr> </table> </body> </html> Similar TutorialsI've been searching for a few days, but I haven't found a solution to my problem. How do I get my parent DIV to expand to contain all of my content beyond the viewport? CSS: Code:
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
}
.page {
background-color: #dddddd;
margin-left: -390px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-top-color: #9CB0C0;
border-right-color: #9CB0C0;
border-bottom-color: #9CB0C0;
border-left-color: #9CB0C0;
position: absolute;
height: 100%;
min-height: 100%;
width: 780px;
left: 50%;
top: 0;
}
.header {
position: absolute;
height: 158px;
width: 764px;
background-color: #FFFFFF;
left: 7px;
top: 0px;
}
.content {
position: absolute;
left: 7px;
top: 159px;
background-color: #9CB0C0;
height: 821px;
width: 764px;
margin-bottom: 34px;
}
.footer {
background-color: #415569;
height: 34px;
width: 764px;
left: 7px;
bottom: 0px;
}
And the HTML: Code: <?xml version="1.0" encoding="iso-8859-1"?>
<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/test.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="lPage" style="position:absolute; z-index:1" class="page">
<div id="lContent" style="position:absolute; z-index:2;" class="content"></div>
<div id="lHeader" style="position:absolute; z-index:1" class="header"></div>
<div id="lfooter" style="position:absolute; z-index:3" class="footer"></div>
</div>
</body>
</html>
I've searched through a few of the threads here, but haven't been able to find an answer either. Thanks, Brent Hello, I'm working on a website for a client: http://evoxdesigns.com/rimlox/ http://evoxdesigns.com/rimlox/rimlox.css My current problem is getting the body to scale to 100% height. At the moment, it stretches to 100% of the browser window, which is great, but if if the content within all the nested divs expands to a height larger than that of the screen, the background does expand with it. In my troubleshooting, I gave the body a 1px border and found out that the body remains at the fixed size of the window even though the content within it expands. I tried messing with the overflow property, all to no avail. I'd appreciate any help I can get on this one. Greetings, I'm trying to implement a pseudo-modal dialog by layering the following: A div containing an iframe to be loaded with a form page A semi-transparent div to cover the entire underlying page, to prevent clicks on other elements The problem is that the cover div is only as tall as the viewport, which means that any page content in the scroll area below the viewport is left exposed. Below is the source. Any suggestions would be most appreciated! 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=iso-8859-1">
<title>Test</title>
<style type="TEXT/CSS">
html,body {
margin:0;
padding:0;
height:100%;
}
#contactDiv{
z-index:2;
display:none;
position:absolute;
top:100px;
left: 50%;
margin-left:-300px;
border-style:solid;
height:450px;
width:600px;
background-color:#ffffff;
border-color:#666666;
border-width:10px;
}
#modalOverlay{
z-index:1;
display:none;
position:absolute;
top:0px;
left: 50%;
width:1008px;
margin-left:-505px;
min-height:100%;
background-color:#000000;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>
</head>
<body>
<a onclick=
"javascript:document.getElementById('modalOverlay').style.display='block';
document.getElementById('contactDiv').style.display='block';">
SHOW IT</a>
<p>
<div id=contactDiv>
<iframe id=contactIframe width=600 height=450 scrolling="no"
frameborder=0></iframe>
</div>
<div id=modalOverlay>
</div>
testing testing testing testing testing testing testing testing
(The word "testing" was actually repeated multiple times --
enough to force scrolling on my laptop. I edited it for (relative)
brevity.)
</body>
</html>
This is a simplified version of the actual page. There's a menubar with a link that populates the div with the actual contact form. I cut out everything that didn't relate to the problem. Thanks, DM I've got a problematic background DIV. It fills up the entire viewport and looks correct, but cuts off at the bottom (one screen height down) when I scroll. How can I get this DIV to span the entire height of the document, instead of just the height of the viewport? BTW, it works fine in IE 6, but cuts off in FireFox 0.9, Opera 7.5, and Netscape 7.1 Here's the code (you'll have to populate the content DIV to get scrollbars and witness the problem): 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">
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #F1EFE2;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
.bg {
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 960px;
height: 100%;
background: #F7F6EF;
text-align: center;
border-right-color: #9E987F;
border-right-width: 1px;
border-right-style: solid;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #9E987F;
}
.heading {
position: relative;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
background: #7C2812;
color: #F7F6EF;
vertical-align: middle;
text-align:left;
padding-top: 10px;
padding-bottom: 10px;
text-indent: 10px;
}
.content {
position: relative;
top: 20px;
padding-left: 15px;
padding-right: 15px;
width: 920px;
vertical-align: top;
text-align:left;
}
-->
</style>
</head>
<body onResize="window.location.href = window.location.href;">
<div class="bg">
<div class="heading">
heading goes here
</div>
<div class="content">
content goes here
</div>
</div>
</body>
</html>
Any help would be greatly appreciated! is it possible? its the banner... the content spans around 1000 pixels wide so with 100% width i miss a piece when i scroll to right of page just making the body around 1000 pixels seems to get a horizontal scrollbar when its not needed for the content....either that or its just missing some pixels... cant a div be 100% of the page? I have created a CSS site that has a footer spanning the bottom of the viewport and whilst I have managed to glue it to the bottom I have another div that is behind it even though I think I have set-up the container properly. The troublesome page is http://www.cimbian.co.uk/BognorArchers/recurve.htm and you will see that the bottom of the text in the main pane is obscured by the footer. Basically I have a meta-wrapper for the whole page: and then have the main content within it. Following on from the content I have the footer and then I close the meta-wrapper. Something like this: <div id="meta_wrapper"> <div id="BA_main_content_area" class="clearfix"> <div id="BA_Main_Full_Width"> </div> <div id="footer"> </div> </div> My CSS for this is: div#meta_wrapper { width: 760px; margin-left: auto; margin-right: auto; background-color: yellowgreen; text-align: left; position: relative; min-height: 100%; height: 100%; voice-family: "\"}\""; voice-family: inherit; } html>body #meta_wrapper { height: auto; } div#BA_main_content_area {width:760px; align: center; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: 0.85em } div#BA_Main_Full_Width { border:3px inset yellow; font-family: Verdana; font-size: 0.85em; text-align: justify; position: relative; width: 500px; margin: 10px 30px 0px 10px; padding: 3px; background-color: #FFFFCC; float: left; } div#footer { position: absolute; bottom: 0; width:760px; padding:4px 0; font-size: 0.6em; text-align: center; background-color: white; /* Blue */ border-top:1px solid yellow; border-bottom:2px solid yellow; margin-top:1.5em;} /* orange border */ The problem occurs in IE and in Netscape so although I have box-model problems due to IE in Firefox the problem is not limited to IE. As far as I can tell from much web-reading and a couple of books this should do it. Any thoughts? PS: I also posted this in the MS FP forum as I built the page in FP but have not yet found a solution so please don't yell if you have seen the post there too ;-) Hi, Is there any way to set a DIV that starts at 500px height but can grow if the content inside is longer than that? Thanks. I have a page that uses CSS to handle layout. I also use a combination of CSS and javascript to create an expandable menu. I have a simplified version of this page he http://www.stringersites.com/csstest/index.htm Users of Dreamweaver will recognize this as being based on the HaloNavLeft template. As you can see, the page displays fine until you start expanding the menu items contained in <div id="mainMenu">. If you expand enough, the mainMenu box extends beyond the borders of the <div id="pagecell1"> in which it's contained. My primary question to the group is how to get the pagecell div to autoexpand along with the mainMenu div. My secondary question is how to stretch a vertical column to the height of the containing div. Specifically, this is <div class="relatedLinks">, which is contained in pageNav, which, in turn, is contained in pagecell1. The relevant pieces of CSS are included below, but you can link to the entire CSS sheet from the test doc above. Thanks in advance for the help. -Steve Stringer Code:
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}
#mainMenu {
background-color: #EEE;
border: 1px solid #CCC;
color: #000;
width: 350px;
position: absolute;
margin-left: 10px;
margin-top: 20px;
}
#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}
I'm trying to get the footer to dynamically expand with the content in the box 1, 2, 3. How can i do this? The HTML Code:
<div id="footer">
<div id="box1">Content</div>
<div id="box2">Content</div>
<div id="box3">Content</div>
</div>
The CSS Code:
#footer {
min-height:150px
height:auto;
}
#box1 {
float:left;
min-height:150px
height:auto;
}
#box2 {
float:left;
min-height:150px
height:auto;
}
#box3 {
float:left;
min-height:150px
height:auto;
}
God, this is really simple but I have forgotten how to get the containing box to expand Basically the text div expands but the containing div doesn't PHP Code: <div style="width: 300px; min-height: 200px; border: 1px dashed red;"> <div style="border: 0; width: 110px; height: 110px; float: left;"> <img src="#" width="100" height="80" border="0" align="left" /> </div> <div style="border: 0; width: 190px; min-height: 200px; float: right;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio nibh, interdum eget, mollis quis, imperdiet non, risus. Curabitur laoreet vehicula massa. Curabitur consequat dui vitae lectus. Nam rutrum sapien id quam. Pellentesque aliquet nulla dignissim ante. Fusce metus libero, vehicula hendrerit, condimentum id, malesuada in, elit. Nam fermentum, metus in varius scelerisque, diam purus tristique tortor, vitae suscipit elit ipsum eu dolor. Ut dictum porttitor velit. Pellentesque cursus purus elementum dui. Phasellus aliquet ante vitae pede. </div> </div> So probably my topic title explains my problem pretty clearly, but basically I've got this div and I'd like it to expand downward as I fill a div contained within with content. Can anyone explain how I can do this? I tried placing a fairly tall picture in my inner div and right now it extends past the bottom of the outer div and looks really weird. Actually if there was even just a way I could tell the outer div exactly how tall the inner div is, that would also be fine, but I can't find a way to do this. I've tried the height: 253px; tag, but it hasn't changed anything. My outer div still doesn't go as far down the page as the inner one, so I'm left with an image thats halfway sticking out my content box. Any help would be great, thanks! Hello, 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... if you look here - http://www.outlawz.frihost.net/fula/test2.php you can see i have written to much text... here is my code Quote: <?php require("header.php"); ?> <div id="content"> <br><br> <b>Welcome to Kadafi Legacy.</b><br><br> <img src="image/yaki1.jpg" alt="Yaki Kadafi" align="left"> Here at Kadafi Legacy we aim to bring you the latest and most in depth information on Yaki Kadafi, such information will include the family and friends of Yaki Kadafi, Kadafi's childhood years, the records Kadafi featured upon and all this and much more can be found in our <a href="/history.php" alt="Yaki Kadafi History">Kadafi history</a> section.<br><br> The latest news and information regarding projects from the official Kadafi site - <a href="http://www.yakikadafi.com" target="_blank" alt="YakiKadafi.com">YakiKadafi.com</a>, will also be reported and updated daily in our <a href="/news.php" alt="Yaki Kadafi News">Kadafi News</a> section.<br><br> Also available on Kadafi Legacy is the <a href="/music.php" alt="Yaki Kadafi Music">music</a> section, you will find information, images and lyrics about previous releases such as 'Son Rize: Volume 1'.<br><br> In our <a href="/links.php" alt="Yaki Kadafi Links">links</a> section you will be able to find direct links to official sites that are related to Yaki Kadafi in one way or another also in our links section is a 'support the real' area of links which will link to sites we support, i.e - Sekou Odinga, Assata Shakur.<br><br> Our ultimate goal is to honour Yaki Kadafi, his family and his music in the correct way, this means there will be no illegal downloads available on this site and nothing will be used without permission from Yaasmyn Fula.<br><br> Last and not least, Kadafi Legacy would like to thank the following people -<br><br> Yaasmyn Fula<br> Cory Caudill<br><br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div> <br> <div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div> </body> </html> and heres the css - Quote: a:link {color:white} a:visited {color:white} a:hover {color:black} a:active {color:white} body {background-color: #666666} #head img { display: block; } #head{ position: relative; top: 7px; left: 140px; width: 707px; font-family: verdana; font-size: 12px; color:white; background-color: #666666; background-image: url(wavy.jpg); } #box1{ position: relative; top: 7px; left: 140px; width: 345px; font-family: verdana; font-size: 12px; color:white; background-color: #666666; background-image: url(wavy.jpg); } #content { position: relative; top: 7px; left: 140px; width: 697px; height: 500px; font-family: verdana; font-size: 12px; color:white; text-aligh: justify; background-color: #666666; background-image: url(image/back.jpg); padding: 5px; } #foot{ position: relative; left: 140px; width: 707px; font-family: verdana; font-size: 9px; text-align: center; color:white; background-color: 666666; background-image: url(wavy.jpg); } on the page the text goes out side the blue box.. how do i make it so the when it does that the blue box stretches down... thanks! also it works in IE but not in FIREFOX! Hey guys, I have been working on this for weeks and it is driving me nuts. I am trying to get the wrapper to expand to accomodate the content, but for some reason it wont expand. Any ideas? Here is the link: h$$p://digitallife.us/tutorials-t.html Thanks, Daniel 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! Hey all, the test page is here. Notice when you expand the "view more details" in IE8 to the point where it is supposed to push the page down, it doesn't! But it does in FF/Safari. HTML CSS Potentially relevant CSS: Code: body {
margin: 0;
padding: 0;
min-height:0;
}
div.container {
width:100px;
}
div.outerBody {
width:100%;
min-height:0;
}
div.innerBody {
width:100%;
background-image:url("../../images/artist_center/body_bg.jpg");
background-repeat:repeat-x;
min-height:0px;
height:auto !important;
background-color:#cedce5;
text-align:center;
margin: 0;
position:absolute;
}
div.tabContent {
width:945px;
min-height:596px;
border:solid 1px #cccccc;
float:left;
position:relative;
margin-left:14px;
padding-bottom:14px;
margin-bottom:14px;
}
I'm using clearfix to make things work in IE7, but clearly there's some kind of other problem going on. Thanks for any help! I have an absolutely position <div> with some content positioned within it. I do not always know the size of the inner content so my problem is getting the outer div to expand to the height of the inner div. Is there a solution for this with absolutely positioned items that wil work in IE/Firefox/Safari? I'm attaching a simple html file which mimics what i am trying to accomplish and the code is below: Code: <div id="detailBlock" style="position: absolute; width: 250px; height: 35px; z-index: 3; border: 1px solid #000; overflow: visible; background-color: #fff5d9; font-size: 8pt; top: 50px; left: 100px;"> <div id="closeBlock" style="position: absolute; width: 40px; height: 8px; left: 210px; top: 3px; font-size: 7pt;"><a href="javascript: closeDetail();">CLOSE</a></div> <div id="detailContent" style="position: relative; width: 240px; top: 15px; left: 5px; border: 1px solid #F00;">Content whose size i do not know...So if I write anything substantial in here it will go over the edge</div> Thanks in advance for your help. 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! |
|||||||