|
CSS - Spacing And Height Problems
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? Similar TutorialsHi, 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;
}
Hi there, I am building a site which is working fine in Netscape but is not showing correctly in IE 6. The yellow line I have is not "listening" to its 10px height and there is some mystery spacing occuring around it at well....I have looked around, but can't seen to figure out what the fix is. I would really appreciate some help! Here is the .css and the link: http://www.kohlrbaby.com/vcc/boxlesson.htm body { margin: 0px 0px 30px 0px; padding: 0px 0px 0px 0px; font-family: verdana, arial, helvetica, sans-serif; color: #eee; background-color: #ffffff; text-align: center; } a { text-decoration: none; color: #eee; outline: none; font-size: 12px; } a:visited { color: #ccc; } a:active { color: #ccc; } a:hover { color: #990000; text-decoration: underline; } p { font-size: 12px; line-height: 22px; margin-top: 0px; margin-bottom: 0px; color: #000000; text-align: left; } #head { padding: 0px; margin-top: 30px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ border-top: none; border-right: 1px solid #43709e; border-bottom: none; border-left: none; text-align:left; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 726px; height: 110px; } #yellowStrip{ width: 726px; background-color: #e7d77e; height: 10px;/*height is not functioning?? */ padding: 0px; } #lftBar { width: 93px; background: #43709e; float: left; } #mainBox { border-right: 1px solid #43709e; margin-top: -1px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: #43709e; border-top: none; width: 726px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 726px; } .innerbox { padding: 30px; background-color: #ffffff; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left:93px; } #bottom { padding: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: none; border: none; border-top: none; text-align:left; voice-family: "\"}\""; voice-family:inherit; } #bottomText{ padding: 0px; margin-top: 10px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: none; border: none; border-top: none; text-align:center; voice-family: "\"}\""; voice-family:inherit; font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; color: #ccc; } I've just started to learn CSS, and I've picked it up without much trouble so far, but I'm stuck with a small formatting problem I'm having. Using Firefox, the spacing for the menus on the right and left side are basically where I want them to be. Link Horizontal Line Link HR and so on... The page is at http://www.mcconaha.com/csscenter.php and the CSS is at http://www.mcconaha.com/csscenter.css So I have two questions... 1) What formatting trick am I missing when it comes to the padding under text like that? I've used the padding attribute in the CSS, but it doesn't seem to do anything. The only solution I've found is to set the margins to -Xpx and use that, but then it overlaps in FF. This has to be simple and stupid, I just haven't figured it out. 2) This isn't as vital, but would be nice if I could figure out. The nav boxes are stacked down each side. If I add an item to the top box, I have to readjust the top attribute in the CSS for all boxes by whatever the increase in size of the first box was. Is there a way to align the top box, then make all the others conform down when you add something above? Thanks in advance. I'm sure I'll be posting more questions as I have them. Hi guys I have a simple Wordpress website and I don't know anything about CSS I used a visual CSS editor called stylise to change a few things but I can't seem to get the spacing I can't put the URL here because I am a new member, but look at the pics and you will figure it out. Actually urls in pictures are removed as well so no pics. Website is theinterviewkit dot com What I want done is some simple spacing: The add to cart button doesn't line up I the store page, it is ok when I check the website on safari and Firefox, but on my iPad the add to cart button is beside the quantity box. I'd like it under Have images I marked up but The forum doesn't allow urls in posts of new users!!!!!! check store page When you click on the product and go to the product page, the add to cart is slightly to the left of the name and price. I would like it Lined up where the red line is. On safari and my iPad, it is as you see in the screen shot. On Firefox though, the add to cart button is under the picture. Unfortunately when I tried editing, any change I did moved the add to cart button on each page that had it (store page and every product page). I'm guessing because I'm editing that element instead of the spacing of the page. Had Image here but no urls allowed. Check product page Again, I don't know anything about CSS, only very very basic HTML. If anybody could figure it out that would be awesome. Here is the industry news page I have the picture floating either right or left with text beside it - then a line underneath it. I want the line to always be at least 10px below the picture. When the text is less, the line crosses into the picture. xhtml: Code:
<div id="industry">
<h1>Industry News and Information</h1>
<div class="row">
<span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span>
<h2>New single set of standards for ERS and ATS</h2>
<p>Through the combined efforts of the European Respiratory Society (ERS)
and the American Thoracic Society (ATS), there is now a new single set
of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More
...</a></p>
</div>
<div class="row"> <span class="imgRight"><img src="../images/ARTP_thumb.jpg" width="112" height="100" alt="COPD Day at Vitalograph" /></span>
<h2>Winter ARTP meeting well attended</h2>
<p>Vitalograph recently attended the Association for Respiratory Technology
and Physiology (ARTP) 3Oth Annual Conference at the Hilton Metropole
Hotel in Brighton. <a href="/resources/industry_news/news_artp.html">More
...</a></p>
</div>
<div class="row">
<span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span>
<h2>New single set of standards for ERS and ATS</h2>
<p>Through the combined efforts of the European Respiratory Society (ERS)
and the American Thoracic Society (ATS), there is now a new single set
of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More
...</a></p>
</div>
<div class="rowLast">
<span class="imgRight"><img src="../images/COPDdayoffice_thumb.jpg" width="99" height="98" alt="COPD Day at Vitalograph" /></span>
<h2>Vitalograph participates World COPD Day</h2>
<p>To mark World COPD Day on 16 November 2005, the British Lung Foundation
teamed up with Superdrug to offer a free spirometry test at selected
stores across the UK. <a href="/resources/industry_news/news_world_copd_day.html">More
...</a></p>
</div>
<p class="back"><a href="javascript:history.go(-1)">< Back</a></p>
</div>
css: Code:
.imgLeft img {
clear: none;
float: left;
margin: 0px 20px 10px 0px;
border: 1px solid #000099;
}
.imgRight img {
clear: none;
float: right;
margin: 0px 10px 10px 20px;
border: 1px solid #000099;
}
/*rows*/
.row {
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid #3399FF;
}
.rowLast {
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #3399FF;
border-bottom: 1px solid #3399FF;
}
.line {
border-bottom: 1px solid #3399FF;
padding-top: 0px;
padding-bottom: 10px;
}
.inline {
display: inline;
}
#mainColumn {
padding: 0px;
margin-left: 175px;
background-color: #FFFFFF;
height: 100%;
}
/*industry news*/
#industry {
padding-right: 20px;
padding-left: 20px;
}
#industry h1 {
margin-bottom: 20px;
}
#industry h2 {
color: #000099;
margin: 0px 0px 10px 0px;
}
#industry img {
margin-bottom: 10px;
}
.copdDay img {
clear: both;
margin: 0px 40px 15px 55px;
border: 1px solid #000099;
}
.artp {
margin: 0px 40px 15px 40px;
}
.artp img {
clear: both;
margin: 0px 40px 15px 25px;
border: 1px solid #000099;
}
Any suggestions on how to get this consistently since through css accounting for varying lengths of text?? I know I can adjust padding/margins for each section to make it work, but I want something that is more universal that I can always use to get the same appearance. Thanks! Hi everybody. I'm attempting to format video thumbnails horizontally across a page, and I'm experiencing some very weird behaviors. A bit of basic background on the site - this is a Drupal 5 site sporting a customized version of the "Lite Jazz" theme. XHTML & CSS are both valid. Basically, I just want to have the thumbnails scroll horizontally from left to right, then break and continue directly underneath. However, I am getting this odd "stair" effect in Firefox (for lack of a better way to put it). The alignment looks fine in IE, however in IE the thumbnail furthest to the right is squashed up against the side of the border. I have attached two screenshots to give you an idea. Below is a sample of the video thumbnail HTML that is output by Drupal and all (what I think is) all of the pertinent CSS styling. Additionally, I am aware that I can combine several of these CSS classes, so there is no literal need for multiple div tags, but these divs are generated by a short series of tpl files, and I don't think they are hurting anything. I could of course be wrong, but it would be hard to really consolidate them they way that the template is structures. Here's the HTML involved: Code: <div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/48"><img src="http://kathleenmackie.com/files/48_AtlantaFinal.jpg" alt="Watch this video!" /></a><br />
vid: 48<br />
type: video<br />
status: 1<br />
created: 1207090735<br />
</div></div>
</div>
<div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/47"><img src="http://kathleenmackie.com/files/47_FirefoxScreenSnapz003.jpg" alt="Watch this video!" /></a><br />
vid: 47<br />
type: video<br />
status: 1<br />
created: 1206652960<br />
</div></div>
</div>
<div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/45"><img src="/sites/all/modules/flashvideo/thumbnail_MIA.png" alt="thumbnail unavailable" /></a><br />
vid: 45<br />
type: video<br />
status: 1<br />
created: 1204256880<br />
</div></div>
</div>
And the CSS as well.... Code: .node {
display: inline;
padding: 5px 10px 10px;
}
.node .content, .comment .content {
margin: 0;
}
.node .taxonomy {
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
}
.video {
border: 1px solid #1e6730;
background-color: #beff93;
padding: 5px 10px 10px;
clear: right;
float: left;
display: inline;
margin: 15px;
}
#header, #content {
width: 100%;
}
.node .content, .comment .content {
margin: 0;
I would include a bbcode link to the site, but apparently new users cannot do that (I suppose that makes sense from a spamming standpoint). Site is located at kathleenmackie.com. I also have screenshots from IE and Firefox detailing the problems, but again I apparently can't attach files or images (??). Thanks folks... hoping somebody has an idea or two. Again, I do have screenshots as well..... 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;}
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. 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? I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! 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! 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! 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 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 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>
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: |
|||||||