I have the page with the structure:
<div id="container">
<div id="header">top menu</div>
<div id="content">content</div>
<div id ="footer" align="center">
<div class="left">left part of footer menu</div>
<div class="right">right part of footer menu</div>
</div>
</div>
Css style:
#container {
position:relative;
height:auto !important;
height:100%;
min-height:100%;
}
#content {
padding:0em 0em 12em;
}
#footer {
position:absolute;
width:100%;
bottom:0;
}
.left {
float: left;
}
.right {
float: right;
}
That works fine in all browsers. But when I add
<script type="text/javascript"></script>
inside
<div class="left">
in FireFox(only) the part of footer after the script come up to the top - between header and content divs.
What's wrong with it?
UPD
This all was about wrong mark-up inside #content. And only FireFox didn't understand when I missed one of closed table tag:) Thank you guys, you helped me to sort it out.
The #footer has absolute position and is inside the relatively positioned #container div so I would expect this. Maybe try making container absolutley positioned.
Also I think your markup is not what you intended. There are one too many opening div tags.
change the #container height from auto to 100% and remove the extra lines for height.
The auto is messing up the calculations as it overrides the 100% lines due to the !important value
Since #footer's position is absolute, with bottom 0, it will be positioned relative to its first (non statically positioned) parent, which is #container. Essentially what's happening here is that #container is becoming mush less high, and dragging #footer with it.
That's happening because you have two height: settings in the css for #container (somehow the script tag triggers it to refresh) so the behaviour would be undefined.
If you're trying to make the footer stick to the bottom of the window, including as it's resized, I'd advise having a javascript function handle it, triggered by the window's resize event (it's fairly simple, see this question on javascript window resize event
You could try the CSS a different way with absolute positioning. I try and avoid float as it can lead to unexpected rendering issues. See this jsFiddle for an alternate approach. Working in IE6, Chrome12 and FF3.6 and FF4 for me.
Related
Can anyone assist me with the following div layout? I have tried a couple of solutions, however, the only way i have been able to accomplish this is using tables.
I had a look at Holy Grail 3 Column Layout, however, this layoyt is not 100% height, and header is not fixed, i also need only the content to scroll, the sidebars needs to be fixed 100% height
It seems the answers here ignored most of your requirements. I stumbled upon this because I am having a rendering issue with the same layout you are after. I forked the fiddle above to show you:
http://jsfiddle.net/RsRf9/2/
The major difference is that the entire body is scrollable, not just the tiny area in the center (I think this is what you are after).
Aside from cleaning up styles that weren't doing anything (like floats while position fixed), the major change is to the center col - all you should need is this:
.center{margin:100px 200px;}
The other change is how you get that "height 100%" effect on your sidebars - my trick is to do this:
.left,.right{width:200px;top: 100px; bottom: 0px;position: fixed;}
Instead of height 100%, I simply tell it to stretch from top 100 (the bottom of the nav) to bottom 0 (the bottom of the page)
That will push the content bellow the top nav and in between your two fixed side bars.
I have created a working fiddle as per your requirements:
Here is working fiddle - UPDATED to include fixed header ONLY TOP BAR IS FIXED
The important thing to note is the structural layout of the divs... notice that the .center is AFTER the .right
<div class='wrap'>
<div class='head'>Header</div>
<div class='bodywrap'>
<div class='left'>left</div>
<div class='right'>right</div>
<div class='center'>center center center center center center center center center center center center ... blah</div>
</div>
</div>
and the css is:
JUST HEADER FIXED:
html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%} << UPDATED for fixed header
.bodywrap{margin-top:100px;width:102%;margin-left:-1%} << UPDATED - Terrible hack and you may find something more elegant
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;}
.right{float:right;}
.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}
HEADER AND SIDEBARS FIXED (Also was able to fix dirty hack for .left and .right undersizing
html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%}
.bodywrap{margin-top:100px;margin-left:-8px}
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;position:fixed}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;margin-right:191px}
.right{position:fixed;right:0}
.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}
Here is with top and sides fixed center scroll liquid center column (and no gaps on .left and .right)
It's basic use of floats but the structural markup layout is key ;)
I use the YUI grids style sheet for this kind of layout. It is tried and tested and works in multiple browsers.
This is actually quite easy to do in a rudimentary sense, you don't need tables (or table-cell) but mixing px and % sizes can be problematic. If you stick to % your page will resize better anyway. Handling the cross browser issues takes a bit more CSS tweaking, but there are plenty of grid solutions out there that implement tried and tested solutions even for IE6 and frameworks like twitter's bootstrap will offer a lot more on top.
In other words, this is a solved problem, but here's a quick example of how you can get there by hand;
<div class="container">
<div class="header">
header
</div>
<div class="left">
left
</div>
<div class="main">
content
</div>
<div class="right">
right
</div>
</div>
And the CSS;
html, body, .container
{
height:100%;
}
.container
{
background-color: pink;
}
.header
{
background-color: yellow;
height:50px;
}
.left
{
background-color: red;
float:left;
width:10%;
height:100%;
overflow: hidden;
}
.right
{
background-color: blue;
float:left;
width:10%;
height:100%;
overflow: hidden;
}
.main
{
background-color:#fefefe;
float:left;
height:100%;
width: 80%;
overflow-y:scroll;
}
And of course the Fiddle
Using % sizing will also allow you to approach a more responsive design that works for tablet and mobile. Again, many of the grid frameworks out there are 'responsive' in design.
You can use scrollToFixed plugin for left-sidebar and right-sidebar fixed and center column content only scroll up side and downside.
For demo scroll use below link
http://bigspotteddog.github.io/ScrollToFixed/
And one more thing use Bootstrap for design UI.
Include Bootstrap CSS and JavaScript in your page header part
<div class="container">
<div class="col-md-12">
<div class="col-md-3" id="left-sidebar">
left-content
<div>
<div class="col-md-6" id="center">
center content
</div>
<div class="col-md-3" id="right-sidebar">
right-content
</div>
</div>
</div>
You can modify as per your requirement. I just give you general hint.
Just write below script for scrolling
$(document).ready(function(){
$('#right-sidebar').scrollToFixed({
marginTop: function() {
return 5;
},
limit: function() {
return (
$('#footer-widgets-bg').offset().top - $('#right-sidebar').outerHeight(true)
);
},
zIndex: 1,
removeOffsets: true
});
});
So, quickly typing this, so sorry if it's kinda vague/confusing.
So, I have a bar I am using css on the bottom of the screen, and I have a divider above it. I try to use height 100% on the divider to get the height to go all the way to the bottom, but it goes under the bar, and I want it not under the bar. How would you guys suggest I do this? I would prefer a css method, but javascript would be fine too.
If you have any padding on that divide, it will be added to the 100%. Thats probably your question.
Something like this maybe:
<style>
.one {
height:100%;
display:block;
}
.two {
padding: 20px;
}
</style>
<div class="one">
<div class="two">
</div>
</div>
I having a hard time with my CSS min-height, I have two divs and they are side by said, if one of them expands, I would like the other to expand http://www.willruppelglass.com/
As you can see the leftSideBar stops expanding at its min-height and the content div is expanded past its min-height.
CSS
.leftSideBar{
background:url(../images/leftSide.jpg) repeat-y;
float:left;
margin-top: -49px;
min-height: 591px;
}
.contentWrapper{
background-color:#ebebeb;
width:1411px;
margin:0 auto;
position:relative;
}
.content{
background:#FFF;
width: 1100px;
margin:0 auto;
position:relative;
min-height: 591px;
}
HTML
<div class="contentWrapper">
<div class="content">
<div class="leftSideBar">
<img src="images/leftSideTop.jpg" width="170" height="78" border="0" />
</div><!--leftSideBar-->
</div><!--content-->
</div><!--contentWrapper-->
The reason this is happening is because the content in the content div is pushing past the minimum height but the left nav not actually having content has no reason to get bigger.
My suggestion, even though it is not strictly CSS, I would use a simple piece of jQuery (because I noticed you are already using it) that will dynamically adjust the CSS property of the left div to match the right div. The jQuery version is here:
var div_height = $("#content").height();
$(".leftsidebar").css("height":div_height);
Please note that I have used an ID on the content that doesn't exist in your existing code so you will need to assign an ID to that div to work.
I hope this helps.
You have the first area floating left. Whenever you use float it can act different in various browsers, so I avoid that sort of stuff at all costs for main elements.
If you want your divs to be independent of each other, don't nest them. Better yet, control the positioning yourself using css properties such as "display" and "position". Once you get your divs separated from interacting with each other you'll find you have much more control over them individually.
I saw a similar question here, and did not see an answer. I'm having an issue where an element is floated right, inside a parent div, and it's causing the div to stretch the entire width of the page in IE7. This does not happen in any other browsers (Firefox and Chrome). I've also posted pictures after the question, for reference. The HTML I'm using is below:
<div id="journal" class="journalIE">
<div class="title_bar">
<div>
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
</div>
The CSS I'm using for these tags is below as well. One thing I noticed consistent between the other person's question referenced above, and my issue, is that both parent div's have positioning applied (person above has absolute, I have fixed).
#journal
{
z-index: 1;
}
.journalIE
{
right: 1px;
bottom: 18px;
position: fixed;
}
#journal .title_bar
{
background: #F3F3F3;
border: 1px solid #C5D6E8;
color: #363638;
font-size: 11pt;
font-weight: bold;
height: 20px;
padding: 4px;
margin-bottom: 4px;
}
#journal .title_bar .actions
{
float: right;
}
.clear
{
clear: both;
}
Notice that the 'actions' class is floated right. If I take away that float, my box looks like this. But with the float added, it stretches the entire screen, and looks like this. Is this a known IE bug, because it's not happening in any other browser, and it's driving me crazy.
For those wondering, I did have content in the 'actions' div, but have stripped away everything down to the root problem.
Any assistance would be greatly appreciated. Thanks very much.
You need a width: *A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). *
via: W3C
Do this
<div id="journal" class="journalIE">
<div class="title_bar">
<div class="Test">
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
and then add a Css class
.Test
{
float:right;
}
should do it, let us know if it does not work.
MNK
I'm not entirely sure what you want, as you didn't explain what you wanted to do with the "actions" div, but if you wanted the "actions" div to float right next to the "Testing" div, I just tried making a separate .floatr class, or it will also work if you just apply style directly to div.
.floatr {
float: right;
}
with .floatr class, apply that to "actions" div:
<div class="actions floatr"></div>
I don't know why, but it seems to me that "actions" div is ignoring the float setting in the class you set in that manner. I personally prefer to apply multiple classes to divs, which allows me to reuse that class over other divs for which I want that effect, but I've heard that some browsers will ignore any classes declared after the first one. Oh well, I haven't run into that problem yet with major browsers...
Oh wait.
I looked over code again, and I think you just had a problem with how you set your classes. Your "actions" div was missing out on the action, try adding a comma to CSS:
#journal .title_bar, .actions
{
float: right;
}
I guess sometimes to figure something out you gotta apply effect directly to make sure it can behave in the manner you expect it to, and then probably figure it's some sorta syntax error if it does work. heh.
I need to stretch main div height to the view-port height and place the footer at the bottom of the screen. could anybody solve this?
body{text-align:center;}
#main{width:200px;margin:0px auto;background:#cccccc;}
#header{height:20px;background:#00FFFF;}
#content{height:80px;background:#cccccc;}
#footer{background:#0000FF;height:20px;}
.demo{width:90%;margin:0px auto;}
<div id="main">MAIN
<div id="header" class="demo">HEADER</div>
<div id="content" class="demo">CONTENT</div>
<div id="footer" class="demo">FOOTER</div>
</div>
This way of doing it works pretty well: http://www.xs4all.nl/~peterned/examples/csslayout1.html
You could try 'position:fixed; bottom: 0px' on the footer div.
That will work fine, but could be a problem if the content-height gets bigger than the screen size.. if the box main can be at 100% screen size then i would try something like this:
#main{
position:relative;
min-height:100%;
height:100%;
height:auto !important;
}
#footer{
position:absolute;
bottom:0px;
}
All the heigth values are just to make the content at least fit the screen size, but it may expand if the content becomes bigger.
Gushiken
I've churned on trying to do this strictly with CSS on several occasions (with cross-browser compliance in mind). I find it easier just to write a quick jQuery script which handles resizing the div to the appropriate size.
$(document).ready(function () {
/* this could be something different, like subtracting the height of your footer or something */
$(window).resize(function () { resizeMyDiv(); });
});
function resizeMyDiv() {
$("#divResize").height($(window).height());
}
Not sure if you're using jQuery, but it seems to be easier to do it this way.