entropy
-
Posts
15 -
Joined
-
Last visited
entropy's Achievements
Newbie (1/7)
0
Reputation
-
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.
-
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!
-
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!
-
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...
-
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.
-
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?
-
Sorry for the misunderstanding. I mean side-by-side.
-
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.