|
CSS - Problems With The Height Of Div Element
Similar TutorialsI seem to recall that CSS1 or 2 had a property that could be set to specify the height of a text input box or check box or radio button, but it's been a while since I've done it and I can't find it in my notes or find the search terms that will turn up what I'm looking for, or even the page that I did it on. I thought
Code: <input type="text" style="{ height: Xpx; }">
would do it, but it doesn't. Here's some of my code ... xhtml Code: Original - xhtml Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1"></meta> <meta http-equiv="Content-Language" content="en-US"></meta> <style type="text/css"> body { margin: 0px; padding: 0px; font: normal normal normal 12px/14px Veranda,Arial,sans-serif } div { } table { width: 100%; border: none } tr { } td { } .right { text-align: right } ul { margin: 0px; padding: 0px; list-style: none } li { padding-left: 25px } label { } input { font: normal normal normal 9px/11px Arial, Veranda, sans-serif; } .textrightinput { text-align: right; height: 18px } .textleftinput { text-align: left; height: 18px } .buttoninput { height: 18px } </style> <title>Donations</title> </head> <body> <!-- Begin Body Table --> <div> <form id="form" action="https://my.domain.com/donate/" method="post"> <fieldset> <legend>Select the project(s) you wish to support.</legend> <input type="hidden" name="cc" value="checkEntries" /> <table> <tr> <td> <ul> <li><label><input type="checkbox" name="projects[]" value="Doin-it-Myself Hydropower Project" checked="checked" />Doin-it-Myself Hydropower Project</label></li> <li><label><input type="checkbox" name="projects[]" value="Joe Cell Development Project" checked="checked" />Joe Cell Development Project</label></li> <li><label><input type="checkbox" name="projects[]" value="Site Maintenance/Upkeep" checked="checked" />Site Maintenance/Upkeep</label></li> <li><label><input type="checkbox" name="projects[]" value="extra" onclick="javascript:enable('form','other')" /> Other: <input id="text" class="textleftinput" type="text" name="projects[]" value="blah blah" disabled="disabled" /></label></li> <li class="center"><label> Amount: $<input id="text" class="textrightinput" type="text" name="amount" value="25" title="Enter the dollar value you intend to donate." /></label></li> </ul> </td> </tr> <tr> <td class="right" colspan="2"> <input class="buttoninput" type="submit" value="Next⇒" title="Click to verify that we correctly received your entries." /> </td> </tr> </table> </fieldset> </form> </div> <!-- End Body Table --> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1"></meta>
<meta http-equiv="Content-Language" content="en-US"></meta>
<style type="text/css">
body { margin: 0px; padding: 0px; font: normal normal normal 12px/14px Veranda,Arial,sans-serif }
div { }
table { width: 100%; border: none }
tr { }
td { }
.right { text-align: right }
ul { margin: 0px; padding: 0px; list-style: none }
li { padding-left: 25px }
label { }
input { font: normal normal normal 9px/11px Arial, Veranda, sans-serif; }
.textrightinput { text-align: right; height: 18px }
.textleftinput { text-align: left; height: 18px }
.buttoninput { height: 18px }
</style>
<title>Donations</title>
</head>
<body>
<!-- Begin Body Table -->
<div>
<form id="form" action="https://my.domain.com/donate/" method="post">
<fieldset>
<legend>Select the project(s) you wish to support.</legend>
<input type="hidden" name="cc" value="checkEntries" />
<table>
<tr>
<td>
<ul>
<li><label><input type="checkbox" name="projects[]" value="Doin-it-Myself Hydropower Project" checked="checked" />Doin-it-Myself Hydropower Project</label></li>
<li><label><input type="checkbox" name="projects[]" value="Joe Cell Development Project" checked="checked" />Joe Cell Development Project</label></li>
<li><label><input type="checkbox" name="projects[]" value="Site Maintenance/Upkeep" checked="checked" />Site Maintenance/Upkeep</label></li>
<li><label><input type="checkbox" name="projects[]" value="extra" onclick="javascript:enable('form','other')" />
Other: <input id="text" class="textleftinput" type="text" name="projects[]" value="blah blah" disabled="disabled" /></label></li>
<li class="center"><label>
Amount: $<input id="text" class="textrightinput" type="text" name="amount" value="25" title="Enter the dollar value you intend to donate." /></label></li>
</ul>
</td>
</tr>
<tr>
<td class="right" colspan="2">
<input class="buttoninput" type="submit" value="Next⇒" title="Click to verify that we correctly received your entries." />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<!-- End Body Table -->
</body>
</html>
Can you see what I'm doing wrong? screenshot.bmp I wish to set a container to have auto height... meaning the height of the container is defined by it's contents. I have had this working in many other designs... but this one baffles me. (Problem is only in good browsers mozila/firebird) Here it is with the height of #main @ auto (attached) Here it is with the height of #main @ 600px (attached) Here is the HTML code: Code: <!-- Code --> <!-- Document --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ben Gunn</title> <link rel="stylesheet" href="index.css" /> </head> <body> <div id="main"> <img src="images/default_header.gif" id="header" height="120" width="749"/> <div id="content"> <div class="left"> <ul id="nav"> <li><a href="#">News</a></li> <li><a href="#">Music</a></li> <li><a href="#">Media</a></li> <li><a href="#">Bio</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="right"> </div> </div> </div> <br /><br /> </body> </html> And here is the code for the CSS: Code:
body {
margin: 0;
padding: 0;
background-color: #666666;
}
#header{
margin-left: 2px;
}
#main {
position: relative;
width: 756px;
height: 600px;
left: 50%;
margin-left: -355px;
margin-top: 20px;
background-image:url("images/background-bezel.gif");
background-repeat: repeat-y;
padding: 0px;
padding-bottom: 20px;
/*border: black 1px solid;*/
}
#content{
padding: 10px;
}
.left{
float: left;
width: 30%;
}
.right{
float: right;
width: 60%;
}
#nav{
list-style: none;
margin: 0;
padding: 0;
border: none;
padding-left: 10px;
font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color: white;
font-weight: lighter;
}
#nav li {
background-color: #8B0000;
border-bottom: 1px solid #CCCCCC;
margin: 0;
padding: 1px 0 2px 0;
}
#nav li a {
display: block;
text-decoration: none;
width: 100%;
color: white;
padding-left: 5px;
}
html>body #nav li a {
width: auto;
}
#nav li a:hover {
background-color: #191970;
color: #fff;
}
Please notify me of the moronic mistakes I am making... thanks. I'm trying to create an image-navigation system using the popular css sprites technique. However, on the very first image (doesn't occur with any images following), IE6 (and below) increases the height of that image. Here's a very simple code. There are no other codes or elements to interfere with this issue, and yet, it is still present. 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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<style type="text/css">
.nav_top{background:url('http://i185.photobucket.com/albums/x14/mMaNgOeZz/nav-1.gif'); float:left; }
#img1{background-position: 0px 0px; width: 1200px; height: 14px; }
#img2{background-position: 0 -14px; width: 101px; height: 34px;}
</style>
</head>
<body>
<a class="nav_top" id="img1"></a>
<a class="nav_top" id="img2"></a>
</body>
</html>
Any help would be appreciated to no end. Thanks in advance. Layout Page I know. It's not too great yet. But I've just started and it's still in the baby stages. whenever I add a width or height paramater to "navBar" the background image NEVER shows up, even with content! Why is that? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Coast Guard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
body {
background: url(Images/bgClouds2.jpg);
height: 100%;
}
html {
height: 100%;
}
.navigationBar {
width: 150px;
height: 1000px;
background-image: url(Images/navBarImage.png);
background-repeat: repeat-y;
border-style: dotted;
overflow: none;
}
#section {
padding-left: 57px;
overflow: none;
font-size: 15px;
text-align: left;
}
#top {
width: 901px;
height: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 0px;
background-color: white;
border-style: groove;
border-color: darkblue;
}
#navBar {
background-image: url(Images/navBG.jpg)
height: 73px;
border-style: dotted;
}
</style>
<script type="text/javascript">
<!--
// -->
</script>
</head>
<body>
<div id="top">
<center>
<img src="Images/CircleBanner.png" style= "border-style: none;" align="center">
</center>
<div id="navBar">
alex wait
</div>
Hi everybody Is there a way to inherit the height of a surrounding table cell? <td> <a href="..." style="display: block;">...</a> <!-- Should have the same height as the td --> </td> Thanks for help :-) Josh Hi guys, I just wanted to say that I think devshed is a kick butt place for getting help with all sorts of CSS problems... always seems whenever I post that someone really helpful ends up helping me solve the problem in a way I hadn't thought of... So here's the issue: I need to put two elements into a div, one aligned on the left side and one aligned on the right Now what I'm looking at is the section where I have the Home text and the Quick News. So I've put the design into XHTML and CSS he But I can't seem to get the news line to move over properly. Any suggestions? I have used float:right but it just doesn't seem to work. I tried putting a div in and align=right but that pushes the element onto the next line which I don't want. Any ideas guys? There simply has got to be an easy way to align text within a div that I'm missing somehow. Thanks! i am working on a practice web site and im having problems. i set the #document div set to min-height:400px; but then the when i input content that overpasses 400px in the col div it goes over the footer div. and if in #document i set height to a specified height it works but then i have to do that for every page specifically. i hope you can help and i explained it ok. here's the code p.s. it works fine in IE go figure but not in FF or chrome i thought that #document would increase in height automatically as #col increased Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="9.css" />
</head>
<body>
<div id="Document">
<div id="Header">
<div id="Top_Right">
<ul>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Use</a></li>
</ul>
</div>
<div id="Logo"><a href="#"><img src="Images/guitar102.png" alt="guitar102" /></a></div>
</div>
<div id="Nav"><ul>
<li><a href="#"><img src="Images/home.png" /></a></li>
<li><a href="#"><img src="Images/links.png" /></a></li>
<li><a href="#"><img src="Images/about.png" /></a></li>
<li><a href="#"><img src="Images/contact.png" /></a></li>
</ul>
<hr />
</div>
<div id="Side_Nav">
<ul>
<li><a href="#"><img src="Images/less.png" /></a></li>
<li><a href="#"><img src="Images/art.png" /></a></li>
<li><a href="#"><img src="Images/his.png" /></a></li>
<li><a href="#"><img src="Images/news_.png" /></a></li>
<li><a href="#"><img src="Images/ad.png" /></a></li>
</ul>
</div>
<div id="Col">
<div id="Column1">
<p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p>
<p>Content goes here. Content goes here.</p><p>Content goes here .Content goes here.</p> <p>Content goes here.Content goes here.</p>
<p>Content goes here .Content goes here.</p><p>Content goes here .Content goes here.</p>
</div>
<div id="Column2">
<p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p>
<p>Content goes here. Content goes here.</p><p>Content goes here Content goes here.</p> <p>Content goes here.Content goes here.</p>
<p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p>
</div>
<div id="Column3"> <p>Content goes here.Content goes here.</p><p>C ontent goes here.Content goes here.</p>
<p>Content goes here. Content goes here.</p><p>Content goes here.Cont ent goes here.</p> <p>Content goes here.Content goes here.</p>
<p>Content goes here. Content goes here.</p>
<p>Content goes here.Cont ent goes here.</p>
<p>Content goes here.Content goes here.</p>
<p>Content goes here. Content goes here.</p>
<p>Content goes here.Cont ent goes here.</p>
<p>Content goes here.Content goes here.</p>
<p>Content goes here. Content goes here.</p><p>Content goes here.C ontent goes here.</p></div>
</div>
</div>
<div id="Footer">
<div id="Top_Fot"></div>
<div id="Fot"></div>
<div id="Bot_Fot"></div>
</div>
</body>
</html>
Code: /* CSS Document */
Body{ background-color:#000000;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
margin:0px;
padding:0px;
}
h1{
margin-left:20%;
}
a {
text-decoration:none;
color:#FFFFFF;
}
a:hover {
text-decoration:none;
color:#FFFFFF;}
#Document {
background:url(Images/1.jpg) repeat-y;
background-color:#310606;
color:#FFFFFF;
height:700px;
width:1005px;
}
#Header {
height:154px;
background-color:#310606;
margin:0px; padding:0px;
float:left;
width:1005px;
background:url(Images/header4.png) no-repeat;
}
#Logo {
margin:0px 0 0 5px;
height:120px;
width:200px;}
#Logo img{
border-style:none;}
#Top_Right {
margin:0px;
padding:15px 10px 0 0;
height:100px;
width:150px;
float:right;
}
#Top_Right ul {
list-style:none;
}
#Top_Right ul li{
margin:5px 0 0 0;}
#Col {
margin:5px 0 0 120px;
float:left;
text-align:justify;
padding:10px 10px 10px 10px;
width:780px;}
#Column1{
float:left; width:280px; margin:0 30px 0px 0;
}
#Column2{
float:left; width:210px; margin-right:30px;}
#Column3{
float:left; width:150px;}
#Nav{
width:640px;
height:60px;
float:left;
margin:0 40px 0 125px; padding:0px 0 0 60px;
}
#Nav ul{
margin:0px 0 0 0px; padding:0px 0 0 5px;
}
#Nav ul li{
display:inline;
margin:0px;
padding-left:20px;
list-style:none;
}
#Nav ul li img {
border-style:none;}
#Nav ul li a{
color:#310606;
text-decoration:none;}
#Nav ul li a:hover{
color:#310606;
text-decoration:none;}
#Side_Nav {
height:400px;
position:absolute;
top:156px;
left:0px;
width:120px;
padding:0px 0 0 0px;
margin:2px 0 0 0px;
}
#Side_Nav ul {
margin:0px;
padding:0px;}
#Side_Nav ul li{
display:inline;}
#Side_Nav ul li img{
border:none;
margin:0px;
padding:0px;}
#Footer {
background-color:#000000;
margin:0px;
padding:0px;
width:1005px;}
#Fot {
width:98%;
height:50px;
padding:10px 10px 10px 10px;
background-color:#310606;}
#Top_Fot {
height:11px;
background:url(Images/footer_start.jpg) repeat-x;}
#Bot_Fot {
height:24px;
background:url(Images/bottom.jpg) bottom no-repeat;}
Trying to hone my CSS skills, but as usual I'm having trouble with the height property. The page is buzzdphoto dot com / times and you should notice part of the white containing box does not extend to the bottom of the page as it should, instead the content falls past it. I've viewed it in both Firefox 3.5 and IE8 and am getting similar results with both. Any ideas? hey.. i have a webdesign _Link here_ but i need it to look like this _picture_ but i can't get the gradient background height: 100%; the borders and content box do i need to get height: 100%; too something like my personal homepage i am new to css designin... plz help me.. my code is this Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin: 0px auto;
text-align: center;
height: 100%;
}
#container {
margin: 0px auto;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
}
#top_bg{
margin: 0px auto;
left: 0px;
top: 0px;
width: 100%;
height: 151px;
z-index: 2;
background-image:url(images/topbg.gif);
}
#top {
margin: 0px auto;
left: 0px;
top: 0px;
width: 701px;
height: 100px;
z-index: 3;
background-image:url(images/top.gif);
}
#menu_knapper{
float: right;
z-index: 4;
height: 30px;
width: 60px;
top: 100px;
}
#menu {
margin: 0px auto;
z-index: 5;
height: 51px;
width: 701px;
top: 100px;
background-image:url(images/menu.gif);
}
#content_bg {
margin: 0px auto;
z-index: 6;
height: 100%;
width: 100%;
top: 151px;
background-image:url(images/bg.jpg);
background-position: top right;
background-repeat: repeat-x;
}
#logo {
margin: 0px auto;
background-image:url(images/logo.gif);
width: 701px;
height: 114px;
z-index: 7;
left: 29px;
top: 151px;
}
#content {
margin: 0px auto;
width: 701px;
height: 100%;
z-index: 8;
top: 265px;
}
#left_border {
margin: 0px auto;
width: 30px;
height: 400px;
float: left;
background-image:url(images/left_border.gif);
}
#right_border {
margin: 0px auto;
width: 30px;
height: 400px;
float: right;
background-image:url(images/right_border.gif);
}
#content_indhold {
margin: 0px auto;
width: 641px;
float:left;
height: 400px;
background-color: #FFFFFF;
}
#left_footer {
margin: 0px auto;
width: 30px;
height: 30px;
float: left;
background-image:url(images/left_footer.gif);
}
#right_footer {
margin: 0px auto;
width: 30px;
height: 30px;
float: right;
background-image:url(images/right_footer.gif);
}
#footer {
margin: 0px auto;
width: 641px;
float:left;
height: 30px;
background-image:url(images/bottom_border.gif);
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top_bg">
<div id="top">
<div id="menu_knapper">menu</div>
</div>
<div id="menu"></div>
</div>
<div id="content_bg">
<div id="logo"></div>
<div id="content">
<div id="left_border">pik</div>
<div id="content_indhold">dut</div>
<div id="right_border">tis</div>
<div id="left_footer">pik</div>
<div id="footer">dut</div>
<div id="right_footer">tis</div>
</div>
</div>
</div>
</body>
</html>
Hello, Two questions, The first is that I am struggling to get my head round making the min-height work on my page. My page is at http://www.garethgroup.com/test/floatcolumnsattempt/index.html. This is not a commercial website but more of a website of attempted collaborations. I am also wondering if there is a quicker way of opening divs - for example, can you use div id's like this - Code: <div id="div1" "div2" "div3"> Thanks and Kind Regards, Ben. Hello, 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 Hi guys, I am struggling a bit with getting the background of one of my css-created columns to be the height I want it to be. If you have a look at http://www.addictivemedia.com.au/clients/REW/ you will see (depending on your browser) that the left column behaves not the way I want it to: - in IE 6 it creates an additional scrollbar (because it adds the height of the banner at the top to the 100% height I gave to the column) - in all other browsers it is not as long as the column on the right The effect I want to achieve is of course for both columns to have the same height and (if possible) to always push the footer to the bottom of the browser window. I have tried the pushing to the bottom many times and out of previous posts I gather that it probably won't happen for all browsers. But I cannot figure out why the left column doesn't extend as far as the right one. Thanks for your help! Hi, I'm developing the following site and am having some issues with spacing and heights. The first and major problem is in Firefox. As you will see at the bottom, my content "grows" out of it's wrapper div for some reason. It works great in IE, where the height of the content will determine how high both the side and main columns are. The second problem is in IE. There is too much space between the menu and the image above it. I want it to be flush to the image, as it is in Firefox. How can I go about solving these two issues? Hi, It seems I just can't get away from the height: 100% problems. I tryed making my body 100% and my container min-heaight 100% but that didn't work. I'll post the index and css below. I also want there to be a 15px space between each box 'lightbox, lightbox2, topbox, bottombox.. (they aren't spacing at all?) www.carbenco.com/resume/ index 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>Terry Cantwell - Resume</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" title="default" /> </head> <body> <div id="container"> <div id="topbox">Hi</div> <div class="lightbox">Hi</div> <div class="lightbox2">Hi</div> <div class="lightbox">Hi</div> <div class="lightbox2">Hi</div> <div class="lightbox">Hi</div> <div class="lightbox2">Hi</div> <div class="lightbox">Hi</div> <div id="bottombox">Hi</div> </div> </body> </html> css Code: body {
margin: 0px;
padding: 0px;
text-align:center;
background-color: #3F3727;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
#container {
position: relative; top: 0px;
margin-left: auto;
margin-right: auto;
text-align:center;
width: 600px;
height: 100%;
background-color: #E9E4DC;
}
#topbox {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #e9e4dc;
}
.lightbox {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #B1A283;
}
.lightbox2 {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #9B8862;
}
#bottombox {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #e9e4dc;
}
i have a page that changes size depending on what is inside it... but i want to set a default size, and if the data goes over that default size, i then want it to autostretch... i think IE will do this... but Firefox will not, it just keeps the set height, and flows the data outside of the div container Hi i have a content div inside a container div, the content in the content div stretches automatically but the container div doesnt stretch to accomodate the bigger content div....is it possible to get it to stretch the same as the content? the only solution ifound was to fix the height and set the overflow to auto so that i get a scroll bar but that looks rubbish ;o( cheers Andy Link: bitbonton [dot] com For some odd reason, the %100 height on the left column does not seem to work ... the dotted line ends after the content. Also, there is another problem where if the scroller bar appears on the right because the content is too long, it pushes everything leftward. tried to move the content a bit more to the left, but it seems to remain centered? Thank you for your help! I have spent more than 6 hours researching and reading to solve these two problems. I have included a complete example in one file to assist others in helping me quickly and easily. Just copy to an HTML file and examine my complete issue. 1. Left black bar needs to match right-column height. 2. Image in left column needs to align to the bottom of the left bar. I tried absolute positioning the left image but it would then over-lap stuff in the left bar if the leftbar was not tall enough. In other words, it didn't take any space anymore and just covered up anything. Code: <html>
<head>
<style tyle="text/css">
body {
width: 850px;
margin-left: auto;
margin-right: auto;
height: 100%;
background-color: #fff;
color: #000;
font: 11pt arial, sans-serif;
}
div.leftbar {
width: 201px;
height: 100px; /* Should Not Be Required--adding for demonstration */
margin: 0px 5px 0px 0px;
padding: 0px;
background-color: #000;
color: #ffd600;
float: left;
}
div.rightbar {
width: 670px;
margin: 0px 0px 0px 201px;
padding: 4px;
background-color: #fff;
border: 1px solid #f00; /* Added For Visibility */
}
</style>
</head>
<body>
<div class="leftbar">
Menu (pulled in from php)
<div class="search">
Search
</div>
<div class="leftimage">
<img src=".jpg" />
</div>
</div>
<div class="rightbar">
MAIN CONTENT<br /><br /><br /><br />left bar should stretch to bottom of this column.<br />Image in left column should align to the bottom of the black leftbar. I forced a height on the left bar to show it should touch the bottom (but doesn't) when the height is greater than sized for the content.<br /><br />Thanks for your help!
</div>
</body>
</html>
Below is what I have. Displays fine in FF. In IE, there is approximatly a 13px white space under the image. Can't find an answer to this. Any insight is appreciated. --Sean HTML: <p id="dot"></p> CSS: #dot { position:relative; left: 0px; top: 0px; width:200px; height:6px; background-image: url(dot.jpg); background-repeat: repeat-x; line-height:0pt; margin: 0px; } I have a div that just serves as a horizontal rule, it's 800px wide and 3px high. Firefox renders it properly, but internet explorer is adding 10 pixels totaling 13 pixels high. I have tried the traditional <hr> tag, but it adds an ugly subtle border around it in IE that can't be removed. EDIT: sorry, I forgot to mention that it's internet explorer version 6 The markup: Code:
<div id="header">
<div id="banner">
</div>
<div id="nav">
<div id="floatleft">
</div>
<div id="floatright">
</div>
</div>
</div>
<div id="header_hr">
</div>
<div id="main">
</div>
The CSS: Code:
#header
{
margin:0 auto;
width:800px;
font-size:11px;
}
#banner
{
background-image:url('../images/banner.jpg');
height:29px;
width:800px;
}
#nav
{
width:800px;
}
#floatright
{
float:right;
}
#floatleft
{
float:left;
}
#header_hr
{
background-color:#464646;
clear:both;
height:3px;
margin:0 auto;
width:800px;
border:0;
}
#main
{
width:800px;
margin:0 auto;
}
Here's the output: |
|||||||