|
CSS - Css Positioning (height Problem)
I am trying to position 3 divs in two columns.
1 is on the left 2 are on the right All 3 are inside the main div, which doesn't have a height. The lower of the right divs appears outside the border of the main div in FF and Chrome, but looks fine in IE if I add a fixed height to the main div, it works fine, but want it to adjust the height based on the divs that are inside it. Is there a way to do this? Code: <html>
<head>
<style>
#module {
width: 970px;
background-color: #ffffff;
font-family : "Calibri","Arial","Times New Roman";
border: 1px solid black;
height:auto;
}
#left-side-summary
{
width: 650px;
height: 200px;
margin: 10px 10px 10px 10px;
/*border: 1px solid black;*/
}
#left-line-summary-text
{
width:650px;
height:30px;
}
#right-side-profile-status
{
/*border: 1px solid black;*/
width: 280px;
height: 200px;
margin: 10px 10px 10px 10px;
float: right;
}
#right-side-import-friends
{
/*border: 1px solid black;*/
width: 280px;
height: 400px;
margin: 10px 10px 10px 10px;
float: right;
clear:right;
}
</style>
</head>
<body>
<div id="module">
<div id="right-side-profile-status">
Right side Profile Status
</div>
<div id="right-side-import-friends">
Import friends
</div>
<div id="left-side-summary">
<div id="left-line-summary-text">
left-line-summary-text
</div>
<div id="left-line-summary-text">
left-line-summary-text
</div>
<div id="left-line-summary-text">
left-line-summary-text
</div>
</div>
</div>
</body>
</html>
Similar TutorialsI want to set up a table so that error messages appear directly above specific table columns in the form of a div tag with a red background and the same width as the column. To do this I've added a div tag inside the <th> element of the table, with the display property set to 'none'. Code: <th> <nobr>Header Content</nobr> <div id="error_message">Error Message</div> </th> When I want to display an error message above the table I use the following styles on the div tag Code:
background-color: #ffcccc;
width: 100%;
position: relative;
left: 0px;
top: -100px;
z-index: 1;
display: block;
It displays the div tag above the header like I want, but it still stretches the height of the <th> element as if it was still contained inside of it. How do I do this without stretching the cell height? I have a menu div on the left hand side of the screen. This menu div contains a <UL> that serves as the menu. The height of this UL is variable as it is user dependant, and I want to have a DIV below the UL at all times. How would I go about that? Here's the code I have at the moment: Left menu div Code: #left
{
padding:0px;
margin:0px;
overflow:hidden;
position:absolute;
color:#000000;
left:0px;
top:107px;
bottom:0px;
width:185px;
font-size:1.2em;
z-index:4;
overflow:auto;
background-color:#ffffff;
}
UL: Code:
#menu
{
list-style-type:none;
padding:2px;
margin:0px;
width:170px;
position:absolute;
top:0px;
left:0px;
z-index:100;
}
How would I need to style the DIV because I can't seem to get it to work? Example can be found at: http://www.dvolve.org/ktt/ Hi, I have two images which are on top of each other, and the one on top is hidden. I use JS to change the source of the top to a new image, then fade the top image visible, then change the source of the bottom to be the same as the top, then make the top hidden (and so on and so on). To position the images on top of each other, I am using position: absolute. This works well when the DIV container has a defined height, however, when not the DIV collapses upon itself and the images are not displayed. Any suggestions how I might overcome this? Thanks Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Heights</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.mod_rotator
{
position: relative;
overflow:hidden;
height: 100px;
}
.mod_rotate_image {position: absolute;}
img.mod_rotate_image.front {display: none;}
</style>
</head>
<body>
<div class="mod_rotator">
<img class="mod_rotate_image back" src="images/rotator/corporateimage1.jpg" />
<img class="mod_rotate_image front" src="images/rotator/corporateimage1.jpg" />
</div>
</body>
</html>
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>
Hi! Remind me please how to position something straight at the middle of display height? I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ 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>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo 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 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 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>
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; } 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 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 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 Problem fixed... I'm stupid... a moderator can delete this... 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>
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 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 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~ |
|||||||