|
CSS - Max-height Causng Scrollbar Issues
In Firefox, the following code displays as expected, with a vertical scrollbar only.
Code: <div style="position: relative;">lorem ipsum</div> <div style="position: absolute; white-space: nowrap; min-width: 100px; max-width: 500px; overflow: auto; height: 100px;"> <ul> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> </ul> </div> When I change Code: height: 100px; to Code: max-height: 100px; for some reason, a horizontal scrollbar appears, which is not needed or wanted since the content does not extend beyond the 500px allocated by max-width. I can't figure out how a height setting would affect the width but that is what seems to be happening. Anybody know why? or have any suggestions for coming up with a solution? Similar TutorialsI'm trying to get the content on this site http://www.jarretporter.com/thaiorchid to expand down the page, and not under the footer. However, when there is little to no content, as currently on the Menu page, I would like for the footer to stay glued to the bottom of the page. If you'll view the Home and Contact pages you'll see what I'm referring to. Here's the code: Code:
html, body{
margin:0;
padding:0;
height:100%;
}
body{
background: #000000 url('imgs/bg-tile.jpg') repeat-x 0px 0px;
color: #cdbc8d;
font-family: georgia;
font-size: 1em;
text-align: center;
}
#container{
position: relative;
margin: 0px auto;
padding: 0px;
width: 100%;
height: auto !important;
height: 100%;
min-height: 100%;
}
#header{
position: relative;
margin: auto;
width: 800px;
height: 145px;
background: url('imgs/orchid2.png') no-repeat top center;
clear: all;
}
#nav-glow{
margin: auto;
padding: 0px;
width: 800px;
height: 100px;
background: url('imgs/glow.png') no-repeat center 5px;
text-align: center;
clear: all;
}
#nav{
margin: 0px auto;
padding: 0px;
width: 100%;
height: 55px;
text-align: center;
}
#nav ul{
margin: 0px auto;
padding: 0px;
width: 600px;
height: 55px;
list-style-type: none;
}
#nav ul li{
margin: 0px;
padding: 0px;
float: left;
}
#nav ul li a{
padding: 0px;
width: 150px;
height: 50px;
float: left;
}
#content{
position: relative;
margin: auto;
padding: 0px 0px 50px 0px;
width: 500px;
font-family: georgia;
font-size: 1em;
color: #ae9e72;
text-align: left;
line-height: 1.5em;
clear: all;
}
#footer{
position: absolute;
bottom: 0 !important;
bottom: 0px;
margin: 0px;
padding: 20px 0px;
width: 100%;
color: #cdbc8d;
background: #fff url('imgs/foot-tile.jpg') repeat-x 0px 0px;
font-family: verdana;
font-size: .78em;
text-align: center;
}
Here's the gist of the layout: Code: <div id="container"> <div id="header"> </div><!-- end header --> <div id="nav-glow"> <div id="nav"> </div><!-- end nav --> </div><!-- end nav-glow --> <div id="content"> </div><!-- end content --> <div id="footer"> </div><!-- end foot --> </div><!-- end container --> 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 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> Hi there. I am currently attempting to layout a design that will, in the future, become a live website. The website is located here. I have tested this site using the following browsers: Opera 9.5 [works fine] Firefox 2 [works fine] Firefox 3 [works fine] IE 7 [ISSUE OCCURS] IE 6 [ISSUE + ANOTHER ISSUE OCCURS] Both my (X)HTML (transitional) and CSS (level 2.1) validate according to w3c. You can view the source code of my (X)HTML and CSS below: Code: html4strict <!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" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Function T .:. Home</title> <style type="text/css" media="all">@import "css/master.css";</style> </head> <body> <div id="entire-page"> <div id="page-container"> <div id="ghost"></div> <div id="header"></div> <div id="navigation"> <div id="navigation2"></div> <div id="navigation1"></div> </div> <div id="content"> Lorem ipsum debet tritani forensibus et nam, ex solet splendide mea, at cum menandri consetetur conclusionemque. Ocurreret persecuti eum at, intellegat temporibus cu sea. Tale modus mei cu, mucius offendit id mea, id consul urbanitas vis. Ius te alii deseruisse, at mea veri illum perfecto. Per iudico commodo blandit ea, mel eu illum sonet efficiantur, tota delenit splendide at qui.<br/><br/> No vel ridens labores percipitur. Ad eum homero percipitur. Sit stet vero ex. In nec volumus explicari. <br/> <br/> Pro puto tempor cu, vix in populo doming legendos, ut has regione suavitate. Nec ea movet omnium assentior, ius solum feugiat no, ut est quem putant mollis. Eu simul suscipiantur has, equidem ornatus ea vel. Cu noluisse placerat nec, nostrum probatus eloquentiam cu sed. Lorem di**** et pri, magna ubique no sed, in solum decore quidam pro.<br/><br/> Ad blandit antiopam pri. Meliore necessitatibus et quo. Qui fabellas torquatos an. Id vel tantas recusabo, ex eos natum simul mentitum. Ea nostrud takimata iudicabit vel. <br/><br/> Id sit minimum patrioque ullamcorper, vix prompta intellegat at. Mea vidisse admodum denique in, at eam graecis expetendis referrentur, ancillae prodesset ut eam. Meliore luptatum appellantur duo eu. Cu dicam invenire has, ex affert pertinacia vis, ut impetus mandamus sea. Pri nisl atomorum ex, nam te eripuit numquam docendi. <br/><br/> Est stet albucius maluisset id, et habeo graece molestie mel, adhuc nonumy eloquentiam ea vel. Ubique takimata persequeris ne his, pro an augue feugiat efficiendi, eu eam unum nominavi mediocritatem. Corpora disputando eloquentiam ex quo, cu prima choro salutandi his. Has eirmod regione accumsan eu. Cum ea wisi scripta, veritus assentior complectitur pro ea, mea cu aeterno vocibus eligendi. Ei eam maiorum perfecto. <br/><br/> Et eam eius nostro. In alienum definitiones nec, sed wisi mentitum incorrupte ea, ei per quando appetere. Eu dicta vitae ignota vel. Eu qui quot aperiri adipiscing, eu vim novum deleniti, quod kasd eu has. Copiosae incorrupte neglegentur mea cu, sit adolescens elaboraret constituam te, ea sea tamquam molestie definiebas. Rebum harum labore pro ex, ex soluta contentiones vix, no usu esse nominati mandamus. <br/><br/> Et pro aliquando expetendis theophrastus. Mei ne errem consequat, mei ut sonet singulis indoctum. Alia nihil civibus per ei. Ei sed mucius perfecto elaboraret, invidunt neglegentur ei mel, at vide tota quo. <br/><br/> Id placerat phaedrum per. Nec ut persius legimus conceptam, ius no ludus clita consul. At atomorum voluptatum cum, duo cibo putant reprimique ne. Ea mei hinc eros noluisse, ad sea ipsum di****, alii debet tamquam te nam. <br/><br/> Essent labores explicari cu duo. Ius causae copiosae an. Ex omnium diceret maluisset vim. Ad mel vivendo disputationi. Hendrerit democritum id cum, quodsi molestiae duo te. <br/><br/> </div> <div id="content-bottom"></div> <div id="footer"> Home - Bio - Media - Contact - Reviews - Tutorials - Charts - Links <br/> All information Copyright 2008 Tom Winchester unless otherwise specified. All original artists <br/> and labels retain their full respective rights and royalties to all copyrighted material. Mixes are presented <br/> for promotional purposes only. Duplication of any material in part or in whole without the <br/> express written consent of Tom Winchester is strictly prohibited. </div> </div> </div> </body> </html> Code: css
html, body {
margin: 0px;
margin-bottom: 0px;
padding: 0px;
background-image: url(../images/bgpattern.gif);
background-repeat: repeat;
}
#entire-page {
width: 100%;
height: 100%;
}
#page-container {
margin: auto;
width: 750px;
}
#ghost {
height: 15px;
}
#header {
height: 110px;
background-image: url(../images/headers/header1.gif);
background-repeat: no-repeat;
}
#navigation {
margin: 0px;
padding: 0px;
height: 40px;
}
#navigation2 {
float: right;
margin: 0px;
padding: 0px;
width: 375px;
height: 40px;
background-image: url(../images/navbar2.gif);
background-repeat: no-repeat;
}
#navigation1 {
margin-right: 375px;
padding: 0px;
height: 40px;
background-image: url(../images/navbar1.gif);
background-repeat: no-repeat;
}
#content {
background-image: url(../images/contentbg.gif);
background-repeat: repeat-y;
padding-top: 0px;
padding-left: 10px;
padding-right: 245px;
padding-bottom: 0px;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 12px;
color: #858585;
}
#content-bottom {
height: 5px;
background-image: url(../images/contentbgbottom.gif);
background-repeat: no-repeat;
}
#footer {
height: 80px;
padding: 5px;
text-align: center;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 11px;
color: #cfcfcf;
}
My problem is this: in IE7, the sight does a couple of things strange: 1) The site loads a bit slower than on the other browsers (not really a big issue...just seems to have something to do with the main problem), and 2) the vertical scrollbar is laggy to say the least. If you scroll up and down the page quickly it will have no idea where it is supposed to be at! On IE6, the browser creates an extra little (appx. 3px wide) space in between the two navigation bars. You can see the page's background pattern through this space. Further, the navigation bars are not pushed aside for this gap...the bg is merely visible ON TOP of the images. Please let me know if you have ANY idea as to what the issue may be. As far as I can see, my code is as simple as I can make it...so I have no idea what else to do. HELP!!!! THANKS!!!! -Tom Winchester- 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 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;
}
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>
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>
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. http://www.mvcc.edu/v2.0/img/subpage.jpg With that current template, some of the pages have text that goes over the footer. How can we make the page expand with the text? Are we looking at faux columns or what? Thanks! I have a div in my header that contains an image. The height of the image is 82px. For some reason in firefox (and chrome too) if I don't set the div height to 125px it gets cut off. It looks OK in IE6 without the height set, but with it set as needed for firefox it then creates a space in IE. My header file has: Code:
<div id= "logo" ><img src = "images/logo_LWV.gif"></div>
<div id = "topNav">
<div id = "topNavMenu">
<a class = "top" href="index.php">Home</a>
<a class = "top" href="about.php">About Us</a>
<a class = "top" href="join.php">Join</a>
<a class = "top" href="funds.php">Special Funds</a>
<a class = "top" href="contact.php">Contact</a>
</div> <!-- end topNavMenu -->
</div> <!-- end topNav -->
</div> <!-- end topBar -->
<div id = "imagebar"><img src = "images/lwvCorvallis.jpg"></div>
<div id = "greenbar">
<div id = "pagetitle">
<p>Title</p>
</div><!-- end pagetitle -->
</div> <!-- end greebar -->
and the css is: Code: #topbar
{
dispaly:block; width: 800px;
}
#logo
{
float:left;
}
#topNav
{
float:right;
width: 612px;
height: 65px;
background-color:#cc0033;
}
#topNavMenu
{
position:relative; top:40px;
text-align:left;
color: white;
}
#imagebar
{
display:block;
width: 800px; height:125px;
}
#greenbar
{
display:block;
width: 800px; height: 90px;
background: url(images/greenbar.jpg); background-repeat: no-repeat;
z-index: 0;
}
#pagetitle
{
position:relative; left: 200px;top:25px;
width: 600px;
color: white;
z-index: 1;
}
The site is he http://www.lwv.corvallis.or.us/ What's going on? 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 I have a container containing two other divs. One is to be a left floating menu, and the other is to be a right floating content area. However, when I place these divs in a container that contains a background, the container won't expand as information is placed in the menu or the content area. My code looks like this. HTML: Code: <div class="blog-container"> <div class="blog-menu"> Some Random Menu </div> <div class="blog-content"> Some Random Content </div> </div> CSS: Code:
.blog-container {
position: relative;
text-align: center;
padding-top:15px;
width: 925px;
background-color: #eeeeee;
}
.blog-menu {
float: left;
width: 120px;
border: 1px solid blue;
}
.blog-content {
float: right;
width: 150px;
border: 1px solid red;
}
I really have no idea why it's doing this. Any help would be greatly appreciated. The problem I have has arisen whilst trying to create a horizontal and a vertical navigation menu using <li> tags. It is best illustrated by the following example: Code: <div style="width:100%;height:50px;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> <br /> <div style="width:100px;height:100%;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> and the CSS Code:
div {
border:0;
background-color:#888888;
}
ul {
margin:0;padding:0;
}
ul li {
float:left;
list-style:none;
background-color:#CCCCCC;
height:50px;
width:100px;
}
The <div> tags are set to 50px height and 100px width respectively. When an <li> element is placed within the div with the same height or width they display the way I intended. However once a 1px border is applied to the <li>'s then in IE the border is counted as part of the width or height. In Firefox the border will add 2px to the starting height and width giving the effect of width:102px or height:52px;. This is massively frustrating as I need each <li> to have the 1px border. It looks different in each browser (I have not tested it in netscape nor opera, but I suspect they will display the same as Firefox.) Can anyone provide a fix to get get round this please? Thank you in advance. Hi - I'm working on a page with what I think should be a relatively simple CSS layout. Basically, I have a table on the top half of the page (it displays an address book). The table has a <thead> and <tbody>, and the <tbody> is set to overflow: auto, to give me a scrollbar when its contents gets too big. The bottom half of the page uses AJAX to fetch an entry from the address book, and display more details. It too uses overflow: auto to show scroll bars when necessary. Each element is in a <div>, and I used height: 45% (or so) on each to try to make the whole thing fit on one page, so that there is no whole-page vertical scrolling. An example of the code I'm working with can be found at http://kc9ddi.us/ex.html . My design is working nicely in Firefox, but not IE. IE does not seem to do the right thing with the height: attribute in CSS, so their is no scroll bars in the individual parts of the page, like I want. Can anyone offer any advice here? |
|||||||