|
CSS - Vertical Align/height Issues With Divs..(ie6 Issues, Of Course!!!)
I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??
Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Similar Tutorialsi am trying to vertical align the "go" button next to the text field. i've also tried to use margin's on the go button.. but it just messes up... anyhow, here is a link... http://defunctgames.com/helpfix/page2.htm thanks i really need to vertical align a div to always be at the bottom of a main div... Code: <div class="container"> <div class="menu"></div> </div> i want .menu to always be at the bottom of .container .... no matter the height of the container div I've been having problems trying to vertically align an image within a div. I'm trying to align it to the bottom of the div. CSS as follows: #col1r1 { float: left; height: 40%; width: 33%; display: inline; text-align: right; } div#col1r1 div#image { bottom: 66%; left: 60%; color: black; vertical-align: bottom; } div#col1r1 div img.pagegr { width: 60%; } HTML: <div id="col1r1"> <div id="image"><img class="pagegr" src="images/blah.gif" alt=""></div> </div> Unfortunately this code will be appearing on multiple pages with a different image on each page - some portrait, some landscape, and of varying sizes - otherwise, I would have added some blank space to the top of image itself to make it fit and sit nicely aligned with the bottom of the box. I'd really appreciate some help. Thanks in advance. Hey, I have been looking EVERYWHERE for a solution and there seems to be none just quite yet. I've searched google and all sorts of help forums... and still zip, nothing. What I want to do is vertically-align the text in this example: http://www.tri-m.com/test.html in the middle of the white space. The problem though is that there is an unknown height of the whitespace because I want it to be that no matter what size you size the window, the content will always be vertically aligned... so I'm pretty stuck on how to do this. I'm needing the solution for this desperatly and I have been searching and trying everything for weeks. If anyone could help that would be VERY VERY apperciated. Thank you sooo much to everyone that tries this out. Once again here is the Example: http://www.tri-m.com/test.html Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tri-M Systems INC.</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
body
{
color:#000;
}
#container-page {
background:#fff;
width:100%;
min-height:100%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:100%; /* For IE */
position:relative;
text-align:left;
margin:0 auto;
}
#container-head
{
background:#fff;
}
#header
{
background-color:#0000FF;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:81px;
position:relative;
}
#container-content
{
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
text-align:center;
position:relative;
padding: 0 0 162px 0;
}
#container-content:after
{
height:0;
clear:both;
display:block;
content:".";
visibility:hidden;
}
#content-sec ul,#content-sec ul li {
list-style: none none;
}
#container-foot
{
background-color:#ff0000;
width:100%;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:162px;
position:absolute;
bottom:0 !important;
bottom:-1px; /* For Certain IE widths */
}
#foot
{
height:162px;
}
</style>
</head>
<body>
<div id="container-page">
<div id="container-head">
<div id="header">
</div><!-- END "header" -->
</div><!-- END "container-head" -->
<div id="container-content">
<center>
<div id="box">VERTICAL ALIGN THIS IN WHITE SPACE</div> <!-- END "box" -->
</center>
</div><!-- END "container-content" -->
<div id="container-foot">
<div id="foot">
</div><!-- END "foot" -->
</div><!-- END "container-foot" -->
</div><!-- END "container-page" -->
</body>
</html>
- Jacenta Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Hello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance So here's the page I'm working on: http://johannkwan.com/about.html The HTML side is simple: Code: <div id="horizon"> <div id="wrapper"> <div id="about_content">About</div> <a href="http://www.johannkwan.com" id="back">Back</a> </div> </div> The CSS side is just a horizon bar with the wrapper in the middle, the top margin offset to half the wrapper so it'll center properly. Code: #horizon {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -300px;
text-align: center;
min-width: 800px;
}
#wrapper {
position: relative;
text-align: left;
width: 800px;
height: 600px;
margin: 0px auto;
}
Here's my problem. If you're looking at the page on anything under 800x600 (or if you resize your browser to under 600) the top bit cuts off. You can't scroll up past part-way up the image. But it's not 300px of cut off... it's some sort of distance I haven't defined, so I'm not entirely sure where I'm going wrong. Is there a better way to vertically center my content? Or is there just something wrong in my stylesheet I'm not seeing? Any help would be appreciated. Thanks! i am using the "body{text-align:center}" hack to align everthing center on this page, it works for everthing but the next and back buttons... well, they align center in IE... but not Firefox (mozilla) http://www.defunctgames.com/reviews/picpreview.php4?picpreview=5&id=390 Here's my next IE challenge (or frustration). It deals with the overflow attribute. Overflow property was a challenge on my page since the page emulates position fixed for IE. The present scenario deals with the pre element. Sometimes the content in the pre container exceed the parent container's width. IE expands the parent containers width as a result. The workaround for this scenario relates to the overflow property and using a wrapper with the height set to 1% . Now, IE maintains the parent container width. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results. The workaround involves wrapping a pre element in a div, WrapOverflow. Now, you could set the overflow auto attribute on the child pre element. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results. Firefox has no need for the wrapper and still renders the page accurately with the superfluous code. The problem relates to IE rendering pre/wrapper with a smaller height. By controlling the horizontal expansion; the workaround has somehow constrained the height as well. The net effect is a vertical scroll bar, which is not ideal. Compare the scenario in both Firefox and IE; set the browser next to each other; notice the div.WrapOverflow pre container height. Screenshots are below and review the code for a full illustration. Yes, you must be thinking change overflow auto to overflow vertical. Let's not jump to a quick conclusion. Understanding what is going on here is important as well. The pre container's height should grow in IE, but the page's complexity and various hacks muddle the scenario. I have already spent a month on this scenario, but do not have the skill to decipher what various hacks impose on my layout. Let me know if you have any good ideas, explanations, or suggestions on this situation. http://neville.f2o.org/nifty_TEMP2.html I have a page which contains a header / right column / left column / footer. header, left, footer have black background right has white background when the right column grows, taller then the left column the left column has a white area, how do I get the columns to have the same height so that the color fills the entire area.... i was able to reverse the problem so that the left stayed all black, but then the right was white and black. I need them both to be able to grow, causing depending on where the user is on the site, the left can have more then the right and vice versa ... I know this has been asked a million times, I have tried all the suggested fixes in this forum and others and none seem to work. please help ....... here is the code ... thats driving me up the wall. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 2 Column - fw-14-2-col</title>
<style type="text/css">
html { /* for good browsers */
height: 100%;
}
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
height:100%;
}
#wrapper {
margin: 0 auto;
width: 780px;
background: #ffffff;
}
#header {
color: #FFFFFF;
width: 780px;
float: left;
padding: 0px;
height: 45px;
margin: 0px 0px 0px 0px;
background: #000000;
}
#subwrap {
height:100%;
background:#FF0000;
}
#leftcolumn {
color: #FFFFFF;
background: #000000;
margin: 0px 0px 0px 0px;
padding: 10px;
height:100%;
width: 180px;
float: left;
}
#rightcolumn {
float: right;
color: #000000;
background: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 5px;
height:100%;
width: 560px;
display: inline;
}
#footer {
border: 1px solid #FF0000;
width: 780px;
clear: both;
color: #FFFFFF;
background: #000000;
margin: 0px 0px 0px 0px;
padding: 0px;
}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<h2>Header</h2>
</div>
<!-- End Header -->
<div id="subwrap">
<!-- Begin Left Column -->
<div id="leftcolumn">
Link 1<br />
Link 2<br />
Link 3<br />
Link 4<br />
Link 5<br />
Link 6<br />
Link 7<br />
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<p><font color="#FF0000" ><b>FIXED</b></font> - this div should be ALL white. it should be white all the way down to the footer( red line )</p>
<br />
<p><font color="#FF0000"><b>BUG</b></font> - left column should stretch all the way down to the footer when right column grows.
<p> </p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
</div>
<!-- End Right Column -->
</div>
<!-- Begin Footer -->
<div id="footer">
<h2>Footer</h2>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
first off, not sure what happened with that last post but i couldn't even edit or reply to it to fix it. so i'll try again. in firefox and ie i am having a problem making the center column stretch to 100% window size when the content within is not sufficient to take up the space of the browser window. have tried using min-height and height equaled to 100% in the body and center column. neither of which made any change. here is my css code: Code:
body, html {
font: 12px/1.5 Verdana, Arial, sans-serif;
color: #99ccff;
background-color: #ffffff;
margin: 0;
padding: 0;
}
img {
border: 0;
}
#centerColumn {
position: relative;
background: #ffffff url(images/columnBack.gif) center 0 repeat-y;
width: 800px;
left: 50%;
top: 0;
margin: 0 0 0 -400px;
}
#banner {
position: relative;
background: url(images/banner.jpg) center center no-repeat;
width: 788px;
height: 100px;
left: 6px;
top: 0;
z-index: 20;
}
#navigator {
position: relative;
background: transparent url(images/navBack.jpg) 0 0 no-repeat;
width: 788px;
height: 29px;
left: 6px;
border-top: 3px solid #99ccff;
border-bottom: 3px solid #99ccff;
z-index: 20;
}
#navList {
position: relative;
top: 3px;
left: 0;
margin: 0 112px 0 112px;
padding: 0;
z-index: 20;
}
a#nav1 {
display: block;
position: absolute;
background: transparent url(images/navIntroduction.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 0;
top: -3px;
z-index: 10;
}
a#nav1:hover {
background-position: 0 -29px;
}
a#nav2 {
display: block;
position: absolute;
background: transparent url(images/navAboutUs.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 144px;
top: -3px;
z-index: 10;
}
a#nav2:hover {
background-position: 0 -29px;
}
a#nav3 {
display: block;
position: absolute;
background: transparent url(images/navOnlineApplication.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 288px;
top: -3px;
z-index: 10;
}
a#nav3:hover {
background-position: 0 -29px;
}
a#nav4 {
display: block;
position: absolute;
background: transparent url(images/navCalculators.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 432px;
top: -3px;
z-index: 10;
}
a#nav4:hover {
background-position: 0 -29px;
}
#contentSpace {
position: relative;
background-color: transparent;
width: 788px;
left: 6px;
top: 0;
z-index: 20;
}
#contentHolder {
position: relative;
background-color: #ffffff;
width: 542px;
left: 0;
top: 0;
float: left;
clear: right;
z-index: 20;
}
#contentHolder h1 {
text-align: left;
font: 14px Verdana, Arial, sans-serif;
font-weight: bold;
font-style: italic;
margin: 10px 0 20px 20px;
}
#contentHolder h2 {
text-align: right;
font: 14px Verdana, Arial, sans-serif;
font-weight: bold;
margin: 0 15px 15px 0;
}
#contentHolder h3 {
text-align: left;
font: 12px Verdana, Arial, sans-serif;
font-weight: bold;
margin: 2px 0 0 0;
}
#contentHolder p {
text-align: left;
text-indent: 10px;
margin: 10px 15px 15px 20px;
}
#contactHolder {
position: relative;
background: #ffffff url(images/contact.jpg) center 20px no-repeat;
width: 242px;
height: 310px;
top: 0;
float: left;
clear: right;
z-index: 20;
}
#legal {
position: relative;
background-color: #ffffff;
font: 10px Verdana, Arial, sans-serif;
text-align: center;
width: 788px;
height: 14px;
left: 6px;
border-top: 3px solid #99ccff;
border-bottom: 3px solid #99ccff;
clear: both;
z-index: 20;
}
I'm having trouble with a div's height not extending to the page height. It extends to the viewport height, but will not go any further. Here's an image illustrating my problem. Code: http://img.thesocs.com/img.php?r=FzRq0oq9Zm84dQFiCU The entire page is wrapped in a div with an id of #wrapper. Inside #wrapper is #header (blue in the image) and #main (green in the image). The image is an edited screencap of the entire page. The difference between the viewport height and the page height is the red arrow. The problem is that no matter how tall #main gets, #header does not grow taller than the viewport originally is. If the viewport is 700px tall, #header stays 700px tall, even if #main is 21000px tall. Also, I've given the html & body tags the "height: 100%;" property along with #wrapper and #header. Here's the CSS for these divs. Code: html, body {
margin: 0;
background: #FFF;
color: #000;
height: 100% !important;
min-height: 100%;
}
#wrapper {
margin: 0;
width: 970px;
height: 100% !important;
min-height: 100%;
}
#header {
margin: 0;
padding: 10px;
width: 200px;
background: #000;
color: #FFF;
position: absolute;
height: 100% !important;
min-height: 100%;
}
#main {
position: absolute;
left: 230px;
top 0px;
width: 740px;
}
Here's the stripped down HTML for the page. 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" dir="ltr" lang="en-US">
<head>
<title>[ TITLE HERE ]</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
[ HEADER & MENU HERE }
</div><!-- #header -->
<div id="main">
[ CONTENT HERE ]
</div><!-- #main -->
</div><!-- #wrapper -->
</body>
</html>
So can anyone tell me what I am doing wrong? How can I get #header to grow to the full height of the page, rather than the viewport? accidentally duplicate posted due to problem with server at school. please close and or delete this thread Hello, sorry to post another problem but I am trying to give my website a minimum height and it's just not working. I have written body {min-height:100%;} and even put html.body{min-height:100%} then i've created a container with min-height 100% and it doesn't create anything. So I changed it to #container {min-height 768px;} and put everything inside that div. This creates a box 768px high but doesn't extend when the content goes beyond that. to view this please visit #www. wheretoflyguide .com# and click 'add entry'. you will see that the content_area div which holds the main component extends down but the wrapper doesn't. The hideous colours are for illustrating the problems rather than design taste! Appreciate your help. Hi, How would I set a height on an element to be a set height, and then grow taller if more content is added to it? IE: #content { width: 568px; height: 900px; background-image: url(../../images/content_bg.gif); float: left; } This works in IE, but won't grow dynamically to fit longer content in Mozilla. Excuse the pretty terrible code, but I was trying to come up with an example. Take a look at the following code in IE vs Firefox. You'll notice that in Firefox(3.5b) the middle section gets the majority of the height because it's attempting to fill the table's height requirement without violating the top and bottom part's set heights. IE(7) however, doesn't behave like that. How can I achieve what Firefox is doing in all browsers? Any solution is fine, divs, tables... etc. Thanks! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
html, body { height: 100%; margin:0; padding:0; }
#wrapper td { border: 2px solid #f00; }
</style>
</head>
<body>
<table id="wrapper" height="100%" width="100%">
<tr>
<td height="10">Header</td>
</tr><tr>
<td>This section should take up most of the page</td>
</tr><tr>
<td height="50">Footer</td>
</tr>
</table>
</body>
</html>
Hello folks. I am normally pretty handy with the CSS. I develop my sites in the latest of Firefox then test in IE 6.0. My latest site looks like gargabe in IE 6. Looks 99.99% perfect in Firefox. Here are the two problems: 1) I can't get the sliced image on the right lined up in IE 6 for the life of me! 2) On the front page, I have 2 tables underneath a paragraph. I don't like tables but for displaying 37 small icons... you get the idea. Anyway when you first go to the home page in IE the tables look okay. But if you navigate away then back, the icons go crazy! Please help! http://www.TattooSeek.info hello, im gonna try to explain my problem. I have a wrapper div with a background image that is repeated on Y. Within that wrapper i have a content div, there are messages that come from a database. the problem is that the wrapper (and the background) isnt expending to the text that is in the content div. How to make the wrapper expend to the size of the content div!?. here are my divs: Code:
div.wrapper{
position:relative;
width:900px;
background:transparent url(images/templatemo_content_bg.jpg) repeat-y scroll 0 0;
margin:auto;
}
div.content{
float:left;
width:550px;
margin-left:20px;
}
i changed alot to try and now im totaly lost xD greetings Razedd |
|||||||