|
CSS - Scaling Div Height Problem
Hi,
I am having a problem with some getting a div to scale to the full height that I want it to. Any help would be much appreciated. Here is the link to the page in question: http://www.paultheillustrator.com/template.html Basically, I have 3 divs (wrapped in another div), floating left of each other. The left and right div are simply background shading images. The center div is where the content (on this page, my blog) is. The centre div and wrapper div heights are set to auto (as I want them to expand with the amount of content in the centre div). However, because of this, the left and right divs (which have no content, just a repeating background image), do not appear. Currently I have their height set to 100%. Any solutions would be much appreciated! Thanks, Paul Here is the CSS: Code:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../images/bg.gif);
background-repeat: repeat;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
line-height:14px;
color:#666666;
}
html, body {
height:100%;
}
#centre-right a:link {
color: #000000;
text-decoration: none;
background-color:#FFFF00;
}
a:visited {
text-decoration: none;
color: #000000;
background-color:#FFFF00;
}
a:hover {
text-decoration: underline;
color: #333333;
}
a:active {
text-decoration: none;
color: #44C3F3;
background-color:#FFFF00;
}
h2{
/*letter-spacing:-1px;*/
color:#999999;
font-family: Arial, Helvetica, sans-serif;
line-height:20px;
font-weight:100;
font-size:24px;
margin-left:-2px;
}
#overall_wrapper{
width:737px;
height:auto;
margin:0px auto;
}
#main_top{
width:737px;
background-image:url(../images/top-main.png);
background-repeat:no-repeat;
height:198px;
}
#menu_wrapper{
width:737px;
}
#left_bar{
width:28px;
height:auto;
background-image:url(../images/bg_left-strip.png);
background-repeat:repeat-y;
float:left;
}
#centre{
background-color:#FFFFFF;
height:auto;
width:681px;
float:left;
}
#centre-left{
width:168px;
height:100%;
float:left;
margin-left:28px;
margin-top:28px;
margin-bottom:28px;
}
#centre-right{
width:428px;
height:auto;
float:left;
margin-left:28px;
margin-top:28px;
margin-bottom:28px;
}
#dots{
margin-top: 14px;
width:70px;
height:14px;
background-image:url(../images/arrows-dots.gif);
float:left;
}
#centre-right .blog{
margin-top: 14px;
float:left;
width: 334px;
margin-left:14px;
}
.header-text{
}
#right_bar{
width:28px;
height:100%;
background-image:url(../images/bg_right-strip.png);
background-repeat:repeat-y;
float:left;
}
#footer{
width:737px;
height:257px;
background-image:url(../images/footer.png);
float:left;
}
Similar TutorialsHello, I'm new to these forums and I have a question. I am making a website (c-pj.net/lowercase/), and I'm having a problem. If I add too many posts or make a post to long it goes off the page, or at least the text does. What I mean by that is that the text ends up going onto the header and past my content holder image. Can anyone take a look at the source code, and my style sheet and tell me how I could make the height of my content area scale to the proper size, when I try to set it to auto it doesn't display at all. This could be caused by the fact that my content are is absolutely positioned but I'm just looking for some advice hopefully you guys understand my question. My style sheet is located he c-pj.net/lowercase/stylesheets/default.css I am just trying to create a simple layout, where there are specific margins around two color boxes. I'd like the color boxes to fill the space between the margins, 100% and to each take of 50% of height. I have kind of faked it...but I know there must be a better way. Any help would be great. Thanks. http://www.skimdesign.com/projects/mnomentana/ I have also reworked the code a bit, finding that if the position isn't "absolute" somewhere, the boxes won't show at all. Not sure why this is. But here is the reworked code: body { margin:20px 15px 10px 100px; font-family: trebuchet, verdana, sans-serif; } #leftcontent { float:left; width:25%; background:#fff; } #rightcontent { position: absolute; width:75%; height:100%; min-height:100%; } #green{ height:50%; min-height:50%; background-color:#CCFF33; } #grey{ height:50%; min-height:50%; background-color:#999999; } thanks. I'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>
Got it sorted now Thanks - Dan. I've made an image to explain my problem pretty well : imgur dot com /n8uOX (apparently I am not allowed to posts links , however its kinda hard for me to explain the problem so its easier to just show it) basically i want my page to always be rendered as I intended it to. I am pretty sure my coding is quite bad and thats what caused the problem , yet if anyone have any way to fix this please post in this thread. Thanks I am writing my site in XHTML 1.1 (application/xhtml+xml) entirely using ems. The page scales really nicely with browser text resizes however all of my rounded corners (background images), image bullet points, and any other background images do not. Is there any way to specify the background image width in ems? I think I'm going to have to mix presentational images with content otherwise. Is there a way to tell a browser to NOT zoom it when the user tries to zoom the text... I ask because I use text in a menu bar that I do not want to scale at all. Thanks How come IE obeys fixed and em font sizes and firefox doesn't? I want all my site text to be scaleable apart from the navigation text which I gave a fixed size of 10px. In IE the scaling is observed and all fonts are em apart from the navigation. In firefox however it scales ALL fonts which is very annoying. Is this a known problem? 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 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... Problem fixed... I'm stupid... a moderator can delete this... 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 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 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 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. 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~ 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 |
|||||||