|
CSS - Div {height: 100%} Problem
Hello!
I want to layout my page using CSS and DIVs. But I have a problem. If you look at this site , you will see that when a give to a div height 100%, it doesn't fill the remainder of the page. How can I fix this problem? Thanks Artashes Similar TutorialsI've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
I'm beginning to convert my site from HTML tables to CSS divs. I am having problems with two of my image borders, both on the left and right side of my layout. Neither of the borders stretch to the bottom of the page. The left border stretches to the height of the content in the current DIV. The right border doesn't appear at all. How do I make to borders stretch to the bottom of the page? CSS version: http://www.depiction.net/layoutsliced.php HTML version I'm trying to match: http://www.depiction.net/?id=tutorials I am trying to display some data from a mysql file in a spreadsheet format. The first column of data displayed is boolean so I want to show it as a check box, which requires defining a form. When I do this is it increases the row height on the screen, regardess of what I set the height to in the css file. If I take out the form column, it respects the row height setting in the css file. Any thoughts on why the form overrides the row setting and how to fix it? PHP Code: <tr class="firstrow"> <td class="colDone"> <form class="form1" name="form1" method="post" action=""> <input <?php if ($row_rsList['isDone']) {echo "checked=\"checked\"";} ?> type="checkbox" name="checkbox" value="checkbox" disabled="disabled" /> </form> </td> <td class="colItem"><?php echo $row_rsList['taskitem']; ?></td> <td><?php echo $row_rsList['taskpriority']; ?></td> <td><?php echo $row_rsList['taskcategory']; ?></td> <td><?php echo date("m-d-Y",strtotime($row_rsList['taskduedate'])); ?></td> </tr> from css file: tr.firstrow { background-color:#FFFFCC; height: 20px; } the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="aoms.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"> d </div> <div id="nav"> d </div> <div id="contentTop"> d </div> <div id="content"> d </div> <div id="contentBottom"> d </div> </div> </body> </html> the css: Code: body{
margin:5px 5px 5px 5px;
padding:0px 0px 0px 0px;
height:100%;
}
#container{
min-width:800px;
max-width:800px;
width:800px;
min-height:100%;
max-height:100%;
height:100%;
background-color:#ffffff;
}
#header{
background-image:url('images/header.jpg');
background-repeat:no-repeat;
min-height:124px;
max-height:124px;
height:124px;
padding:0px 0px 5px 0px;
}
#nav{
background-image:url('images/nav.gif');
background-repeat:no-repeat;
min-height:30px;
max-height:30px;
height:30px;
padding:0px 0px 5px 0px;
}
#contentTop{
background-image:url('images/contentTop.gif');
background-repeat:no-repeat;
min-height:28px;
max-height:28px;
height:28px;
padding:0px 0px 0px 0px;
}
#content{
background-color:#A1A1A1;
min-height:400px;
max-height:100%;
height:100%;
}
#contentBottom{
background-image:url('images/contentBottom.gif');
background-repeat:no-repeat;
min-height:28px;
max-height:28px;
height:28px;
padding:0px 0px 0px 0px;
}
the problem 'FF': 'container' is not stretching to 100% height, its only as big as the other divs stretch and in IE its more than 100%? hope you can understand that. Shem I've been browsing the web for a while now and all I can find are issues relating to people being unable to get their divs to span the whole viewport, but I'm having the opposite problem. I just want this div to span the distance of the content inside it, but at 100% height. This is just an experimentation of mine. I'm trying to get a div to go from 0% height to 100% height, but that 100% height I only want to be the 100% height of the content in this div, and not the entire content. What attributes need to be set for 100% of this div to be just the intrinsic height? thanks~ Have problem with DIV height not displaying as it should in Explorer 6.0. It displays correct in FF 1.03 and OP 8.0 and NE 7.2 Have not tested any other browsers. Please see attached .htm file for example code. Any idea why not working in IE? Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<br><br>
<table border=1 cellpadding=0 cellspacing=0><tr>
<td>EmptyCellHere</td>
<td valign="top">
<div id="hdiv1" style="display:block; position:relative; z-index:1; height:50px; width:200px; background-color:#44f"></div>
</td>
<td>Why is the red rectangle to the left not 10px x 10px in Explorer (6.0)<br> it is showing up right in FF 1.0.3 and OP 8.0 and NE 7.2</td>
</tr></table>
<div id="hubba" style="display:block; position:absolute; z-index:2; visibility:hidden; top:0px; left:0px; margin:0; padding:0; background-color:#f00; width:10px; height:10px;">
</div>
<!--<img src="spacer.gif" height="10px" width="10px" alt="" border="1">-->
</body>
</html>
<script>
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
// first get left and top of the hdiv1
var el, left, top;
el = document.getElementById('hdiv1');
left = findPosX(el);
top = findPosY(el);
document.getElementById('hubba').style.left = left;
document.getElementById('hubba').style.top = top;
document.getElementById('hubba').style.visibility = 'visible';
</script>
Hi Guys I am building a web log and my plan is to insert text in to the web log dynamically, which means I will not be able to rely on a fixed height. How do i get a div container to follow the height of a div inside it? I am using a div container that has a div floated to the left and a div floated to the right inside it. The text which i want to insert dynamically will appear in the right div, is there a way for the left div to also follow the height of the right div? I have tried using height: auto and height: 100% . my web log can be found here my css file is at In IE the web log looks almost how it should except for the grey space on the bottom left. In FF it is even uglier! Any help or suggestions would be much appreciated hi, I would like my #leftNav to have 100% height and fit the hiehgt of its container. After looking into it I found that the parent has to have 100% also, and body and html My problem is that in IE, it works but leaves a ridiculous amount of white space under the bottom of the site. And in FF it #leftNav does not go 100% height but still has some white space under the bottom of the site (meaning u can scroll down but its just white) see it here so heres my css: PHP Code: html { height: 100%; } body { margin: 0; padding: 20px 0 0 0; color: #000; font-size: 12px; font-family: times; background: #fff; height: 100%; } #container { height: 100%; margin:0px auto; padding: 0; width: 760px; display: table; } #content { margin:0px auto; padding: 0; width: 760px; height: 100%; } #contentMain { padding: 0; margin: 0; float: right; width: 632px; height: 100%; } #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; height: 100%; } thank you Okay so I essentially have 3 divs. #header #body #footer header will ALWAYS be 60px footer will ALWAYS be 20px I would like body to fill 100% of the remaining space no matter what, with no scrollbars showing. Is this even possible? I had gotten it to work in FF and then saw IE7 was a no go. I did something conceptually like this Code:
<div id="container">
<table>
<tr>
<td><div id="header"</td>
</tr>
<tr>
<td height=100%>
<div id="body"></div>
</td>
</tr>
<tr>
<td valign="bottom"><div id="footer"></div></td>
</tr>
</table>
</div>
in CSS, the HTML, BODY, #body, and #container are set to 100% height Problem fixed... I'm stupid... a moderator can delete this... Hello, This is my first post here, I have been trying at another forum to get help but it seems they have a constant flow of 80 viewers and none of them know css? The sooner this can get done, the better and thanks in advance! Problem: I have many divs, bla bla bla. Then it comes down to having the main container holding several divs. The container holds a left and right div. Within the left and right div are a few more divs, such as top divs and then a nav and some content. Basically, the nav and content don't end at the same point ( and they should ). ALSO, when content exceeds the current content space ( which is set at one spot for some reason? ) the content space just stays and the content runs on farther. Please take a look at the index file and css below and see if you can help me with my two problems, and again Thanks!! Code: <?php
$menu = $_GET['menu'];
if (isset($menu)) {
include ("$menu.php");
} else {
include ("home.php");
}
?>
<html>
<head>
<title>Mark's coins & jewlery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="misc/stylesheet.css" rel="stylesheet" type=text/css title=default />
</head>
<body>
<div id="container" class="clearfix">
<div id="left">
<div id="flashbg">
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=6,0,29,0" width="206" height="171">
<param name="movie" value="misc/movie.swf">
<param name="quality" value="high">
<embed src="misc/movie.swf" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="206" height="171"></embed>
</object>
</div>
</div>
<div id="nav"><br />
<img src="misc/ladiesjewlry.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=lrings">Ladies Rings</a> </li>
<li><a href="index.php?menu=lnecks">Ladies Necklaces</a> </li>
<li><a href="index.php?menu=lwatches">Ladies Watches</a> </li>
<li><a href="index.php?menu=lbpp">Ladies Brooches, Pins & Pendents</a>
</li>
<li><a href="index.php?menu=lbracelets">Ladies Bracelets</a> </li>
<li><a href="index.php?menu=purses">Purses</a> </li>
</ul>
</div>
<img src="misc/mensjewlry.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=mrings">Mens Rings</a> </li>
<li><a href="index.php?menu=mchains">Mens Chains</a> </li>
<li><a href="index.php?menu=mbracelets">Mens Bracelets</a> </li>
<li><a href="index.php?menu=mwatches">Mens Watches</a> </li>
<li><a href="index.php?menu=mpendents">Mens Pendents</a> </li>
</ul>
</div>
<img src="misc/coins.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=goldeagles">Gold Eagles</a> </li>
<li><a href="index.php?menu=silvereagles">Silver Eagles</a> </li>
<li><a href="index.php?menu=morgandollars">Morgan Dollars</a> </li>
<li><a href="index.php?menu=peacedollars">Peace Dollars</a> </li>
<li><a href="index.php?menu=othercoins">Other Coins</a> </li>
</ul>
</div>
<img src="misc/crystalandcollectible.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=lalique">Lalique</a> </li>
<li><a href="index.php?menu=versace">Versace</a> </li>
<li><a href="index.php?menu=antique">Antique</a> </li>
</ul>
</div>
</div>
</div>
<div id="right">
<div id="logo">
<center>
<img src="misc/logo.jpg" />
</center>
</div>
<div id="redbar"> </div>
<div id="content">
<?php
if (isset($menu)) {
echo "<center><img src=headers/$menu.jpg /></center><br />";
} else {
}
echo "$content";
?>
</div>
</div>
</div>
</body>
</html>
stylesheet Code: html, body {
height: 100%;
}
body {
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#container {
background:#FBFBFB 0 0 repeat-y;
height: 100%;
width: 648px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
html #container {
height: 100%;
}
#left {
float: left;
width: 223px;
height: 100%;
background-color: #FBFBFB;
}
#flashbg {
position: relative; left: 0px; top: 0px;
width: 223px;
height: 190px;
background-image: url(flashbg.jpg);
}
#flash {
position: absolute; left: 7px; top: 7px;
width: 206px;
height: 171px;
}
#nav {
position: relative; left: 0px; top: 0px;
width: 223px;
background-image: url(navbg.jpg);
}
#right {
float: right;
width: 425px;
}
#logo {
position: relative; left: 0px; top: 0px;
width: 425px;
background-color: #000000;
}
#redbar {
position: relative; left: 0px; top: 0px;
width: 425px;
height: 31px;
background-image: url(redbarbg.jpg);
}
#content {
position: relative; left: 0px; top: 0px;
height: 100%;
width: 425px;
background-color: #FBFBFB;
}
nav2 {
width: 150px;
}
ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
#nav2 li a {
display: block;
color: #000;
text-decoration: none;
width: 90%;
}
#nav2 li a:hover {
background-color: #2586d7;
color: #fff;
}
test the site for preview: www . ween . net / markscoinsandjewlery THANKS The problem is that it seems to be making a 10px scrollbar that I just can't seem to get rid of. I've tried all sorts of things to get rid of the scrollbar and none of them seem to work. Can anyone give me a helpful hand or some pointers? This is my first go at a fully css xhtml document. Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : static width and centered</title>
<style type="text/css">
html,body {
height:100%;
}
#frame {
width:770px;
margin-right:auto;
margin-left:auto;
margin-bottom: 0px;
padding:0px;
text-align:left;
height:100%;
background:#cdcdcd;
}
#contentleft {
width:170px;
padding:0px;
float:left;
background:#dadada;
height:100%;
}
#contentcenter {
width:600px;
padding:0px;
float:right;
background:#eee;
height:100%;
}
#contentheader {
background:#fff;
}
#contentmenu {
background:#fff;
}
p,h1,h2,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
h2 {
font-size:11px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
</head><body>
<div id="frame">
<div id="contentheader"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: static width and centered (Title Pic Here)</h1></div>
<div id="contentmenu"><h2><a href="home.asp">Menu Could go here</a></h2></div>
<div id="contentcenter">
<h1>contentcenter</h1>
<p>3 columns all with static widths, and contained in a parent DIV wihich remains centered in the window. One rather serious limitation of this particular technique is that if any of the three content DIVs contains an image or a really long word that is longer than the width of the DIV, it totally breaks the layout. Each browser breaks it differently.</p>
<p><strong>Scroll down for the source.</strong></p>
<p >Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paridigm shifts and focusing on core suitability and cross-training. </p>
</div>
<div id="contentleft">
<h1>contentleft</h1>
<p>Marketing teams input produce cross purposing in view of goal alignments due to knowlege paucity, necessitating workflow education and orientation. </p>
</div>
</div>
</body>
</html>
Hopefully someone can help. I can't seem to get a div to have 100% height to work properly across all browsers. http://dis.emsix.com/default.asp The outermost div (with the gray side borders) is supposed to stretch the page length. I've made some minor fixes to get it to work in IE6 & 7, but it doesn't work in Safari of Mac FF (PC FF is fine). Any help with or insight on this would be great! Thanks in advance. here is my style sheet.....simplified, so i can figure out the problem before i get too deep: body { margin:0; padding:0; height:100%; } #container{ height: 100%; width: 750px; margin: 0 auto; } #left_col{ height: auto; width: 200px; float:left; } #right_col{ width: 550px; height: auto; float:left; } and my page very very simplified: <body> <div id="container"> <div id="left_col">content </div> <div id="right_col"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </body> Problem is that the right column will stretch down to accommodate the text, but the left column will not....nor will the container.. how can i get the left_col or container to stretch when the right_col stretches...??? It works in IE6 and IE7 but not Fire Fox... Hello All, I'm currently trying to finish the main design for my church's website - and I'm having a problem with the #mainbody height. LINK TO SITE :: http:// update.gcmpg.com/ If I don't specify a height for #mainbody, it looks like this :: http:// img522.imageshack.us/img522/7663/noheight.png If I do specify a height for #mainbody (350px in this case), it looks like this :: http:// img716.imageshack.us/img716/5158/height350px.png Basically I'm trying to avoid having to specify a height for #mainbody on every page, it seems like a ridiculous notion to have to do so. I've tried the clearfix, but it doesn't work. and I'm having a brain fart. Thanks in advance for all the replies! Cheers! PS -don't mind the ugly graphics - they're just placeholders Hi guys, I have a problem that really bugs me and I'm probably not seeing the super-easy simple solution that is certainly there. s369533597(dot)onlinehome(dot)us s369533597(dot)onlinehome(dot)us(slash)templates(slash)edison(slash)css(slash)template(dot)css and art.sheet is the tag. (site build on joomla 1.6) If your browser window will show more than 900px in height you'll see immediately my problem. the "body content" area will resize to the window height and not to the amount of content in it leaving a lot of blank space depending on the browser window height. I've tried all the min-height and height options and combinations but nothing really works. If I'll set up a particular height for that tag it will be OK for the home page but on any other page the overflow look awful. I just can't make it fluid. any advise? I have a table which has three rows of one cell each. I have specified the height of each cell by a class referring to an external stylesheet. There are two other classes which may be relevant, one in an internal stylesheet, and one referring to the same external stylesheet. In Firefox and Internet Explorer 5.2 (the latest available for the Mac, as far as I know), these cells are displayed correctly, but in Safari, they cut off at the bottom of the text in the box, and are therefore not the correct height. Can anyone help me correct this, please? This is the code: Code: <STYLE TYPE="text/css" MEDIA=screen>
<!-- .rbc { color: white; background-color: maroon; } -->
</STYLE>
<tr class="rb2">
<td class="rbc">
<div class="squash">some text<br /></div>
<div class="squash">some more text<br /></div>
<div class="squash">yet more text<br /></div>
<div class="squash">guess what? some more text!<br /></div>
</td>
</tr>
This is the CSS: Code:
.rb2 {
height: 133px;
vertical-align: top;
}
.squash {
line-height: 85%;
}
There are other differences, all with Internet Explorer not behaving properly, but I'll do one question at a time, or it'll get confusing! Thanks in advance. |
|||||||