|
CSS - Need To Extend Div To 100% Page Width, Not Just Viewport
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? Similar TutorialsOk. 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 a header which extends to 100% the width of the browser. I am trying to get the footer to do the same but it's only about 90% the browser's width. Here's my CSS for the footer: Code: #footer {
width:100%; /* this will create a container 80% of the browser width */
background: #327ec1;
margin: 0 0 0 -38; /* the auto margins (in conjunction with a width) center the page */
border: 0px;
text-align: left; /* this overrides the text-align: center on the body element. */
height:120px;
}
#footer_container {
width:950px; /* this will create a container 80% of the browser width */
background: #327ec1;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0 px;
text-align: left; /* this overrides the text-align: center on the body element. */
height:120px;
}
the site ishere any ideas? thanks Hello, I have been working on this for over 2 days and learning plenty in the process. Yet, I have come to a roadblock. I need the footer, which is outside the main container, to extend to the height of the page. The problem is that the page height changes with each page, and will change in the future, as the info for the pages will be pulled from a database. Please have a look at the footer on my site and tell me what might be a good solution. Here's the site: http://www.caillouette.com/FriendsCSS2/index.php thanks -Sean I'm wanting to extend a div all the way to the bottom of the page to give the effect of a white column. How can I make it extend all the way to the bottom if the content is too short to make it do this? The example is at http://www.wattersisere.co.uk/devshed. Thanks, Watters Hello, In CSS is there a way to tell an object to extend the full height and width of its parameters without specifying height and using absolute positioning? Thanks, Andy 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 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> I'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 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. 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! 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 ;-) I'm new to web development and I'm trying to figure out how to make my page a set width, if the view size is less than a certain amount I want the width scroll bar to appear as opposed to the default which rearranges everything? Some examples of what I'm talking about: youtube stackoverflow darkroastedblend (can't post urls) Can anyone point me in the right direction or show me how this is done please? Hi I don't know if this is a CSS issue, but how do you allow limit the movement of web pages when you drag IE window. So if its fixed it can be structured so that it can be seen by users who have a resolution of 800 X 600. And if its not fixed, then the page is stretched when you enlarge the window. Cheers I am trying to build a website and am having problems limiting the width. I need it to go a little something like this ....I need the page width to be limited to 800 pixels so the contents stops on that ?boundary Greetings, I am writing a page that uses CSS to currently place three columns, left, center, and right. I have written the graphics and remainder of the page to fit 1024 x 768. However, when I execute the page, my columns fill the entire resolution (for instance 1280 x 1024) rather than fitting into a 1024 width. What I would like to do is constrain my three columns to a total width of 1024px. The three columns in my CSS look something like this: Code:
#leftcol {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
border: thin none #EF4138;
margin: 4px;
padding: 4px;
width: 220px;
position: absolute;
height: 280px;
left: 1px;
top: 354px;
background-color: #FFFFFF;
}
#centercol {
border: thin none #EF4138;
margin: 4px 240px;
padding: 4px;
}
#rightcol {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
border: thin none #EF4138;
margin: 4px;
padding: 4px;
position: absolute;
height: 280px;
width: 220px;
top: 354px;
right: 1px;
}
Is there a CSS command that can constrain these three columns to be only 1024, or must I use an HTML table? Thanks, Korky On http://www.h****inson.co.uk/h****inson5.4 (I guess you can work out the name of the site...I've used a tiny-url in the link though) a horizontal scrollbar is displayed even though there is not content (as far as I can see) that is pushing the sides out this far. Although it is not detremental to the website, can anyone please suggest what is wrong. The main css code is at http://www.h****inson.co.uk/h****inson5.4/files/css.css Thanks for any help. I am trying to update an old site with lots of pages, I am trying to create a printing stylesheet (first time as you may guess) I have managed to exclude what I do not want to print but some text is still running off the RHS of the page. I have tried playing with page widths and margins but to no effect, any suggestions? this is what I currently have: TBODY { position: static; width: 700px; margin: 0 auto; } I have a layout that has text in a left div and the form input in the right. I want the form input to be 100% width of DIV.standard_field_right not 100% width of the entire page. Can someone give me a hint please. CSS and XHTML below: PHP Code: DIV.standard_field_container { width: 98%; padding: 0.4em; border: 1px solid #8B8B8B; background-color: #E2E2E2; overflow: hidden; } DIV.standard_field_left { width: 10em; float: left; margin-right: 5em; font: bold 0.8em Verdana, Arial, Helvetica, sans-serif; } DIV.standard_field_right { font: normal 0.8em Verdana, Arial, Helvetica, sans-serif; } SPAN.standard_field_type_info { font-weight: normal; color: #ff0000; border-bottom: 1px dashed #ff0000; cursor: help; } INPUT.input_text_field { width: 30em; } XHTML: PHP Code: <div class="standard_field_container"> <div class="standard_field_left"> <span class="standard_field_name"><?php echo $field_definition[1]; ?></span> <span class="standard_field_type_info" title="<?php echo $field_definition[7]; ?>">Information</span> </div> <div class="standard_field_right"> <span class="standard_field_input_area"><input name="<?php echo $field_definition[0]; ?>" type="text" id="<?php echo $field_definition[0]; ?>" maxlength="<?php echo $field_definition[10]; ?>"<?php if ($value_applies == '1') { ?> value="<?php echo $row["$field_definition[0]"]; ?>" <?php } ?> class="input_text_field" /></span> </div> </div> I'm using this html: Code: <div id="titlebox">
<div id="title">
<img src="images/title.png" alt="Garden Pub & Grille" />.
</div>
</div>
with this css: Code: html, body {
font-family: Century Gothic;
text-align: center;
background-color: #DEF9FA;
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
top: 0px;
position: relative;
}
body > #container {
height: auto;
min-height: 100%;
min-width: 100%;
}
#titlebox div {
background-color: black;
position: absolute;
min-width: 100%;
margin-left: 0px;
margin-right: 0px;
left: 0px;
top: 0px;
height: 64px;
z-index: 1000;
}
#title div {
width: 1000px;
background-color: black;
}
Trying to get a black bar across the top with an image centered in it. Problem is, when the page is smaller than the content and there is a horizontal scrollbar, the black bar only goes to the edge of the window, but when you scroll right, it dissapears and is cut off. I have a similar setup on the bottom of the page that works correctly (a table with links is inside that one). Why is this not working? Thanks. URL Image doesn't seem to be showing up, link: http://img15.imageshack.us/img15/5697/29946518.png |
|||||||