entropy
-
Posts
15 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by entropy
-
-
I want to have a sticky footer on the bottom of the page, wherever that is, a header on the top of the page and scrolling content in the middle. This is what I have come up so far. It kind of works in FF, but in IE the footer is invisible because it is below the bottom of the visible page (scrolling). In FF there are no scrollbars appearing next to the content. Furthermore I have to fix the height of the header and footer in this way, which I want to be variable.
<html><head><style type="text/css">#container {height: 100%;width: 70%;margin-left: auto;margin-right: auto;}#bottom {background: #FF00FF;z-order: 1;position: fixed;bottom: 0;width: 70%;}#top {background: #FF8000;width: 70%;position: fixed;margin-top: 0;height: 100px;}#middle {position: fixed;top: 100px;} </style></head><body><div id="container"> <div id="top"> top </div> <div id="middle"> middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR> middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR> middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR> middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR> </div> <div id="bottom"> bottom<BR>bottom<BR>bottom<BR> </div></div></body></html> -
Problem fixed! Thanks!use overflow:hidden; for .title, the parent element cannot detect area of floated elements, but using overflow: hidden fixes this.
-
Hello. I am trying to get a background fit around two floating divs:
<html><head><style type="text/css">body {width: 800px;}.toptitle {background-color: #FF0000;margin: 0;padding: 1em 1em;}.logo {float: left;}.search {float: right;}</style></head><body><div class="toptitle"> <div class="logo"> <img src="image.gif" width="200px" height="65px"> </div> <div class="search"> Search: </div></div></body></html>The background shrinks to the top of the divs, while I want it to neatly fit around them. I can't give it a fixed height, because the size of the image is beforehand unknown.
-
-
Sorry, I mean *kind* of widths of course. (Can't seem to edit my posts...!) Sorry for the misunderstanding.
-
I want do be able to vary the widhts and sort of widths of the side panels at will and float the middle panel in between!Sorry as i understood it the side panels are fixed? now you say they use max-width: which is used on fluid elements, and stop going beyond a certain width. When you make up your mind what you trully want, lets us know and we will be able to help you. -
When I do that, but the side-panels have a max-width, the middle panel does not fit anymore.I can't seem to get de middle panel 'fit' into the space between the two side-panels, whichever widths these sidepanels may have. Any genius idea always welcome...You give the left and right margins of middle the same or slightly more (10px) than the width of side panels respectively.
-
This seems to work in FF with me:
<html><head><style type="text/css">#bgImg{position:absolute;top:0px;left:0px;width:100px;height:100px;z-index:-1;overflow:hidden;}#content{margin-top:4%;height:82%;background-color: #fff;opacity:.5;filter: alpha(opacity=0);overflow:hidden;}#contenta {margin-left:23%;margin-right:26%;}</style></head><body> <div id='bgImg'> <img id='bgImg' src='images/DefaultBG.jpg'/> <div id="contenta"> <a href="pages/main.html"> <div id="content"> </div> </a> </div></div></body></html> -
Yes, I know. The problem is that I want the width of the center column variable, and the widhts of the sidecolumns fixed. I recollect that this is easy to do with tables, but I want to try to get it right with CSS.Not ture. There's always min/max height/width. See Property Dimensions: http://www.w3schools...t.asp#dimension -
It seems that I have to choose between all-relative and all-absolute widths. Thanks for your help so far, niche.
-
My english falls short of perfect, but if I understand you correctly, I should preferably demonstrate my understanding of the matter prior to bluntly asking for code. Fair enough. Thanks in advance. Going to try now.
-
Can you put that in code for me?That's what I thought. You can float everything right or left (just make sure there's enough room). If you want to give the center div special attention, float left, then, right, then margin: 0 auto; -
Sorry for the misunderstanding. I mean side-by-side.By "float horizontally", do you mean one under another or one beside another. I thought you meant one under another until I saw your code. -
I am trying to get three div's to float horizontally. I've tried several methods: The body-part of the html:
<body><div class="container"> <div class="left"> Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left </div> <div class="middle"> Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle </div> <div class="right"> Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right </div></div></body>
And the five tries: Attempt one:
<style type="text/css">.container {width: 40em;font-size: 1em;}.left {float: left;width: 20%;}.middle {float: left;}.right {float: left;width: 20%;}</style>Attempt two:
<style type="text/css">.container {width: 40em;font-size: 1em;}.left {float: left;width: 20%;}.middle {float: left;}.right {float: right;width: 20%;}</style>Attempt three:
<style type="text/css">.container {width: 40em;font-size: 1em;}.left {float: left;width: 20%;}.middle {float: left;width: 55%;}.right {float: right;width: 20%;}</style>Attempt four:
<style type="text/css">.container {width: 40em;font-size: 1em;}.left {float: left;width: 20%;}.middle {float: left;width: auto;}.right {float: right;width: 20%;}</style>Attempt five:
<style type="text/css">.container {width: 40em;font-size: 1em;}.left {float: left;width: 20%;}.middle {float: left;margin: 0 auto 0 0;width: auto;}.right {float: right;width: 20%;}</style>In the last attempt, one can play around with the 'auto's', but nothing seems to get the result I want. From these, attempt three is the only one that works more or less. The problem is that al widths are relative. When I want to, for instance, make the widths of the two columns on the side fixed (px), then I can't find a way to strech the middle collumn to fit.
fixed header and footer?
in CSS
Posted
The doctype did the trick for IE. A height on the footer does not change its height (?). This is something I found on floats in O'Reilly's CSS pocket reference: "Basic floating is generally supported by all browsers, especially onimages, but the nature of floats can lead to unexpected results whenthey are used as a page layout mechanism. Use float cautiously,and thoroughly test any pages employing it." Besides that, I wouldn't know how to apply floats in this case.