|
CSS - 3 Colums.. How To Fix Each Columns Bottom To The Bottom Of A Frame?
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>
Similar TutorialsHello, I am trying to make the switch over to CSS positioning for my website design, but I am having some trouble with how my site is currently designed. I have a frames page that uses the main section for all my content and a footer section that basically contains a footer that I need to have at the bottom of my pages all the time. My question is whether there is a way to position a CSS layer to do what that bottom frame is doing for me? It needs to be achored to the bottom of the screen and be there all the time. Any help is appreciated! Thanks Jamie so I have a side menu & main content inside a main container which has background so it looks like side menu & main content have diff. backgrounds and they all of same height.. Problem: I would like to add something to the BOTTOM of the side menu but am not able to do so.. this text has to appear at the bottom of the page even if content of side menu is less.. I could do "position:absolute" and give it top:870. but this is not dynamic as when the main content is larger it appears this text is in the MIDDLE rather than at the bottom? 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. 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; }" 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 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 ? 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. 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. 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 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 Using mysql and php I gather data belonging to different people and I put together one page for each person. The bottom of each page has a different footer: Quote: <div id="footer">Data...</div> The declaration of style is Quote: <style type="text/css"> #footer { position: fixed; width: 100%; height: 180px; top: auto; right: 0; bottom: 0; left: 0; } </style> The problem is that each page has the same information shown at the bottom. However if I check the source code it shows different data for each bottom of page. Help! 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! 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? 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 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. 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 want to make an input button display on the bottom. Is there a way? This doesn't work: input { bottom:0px; } Any ideas other than wrapping it in a <div>? I seem to be missing the margin at the bottom of my subforums in IE. Works fine in FF. See the subforums, in IE the boxes are right up against the bottom instead of spaced out like in FF. http://mmogm.com/ Anyone please help me with the solution? Thanks in advance |
|||||||