|
CSS - Always Valign Bottom
Basically, I'm trying to get a div *bottom* to stick to the bottom of the page always, regardless if div *content* has enough data to push it down. Simple right? But it also needs to be able to align below the page just below *content* if the page needs to scroll, so it can't be aligned "absolutely". So how's it done?
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>Untitled Document</title>
<style type="text/css" title="">
#sidebar {
background-color: #00CC00;
float: left;
height: 100%;
width: 250px;
}
#content {
background-color: #FF66FF;
float: left;
height: 100%;
width: 600px;
}
#bottom {
background-color: #CCCCCC;
clear: both;
width: 500px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="sidebar">Sidebar</div>
<div id="content">
<p>Main Content Area </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="bottom">Bottom Nav Div - this page is layingout correctly. </div>
</body>
</html>
Similar TutorialsHi, I'm sure this has been covered before, but I can't seem to find an example that relates to what I'm doing. I basically want an to have a image with text on the left of it that is vertically alignment to bottom of the image. Here's a link to a table version. "visualstrategies.ca/jf_mackie/test.html" I've been playing with a css only version for 5 hours and can't figure it out. Any help would be great thanks. sskully Ok so what is the css substitute for the valign tag? Thanks! so i got theese spans you see he < | Detail Panel | Detail Panel | > theese spans are in the div with a border now i want to position theese spans vertically centered on the top border like image below can someone show me how to acheive this. i have a cheap method but it gets messed up if the user changes font size. i used position and top but if the user changes the text size via the browser it throws it off. i was hoping for a way that keeps them vertically centered no matter what the font size, at least on page load. img.photobucket.com/albums/v135/noitidart/cssfloat.gif thanks very much its urgent i want to have organized game boxes. the way i want it organized is for the image to be on the left, and the text to the right of the image. however, i want the image to be in the vertical middle of the div and the text to also be in the vertical middle. the problem with what i have now is that the image is always at the top of the game box div and so is the text. ALSO, i want the WHOLE GAMEBOX to act as an <a>, and not just the image and the game title. is that possible? Code: if ($a == 2) {
echo "
<div class='gamebox clearboth floatleft halfwidth'>";
$a = 0;
} else {
echo "
<div class='gamebox floatleft halfwidth'>";
}
$a++;
$game['desc'] = str_replace("'", "'", $game['desc']);
$game['desc'] = "<span class='gdesc'>".$game['desc']."</span>";
$link = get_game_link("id="._sp($game['id']));
echo "<a href='".$link."' class='gamelink'>";
// display game
echo "
<div class='floatleft'>
<img src='[imgdir]".$game['nameid'].".png' alt='Play ".$game['name'].
"' title='Play ".$game['name']."' class='gamethumb' />
</div>
<div class='floatleft wordwrap' style='width:75%'>
<h3 class='nomargins'><a href='".$link."' class='gamelink'>".$game['name']."</a></h3>";
$rating = round($game['rating']/2);
echo "
<img class='nomargins' style='border: 0px' src='[themedir]/ratings/".$rating."stars.gif' alt='".$game['name']." Rating' />";
echo "
<p class='nomargins'>".html_entity_decode($game['desc'], ENT_QUOTES);
if (theme_is_admin()) {
echo "<small>";
echo theme_admin_link("Manage Games", "darklink", "games", "manage");
echo " - ";
echo theme_admin_link("Edit This Game", "darklink", "games", "editgame-form", "id=".$game['id']);
echo "</small>";
}
echo "
</p>
</div>
</a>
</div>";
Hi everyone, I have a problem I'm trying to overcome with displaying an image next to the text in a table cell. I've set the table cell to valign=middle and this achieves the layout I want (hopefully this demonstration will look right..) Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here PICTUREHERE PICTUREHERE So the text and the picture are laid out along the middle of the cell. However as soon as the text gets too big for the cell (or the cell gets smaller) this happens: Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here, but when it's longer PICTUREHERE PICTUREHERE the remainder comes here I knew this to be because the img is still an inline element in the cell. I tried to solve the problem by making the img float:left, but the following happens, even if the valign=middle property is set in the cell: Code: PICTUREHERE The text goes here, but when it's longer PICTUREHERE the remainder comes here PICTUREHERE PICTUREHERE PICTUREHERE Is it possible to achieve the top layout. If it is can someone help me please (it's probably staring me in the face) Thank you in advance Andy 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 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! I have three divs. The main div contains the background color and border. The second div has text, and The third has an img. What I want is for the image to sit at the bottom of the main div and stay there when the font-size is increased. I want the text to stick to the top of the main div. Can someone please help me. I have attached the code below it is all messed up cause I have been trying everything I can think of. ".abouttestcontainer { width : 100%; float : left; border-top : 1px solid #cccccc; border-bottom : 1px solid #cccccc; border-left : 1px solid #cccccc; color : #001F56; background-color : #DDEADE; border : 1px solid black; } .abouttest { float : left; width : 450px; height : 100%; padding : 10px 50px 0px 10px; text-align : left; font-size : 12px; border : 1px solid black; margin-right : 10px; } .aboutimage { border : 1px solid black; position : relative; display : inline; vertical-align : bottom; }" 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? Please could someone help me with this CSS problem i have, I am trying to add a background to a link of a CSS box I have tried buttons and colour code backgrounds, image backgrounds, but none are working correctly here is what i am trying to do: forum.opencart.com/viewtopic.php?f=20&t=56656 Any advice, the point in the right direction or a CSS script snippet would be greatly appreciated. Many Thanks Hi! I can not solve one problem. As You can see here bezlica.ru/joomla/ , I need to have image "contacts" at the bottom of the grave. Currently, it is relative to top and works fine on different resolutions. But, if content needs to be expanded like this bezlica.ru/joomla/index.php?option=com_content&task=view&id=12&Itemid=9, images drops down from the grave to bottom. Maybe there is a way to make it relative to the bottom of the screen, or some other solution? It needs to stay fixed where it is on different resolutions, that is why it is so hard for me! Any help will be appreciated. Regards, Konstantin. ok so i have a photo gallery and the images vary in height. and so instead of having them defaulted to top aligned, i'm try to figure out how to get them to bottom align. anyone have any ideas or articles i can check out? thx 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 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? Current working file is he http://ravenwave.com/clients/opi/ link to the css file is he http://ravenwave.com/clients/opi/opi.css The issue is that I have a background with an associated navigation bar that need to align bottom. I've got that part all figured out and working. However, the snag is that if the browser window is shrunken to a small vertical height, the bottom navigation bar (and associated background) keeps riding up and then gets mixed up with the other content. Conversely, if the page is extra long in content and so needs to scroll, then the bottom bar and background is aligned to the bottom of the window, rather than the page. Obviously this has to do with absolute vs. relative positioning and is not working how I want it to work. Right now I'm guessing that I need to switch to a relative postioning, but I'm hoping that maybe there are some other fixes that I don't know about. I've tried a few things, but am just kind of wasting time and need to get this figured out. Thanks 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. Hi all, Is it possible to automatically scroll the scrollbar to the bottom in the css. This is how you do it in html: var objDiv = document.getElementById("leftHand"); objDiv.scrollTop = objDiv.scrollHeight; Regards, Stephen hi i have few questions: 1. when you have a paragraph and the space between the two lines of text, how do you reduce it? 2. similarly say you have a paragraph and then another element underneath it for eg the end of table, a horiz. line etc, how do i reduce the space between that paragraph and that element. 3. I have a DIV but when i put it on the page it appears at the top, is there a way to place it so that it is placed at the bottom. here is the code: Code:
<div style="float:left;">
<a href="{U_VIEW_FORUM}">{FORUM_NAME}</a><br />
<b>{L_MODERATOR}: {MODERATORS}<br /><br />
{LOGGED_IN_USER_LIST}</b><br/>
<a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" /></a>
<!--<a href="{U_INDEX}">{L_INDEX}</a> -> <a href="{U_VIEW_FORUM}">{FORUM_NAME}</a>-->
<a href="{U_INDEX}">Forum</a> -> <a href="{U_VIEW_FORUM}">{FORUM_NAME}</a>
</div>
<div style="float:right; vertical-align:bottom; margin-top:9%;">
{PAGINATION}
<a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>
</div>
in this the first DIV appears on the left, the second div appears on the right of the first div. HOWEVER it positions itself with the top of first div SOMETHING LIKE: Code: FIRST DIV TEXT SECOND DIV TEXT FIRST DIVE TEXT .... ... however i want it to look like: Code: FIRST DIV TEXT FIRST DIVE TEXT .... END OF FIRST DIV SECOND DIV TEXT now i have two possible sol for this ie: using margin-top to make it go down or use <br/>. is there a css specific tag? |
|||||||