|
CSS - Positioning To Bottom Of Div
I'm new here so Hello guys!
I have a problem with CSS - its probably really simplistic but i've been searching for ages and cant figure it out! I have a long narrow DIV which is a header, then a much smaller DIV which is a small square picture. What i want is for the small picture to fit as tightly into the bottom left hand corner as possible. I've tried this: Code: Float:left; postion:absolute; bottom:0px; but as i'm sure u can figure out that sends it to the bottom of the page and not the bottom of its parent DIV. Please can somebody let me know how it is possible to achieve this? hope this is coherrant and fairly simple to do! thanks. Similar TutorialsOn a 3 column page I left the center column completely empty because I am using a non-scrolling, centered image as background and I want it persistently visible, though the 2 marginal columns are welcome to scroll. My problem arises when I try to put my navigation bar at the bottom of the page. It insists upon occupying the empty center column and rising to the top of it (though it gets itself truncated to the width of the center column). I don't want it there; I want it a bit below the longer of the two (populated) marginal columns and centered on the page. This is my first attempt with CSS for page layout and I am using the template from glish. Hi! i'm trying to position footer at the very bottom. this example does it as expected (if the page is longer than viewport, footer will be at the end of page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<h1>Content</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body></html>
but when i try to add left/right boxes, it fails. try to scroll down the page (footer is placed at the bottom of viewport, not page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#head
{
padding-left:20px;
padding-top:20px;
padding-right:20px;
background-color: #FFF;
background-image: url('/public/images/header-background.gif');
background-repeat: repeat-x;
background-position: bottom
}
#logo
{
height: 100px;
background-image: url('/public/images/header.jpg');
background-repeat: no-repeat
}
#content
{
}
#leftcontent
{
float:left;
width:67%;
margin:10px;
padding:30px 30px 70px 30px;
border: 1px solid #000;
background-color: #33251C
}
#leftcontent h1
{
color: #936FC4
}
#leftcontent h2
{
color: #FFF
}
#rightcontent
{
margin:15px
}
p, pre
{
margin:0px 30px 10px 30px
}
#rightcontent p
{
font-size:10px;
margin-left:0px
}
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #FFF
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block
}
#navlist li a, #navlist li a:link
{
background: #FFF;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #f90;
background: #EEE
}
#navlist li a#current:hover
{
border-bottom: 3px solid #999;
background: #DDD
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<div id="head">
<div id="logo">
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="/">home</a></li><li><a href="/mix/" id="current">mixes</a></li><li><a href="/gallery/">gallery</a></li><li><a href="/contact/">contact</a></li></ul>
</div><br/>
<div id="leftcontent">
<h1>My Mixes</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="rightcontent">
right side
</div>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
how may i fix it? thanx! I am trying to make a layout with a background image with 3 content boxes layered on top of it. The first two boxes are position correctly. They are offset top, left and top, right respectively. The third box should be positioned bottom, left but for some reason it isn't working. The left offset is working correctly, but instead of positioning itself off of the bottom of the container div, it positions itself that much above the viewport. If I set the bottom property to negative something, it acts like a top offset. While this is a workaround, it does not provide acceptable functionality. Anyone have any ideas? I've had two friends who are both seasoned web developers look at this and they were both stumped. I can post images of what it looks like and what it should look like if desired. Both of these code sections are php generating the html and css respectively. html: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title><?=$title?></title>
<link rel="stylesheet" type="text/css" href="./themes/<?=$theme?>/css/main.php" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#bottom_ccw").attr({ scrollTop: $("#bottom_ccw").attr("scrollHeight") });
});
</script>
</head>
<body>
<div id="wrapper">
<div id="inner_wrapper">
<div id="background"></div>
<div id="left_bw">
<div class="top_b">
<div class="border_tl"></div>
<div id="l_border_t"></div>
<div class="border_tr"></div>
</div>
<div>
<div id="l_border_l"></div>
<div id="l_border_r"></div>
</div>
<div class="bot_b">
<div class="border_bl"></div>
<div id="l_border_b"></div>
<div class="border_br"></div>
</div>
</div>
<div id="left_ccw">
<div id="cc1">
<?for($i=0;$i<500;$i++):?>1 <?endfor;?>
</div>
</div>
<div id="right_bw">
<div class="top_b">
<div class="border_tl"></div>
<div id="r_border_t"></div>
<div class="border_tr"></div>
</div>
<div>
<div id="r_border_l"></div>
<div id="r_border_r"></div>
</div>
<div class="bot_b">
<div class="border_bl"></div>
<div id="r_border_b"></div>
<div class="border_br"></div>
</div>
</div>
<div id="right_ccw">
<div id="cc2">
<?for($i=0;$i<1200;$i++):?>2 <?endfor;?>
</div>
</div>
<div id="bottom_bw">
<div class="top_b">
<div class="border_tl"></div>
<div id="b_border_t"></div>
<div class="border_tr"></div>
</div>
<div>
<div id="b_border_l"></div>
<div id="b_border_r"></div>
</div>
<div class="bot_b">
<div class="border_bl"></div>
<div id="b_border_b"></div>
<div class="border_br"></div>
</div>
</div>
<div id="bottom_ccw">
<div id="cc3">
<?for($i=0;$i<200;$i++):?>3 <?endfor;?>
</div>
</div>
</div>
</div>
</body>
</html>
css: css Code: Original - css Code <? header("Content-type: text/css"); ?> <? //Left content box width. $lcbw = 300; //Left content box height. $lcbh = 443; //Left content box horizontal offset. $lcbho = 100; //Left content box vertical offset. $lcbvo = 55; //Right content box width. $rcbw = 550; //Right content box height. $rcbh = 550; //Right content box horizontal offset. $rcbho = 100; //Right content box vertical offset. $rcbvo = 55; //Bottom content box width. $bcbw = 300; //Bottom content box height. $bcbh = 100; //Bottom content box horizontal offset. $bcbho = 100; //Bottom content box vertical offset. $bcbvo = 0; ?> /* Equalize the padding and margin for all elements across all browsers. */ * { padding: 0px; margin: 0px; } /* Generic top section for a content box. */ .top_b { clear: right; } /* Generic bottom section for a content box. */ .bot_b { clear: left; } /* Top left corner of a border. */ .border_tl { float: left; background: url('../images/main/border_tl.png'); width: 26px; height: 25px; } /* Top right corner of a border. */ .border_tr { float: left; background: url('../images/main/border_tr.png'); width: 26px; height: 25px; } /* Bottom left corner of a border. */ .border_bl { float: left; background: url('../images/main/border_bl.png'); width: 26px; height: 25px; } /* Bottom right corner of a border. */ .border_br { float: left; background: url('../images/main/border_br.png'); width: 26px; height: 25px; } /* Main site wrapper. */ #wrapper { margin: auto; width: 1057px; padding-top: 5px; } /* Main site inner wrapper. */ #inner_wrapper { position: relative; } /* The background element. */ #background { background: url('../images/main/background.png'); width: 1057px; height: 679px; position: absolute; z-index: 1; } /* Left content box borders wrapper. */ #left_bw { position: absolute; z-index: 2; top: <?=$lcbvo?>px; left: <?=$lcbho?>px; width: <?=$lcbw?>px; height: <?=$lcbh?>px; } /* Left content box top border. */ #l_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content box left border. */ #l_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box right border. */ #l_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box bottom border. */ #l_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content container wrapper. */ #left_ccw { position: absolute; z-index: 3; top: <?=($lcbvo+14)?>px; left: <?=($lcbho+14)?>px; width: <?=($lcbw-28)?>px; height: <?=($lcbh-28)?>px; overflow: hidden; } /* Left content container. */ #cc1 { padding: 5px; } /* Right content box borders wrapper. */ #right_bw { position: absolute; z-index: 2; top: <?=$rcbvo?>px; right: <?=$rcbho?>px; width: <?=$rcbw?>px; height: <?=$rcbh?>px; } /* Right content box top border. */ #r_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content box left border. */ #r_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box right border. */ #r_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box bottom border. */ #r_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content container wrapper. */ #right_ccw { position: absolute; z-index: 3; top: <?=($rcbvo+14)?>px; right: <?=($rcbho+14)?>px; width: <?=($rcbw-28)?>px; height: <?=($rcbh-28)?>px; overflow: hidden; } /* Right content container. */ #cc2 { padding: 5px; } /* Bottom content box borders wrapper. */ #bottom_bw { position: absolute; z-index: 2; bottom: <?=$bcbvo?>px; left: <?=$bcbho?>px; width: <?=$bcbw?>px; height: <?=$bcbh?>px; } /* Bottom content box top border. */ #b_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content box left border. */ #b_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box right border. */ #b_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box bottom border. */ #b_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content container wrapper. */ #bottom_ccw { position: absolute; z-index: 3; bottom: <?=($bcbvo+14)?>px; left: <?=($bcbho+14)?>px; width: <?=($bcbw-28)?>px; height: <?=($bcbh-28)?>px; overflow-x: hidden; overflow-y: scroll; } /* Bottom content container. */ #cc3 { padding: 5px; }
Sorry I tried to get the HTML to highlight too but it wouldn't work. Screenshot of how it looks: http://i34.photobucket.com/albums/d105/alphasynaptic/wrong.jpg Screenshot of how it should look (done with my hacky workaround): http://i34.photobucket.com/albums/d105/alphasynaptic/right.jpg I am testing a three column layout with a header and a footer using only CSS. Ordinarily it works fine but when the center column has less height than the left or right columns (due to amount of content in each) then the footer overlaps the left or right column as it positions itself to just below the center column. Can anyone figure out why? I am baffled since the footer has an absolute position of left: 0px and bottom: 0px; Here is my HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
height: 100%;
}
.left-col {
position: absolute;
width: 150px;
top: 130px;
left: 0px;
padding-left: 3px;
z-index: 2;
}
.right-col {
position: absolute;
width: 150px;
top: 120px;
right: 0;
padding-right: 3px;
z-index: 1;
overflow: hidden;
clear: both;
}
.center-col {
position: relative;
min-width: 300px;
min-height: 100%;
height: 100%;
z-index: 3;
top: 140px;
margin: 0px 160px 150px 170px;
text-align: left;
padding:5px;
}
.heading {
position: absolute;
left: 0px;
top: 0px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 0px;
z-index: 3;
padding-top: 25px;
margin: 0px;
display: block;
}
.footer-bar {
width: auto;
padding:10px 3px 3px 0px;
clear: both;
background-color: gray;
vertical-align: bottom;
text-align: center;
}
</style>
</head>
<body>
<div class="center-col">
center content<br />
center content<br />
center content<br />
center content<br />
</div>
<div class="left-col">
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
</div>
<div class="right-col">
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
</div>
<div class="heading">
head content
</div>
<div class="footer">
<div class="footer-bar">page bottom</div>
</div>
</body>
</html>
I am trying to set a table to sit on the bottom of the browser at all times, like a hovered BG image. Anyone know how to do this? I've tried this but I obliviously don't know what i'm doing #grass { position:absolute; bottom:100% background-repeat: no-repeat; background-position: 0px -0px; } (it's a landscaping website, i want grass on the bottom on the screen) I'm trying to put a 1px line on the bottom of my header that spans the width all the way. I've used border-bottom: 1px and border-style: solid; but I still have a looks like 3px border all the way around my header. Also I have my unordered list inside of my header div and it's placed directly below my header. Any help much appreciated, just learning how to layout. http://imgbin.org/index.php?page=image&id=6637 CSS code Code: body {
font-family: "Lucida Sans Unicode", sans-serif, Verdana;
background-color: #999999;
}
#header {
height: 75px;
width: 100%;
border: 0px 0px 1px 0px;
border-style: solid;
border-color: white;
background-color: #336699;
}
#container {
margin: 0 auto;
width: 900px;
height: 100%;
background-color: #666666;
}
#content {
width: 75%;
}
#sidebar {
width: 25%;
background-color: #666666;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
and HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Jeremy</title> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1 class="header">Jeremy</h1> <ul> <li><a href="index.html">Home</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="forums.html">Forums</a></li> <li><a href="contactme.html">Contact Me</a></li> </ul> </div> <div id="container"> <div id="sidebar"> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor dui sit amet diam molestie cursus. Vivamus a sapien sed nunc fermentum feugiat. Donec iaculis neque sit amet tortor consectetur eu lacinia est commodo. Ut lobortis fermentum felis, eu tristique elit fermentum sed. Etiam pulvinar commodo est non vestibulum. Aenean sed ante in velit vulputate tristique. Duis lacinia eleifend massa, sed volutpat dolor malesuada at. Nam convallis consequat mauris imperdiet rutrum. Aenean vitae vestibulum libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum lorem nulla, pellentesque vitae porttitor condimentum, dignissim a libero. In quis turpis orci, vitae faucibus risus. Duis tincidunt, libero tincidunt hendrerit viverra, felis lectus rutrum diam, et dictum mauris ipsum nec purus.</p> <p>Vivamus ut nunc vitae eros fermentum pretium. Nunc molestie odio vitae magna consectetur quis ultricies purus adipiscing. Curabitur ante nisl, scelerisque a consequat sed, rhoncus at turpis. Morbi blandit ante eu tellus facilisis eu semper enim auctor. Nunc sollicitudin orci nunc, vitae accumsan risus. Etiam nec est in ipsum iaculis varius. Nam enim velit, imperdiet viverra condimentum vitae, egestas eget dolor. Nullam facilisis condimentum diam, in euismod lorem mattis a. Mauris vel nulla et ipsum venenatis aliquam vitae a nibh. Nunc commodo ullamcorper odio vitae fermentum. Praesent faucibus blandit condimentum. Integer sed justo nulla. Praesent id gravida dui. Proin malesuada interdum scelerisque. Sed condimentum justo nec metus venenatis accumsan.</p> </div> </div> </body> </html> this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things) So I have 3 images for the top of my page and 3 images for the bottom. The page is enclosed in a div frame titled "frame" each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe" Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom. Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame" I've tried some code in here to do it and it doesn't work.. any help here? thanks! Code:
<style type="text/css">
body {
text-align:center;
height:100%;
min-height:100%;
padding:0px;
}
#frame {
width:800px;
height:100%;
min-height:100%;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
position:relative;
}
#contentlefttop {
width:155px;
height:282px;
padding:0px;
float:left;
background-image: url(images/layout_01.gif);
background-repeat:no-repeat;
}
#leftframe {
float:left;
width:155px;
position:relative;
height:100%;
min-height:100%;
}
#contentleft {
clear:left;
float:left;
padding:0px;
width:155px;
padding-bottom:270px;
}
#contentleftbottom{
width:155px;
height:270px;
/*clear:left;
float:left;*/
padding:0px;
position:absolute;
bottom:0;
background-image: url(images/layout_07.gif);
background-repeat:no-repeat;
}
#contentcenter {
width:486px;
padding:0px;
clear:left;
float:left;
text-align:center;
min-height:100%;
height:100%;
padding-bottom:53px;
}
#rightframe {
float:left;
position:relative;
height:100%;
min-height:100%;
width:159px;
}
#centerframe {
float:left;
position:relative;
height:100%;
width:486px;
}
#contentrighttop {
width:159px;
height:282px;
padding:0px;
clear:left;
float:left;
background-image:url(images/layout_03.gif);
background-repeat:no-repeat;
background-position:top;
}
#contentright {
clear:left;
float:left;
width:159px;
padding:0px;
height:100%;
padding-bottom:270px;
}
#contentrightbottom{
width:159px;
height:270px;
/*clear:left;
float:left;*/
position:absolute;
bottom:0;
padding:0px;
background-image: url(images/layout_08.gif);
background-repeat:no-repeat;
background-position:bottom;
}
#contentheader {
width:486px;
height:135px;
float:left;
background-image: url(images/layout_02.gif);
background-repeat:no-repeat;
}
#contentfooter {
/*clear:left;
float:left;*/
width:486px;
height:53px;
background-image: url(images/layout_09.gif);
background-repeat:no-repeat;
position:absolute;
bottom:0;
}
#sitemessage {
margin-left:17px;
margin-right:31px;
height:90px;
text-align:center;
font-size:12px;
}
#wisemanquote {
margin-left:22px;
margin-right:24px;
height:85px;
text-align:center;
font-size:12px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<div id="frame">
<div id="leftframe">
<div id="contentlefttop">
<div id="sitemessage"></div>
</div>
<div id="contentleft">Left</div>
<div id="contentleftbottom"></div>
</div>
<div id="centerframe">
<div id="contentheader"></div>
<div id="contentcenter">
<p>Center</p>
</div>
<div id="contentfooter"></div>
</div>
<div id="rightframe">
<div id="contentrighttop">
<div id="wisemanquote"></div>
</div>
<div id="contentright">Right</div>
<div id="contentrightbottom"></div>
</div>
</div>
I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo I have this code... Code: <div style="width:200px;height:300px;border:1px solid red;"> <div style="width:198px; height:30px;border:1px solid blue;">ok</div> <div style="width:198px; height:30px;border:1px solid blue;">ok</div> <div style="width:198px; height:30px;border:1px solid blue;">wish this at bottom</div> </div> Above example is here... http://www.casti2001.com/box.html I ask, how can I put last box at bottom? Thanks for yor help! I have a DIV with no border or padding that I cannot get to bottom itself in IE7 even with
Code: position: absolute; bottom: 0px; is there a logical explanation for this? I tried Code: fixed: bottom; without success. Hi, I am using this code running well so it draws a box in the upper left side the way I expected. It affects a <div class="textOnBodyBottom">... PHP Code: .textOnBodyTop { float: left; position: relative; margin-top: 20px; margin-left: 20px; border: 1px solid Black; } ...but I wanted to draw another box at the bottom so I expecte foll code would also run well... PHP Code: .textOnBodyBottom { float: left; position: relative; margin-bottom: 20px; margin-left: 20px; border: 1px solid Black; } ... but it doesn't. Can you help me? Tks! Anyone know how to fix the bottom bars width? Page he http://www.milztech.net/ Cheers! Hi guys I'm in little trouble, because I cannot get a little block (div) to be shown always at bottom, no matter the height of my left column I'm making a complete tableless css layout for the first time Look: Here's the skeleton code Code: <!-- Begin Left Column --> <div id="cssleftcolumn"> HERE I LOAD THE LEFT COLUMN MODULES (IT IS A CMS) <div id="imagedownmenu"><font color="white">this little block should go bottom!!</font></div> </div> <!-- End Left Column --> And here the css code Code:
#cssleftcolumn {
width: 218px;
float: left;
color: white;
}
#imagedownmenu {
background-image: url(../images/fondo_botleft.jpg);
background-position: bottom left;
background-repeat: no-repeat;
height: 76px;
vertical-align: bottom;
}
I cannot get the little image to aling at bottom, and well, I don't know if this code will be enough for you guys, so I'll be waiting for your help in case you need more info to accomplish this Thanks a lot in advance, Hi How do I get a <div> to stay at the bottom, constantly, even if a layer above it gets resized so that its longer than the page in the browser. I have one <div> and then the footer <div> but the upper <div> gets resized to about 1000px and over laps the footer <div>, how do I get the footer <div> to keep at the bottom ? I have a chess website at www.nothingbutchess.com. I'm having issues with the page showing up properly with IE7. On the left hand side, you'll see a box with the heading "Nothing But Chess - News". On the right, you'll see a box with the heading "Recent Checkmates". Both of these headings are divs that have png images for the background and the wording inside of them. The problem is, in IE 7 those words are being cut off. Specifically, although the div and the image used for the background of that div are 26 px tall, the words within the div seem to be getting cut off at the 19 px mark. I used a ruler to measure. The css that, for example, that controls the "recent checkmates" header can be found at www.nothingbutchess.com/css/nbc.css and is... Code:
.recent_checkmates_top {
position:relative;
background: url(/images/home_wins_top.png) no-repeat top left;
background-color:#FF6633;
height:26px;
}
The actual html is nothing special and is simply Code:
<div id="recent_checkmates">
<div class="recent_checkmates_top">
<h1>Recent Checkmates</h1>
</div>
.....
If anybody has an idea why this is happening, I'd be eternally grateful. Thanks in advance. I'm trying to do something like this: div#box { position: absolute; top: 100px; bottom: 100px; } ..so that the box anchors to the top and bottom no matter what resolution you're in. It works fine in Firefox. Any ideas for ie? javascript or anything. Thank you i want to make it so a certain div is always at the bottom, but i cant do it by playing a min-height on the div above it, is there a solution to this problem? Hi there, I am having trouble aligning 2 divs to the bottom. I have a left and right side div for a header area, however the right side is taller than the left, so it is leaving a gap at the bottom of both sides. This is my CSS: PHP Code: #nav_wrapper{ } #nav_left{ width: 620px; padding-left: 20px; float:left; } #nav_right{ float:right; text-align: right; padding-right: 20px; } #member_login{ width: 180px; padding: 10px; font-family:Verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; background-color: #f6f6f6; line-height: 200%; } #member_login a{ font-family:Verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; font-weight:bold; text-decoration:underline; } and this is my HTML: PHP Code: <div id="nav_wrapper"> <div id="nav_left"> left content <div id="nav_right"> <div id="member_login"> right content </div> </div> </div> Any ideas? |
|||||||