I've got myself into a bit of predicament where I have a fixed width site, but need two fluid width bars to go 100% across the screen. I'm using a rather horrible wordpress template for the site in question, that every time you save any settings it saves the content width as per its settings. In this case it's 900px.
Thing is I'm happy with the whole site being 900px, it's just a header bar and footer bar that I need 100%, even the elements inside these bars can be 900px, I just need the colour to extend to each side of the screen.
The site in question is http://mysterybox.co/ You can see from the image below which bar I need extended out. If anyone could point me in the right direction that would be great.
Just create a new container for both your header and footer and take them out of your #container div. Something like this will work:
HTML
<div class="header-wrapper">
<div id="headerwidth">
....
</div>
</div>
<div class="footer-wrapper">
<div id="footer">
....
</div>
</div>
CSS
.header-wrapper, .footer-wrapper {
background-color:#000;
margin:30px 0 40px;
}
#headerwidth, #footer {
width:900px;
margin:0 auto;
}
Related
I'm using Bootstrap 3 and I'm trying to make a scrollable content DIV.
I have a grid with a left side navigation and a top bar and in the
middle I have the content that should be scrollable.
It works when I use a fixed height on the content div...but I want
to use 100% instead.
<div class="col-lg-12 col-md-12 col-sm-12" style="height:100%;overflow-y:auto;">
some content...
</div>
CSS:
html,body
{
height:100%;
overflow:hidden;
}
How could I get this to work with height:100%;
Thanks!
You can add pre-scrollable class for the div you want to scroll.
If you search the .css there is a max-height but you cant edit. So you have sure it will maximize the page in the window for that max value.
Hope it helps, i used the same for a one-page with scrollable divs.
I'm having problems avoiding my sidebar to overlap the main content of my blog on tumblr. I am using a premade template on tumblr which i have modified. The only ways I can position my sidebar in the top right corner, is by using an absolute or fixed position:
#sidebar{
position:fixed;
top:20px;
right:20px;
}
When using e.g. relative, the sidebar position itself in the bottom after my main content.
My page is built up like this:
<body>
<div id="page">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
</body>
Click here to see the page.
I tried putting my sidebar inside the page div, but there's a constraint on the width, which I would like to keep. Thank you in advance.
According to your latest comment, this should help your problem:
You could just set a min-width on your page, rearrange your markup a little, and remove some styles on the sidebar. If you leave everything like it is now, then the following will help:
Set min-width: 1250px; on your body tag
Move the sidebar element to before the page element
Remove position: fixed; from the sidebar element
This will prevent the menu from overlapping the page content and will add a horizontal scrollbar to the page when the user's window is less than 1250px. If you want to support a smaller min-width or if you have a problem with the background image becoming not centered at small resolutions, then minor modifications will be necessary.
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
});
});
This question already has answers here:
How to avoid wrapping in CSS float
(2 answers)
Closed 3 years ago.
On the left we have a context sensitive navigation/information bar. At times there is very little information in it and other times it takes up the entire height of the page. I've seen a bunch of suggestions on other posts about floating, etc but nothing I've tried works.
.tablebox {float:left;position:relative;z-index:1;border-right:1px solid #000000;}
.groupbox {float:left;position:relative;z-index:-1;border-right:1px solid #000000;}
So two divs for the sidebar - one to create the background layer which will take up the entire height of the page and then tablebox with the actual content on it - it could have a different background color as required.
<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>
Then we have the right hand side main content... again the idea being that tablebox would have a different background colour and appear to float on top of the page.
<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>
Now if the browser width gets to be too small the right hand div falls below the sidebar. Whether there's room there or not.
SOLUTION:
The problem was that the two sets of divs's parent did not have a defined size. As the browser window was resized the children got shuffled to fit inside of the new size. By defining a parent div with a fixed width and adding a overflow:auto the parent would not change even if the browser window was.
Note: This is not the best way to resolve this obviously - this means that the content does not dynamically format itself. It now has a fixed width. In my case I have no other choice. It is a band aid solution but if you're in the design stage think about people viewing your page from a cellphone or old people with their low resolution screens and giant text.
To be clear for those easily confused:
<div style="width:1053px;overflow:auto">
<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>
<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>
</div>
But again - if you have a choice don't do this! Fixed width will not make your site very pretty on some devices.
<head>
<style>
body {
padding:0;
margin:0;
}
div {
width:25%;
height:25%;
}
div.left {
background-color:red;
float:left;
}
div.right {
background-color:yellow;
float:right;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
http://jsfiddle.net/8gNDU/2/
http://69.65.3.168/~doubleop/pro.sperity/
The content and footer are both in a div (#left) and the sidebar is in (#right)
#left{
width:685px;
float:left;
overflow:visible;
}
#right{
width:215px;
float:left;
margin-top:20px;
}
The footer is 900px; wide, which is why i set #left to overflow:visible, so you could see it. I am doing this because i want the sidebar to overlap the footer when the content area has small amount of content. Obviously, when the content area expands, the sidebar will remain in the same place, but the footer will be pushed down. Al this gives me a nice overlap effect.
However, IE 6 doesnt like this, and it pushes the sidebar under neath the footer.
If i change #left property to overflow:hidden, the sidebar appears in the right place, but the footer is cut off. So the problem lies within the overflow:hidden part.
Does any one know what i can do to work around this?
Just place your #footer after #right div.
<div id="left">
</div>
<div id="right">
</div>
<div style="clear: both;"></div>
<div id="footer">
Yeap. You're going to need to do a "clear:both" on the footer. Your right hand float is out of the flow of the page and the footer doesn't know that anything is above it. Clearing both will bascially turn off the floating making the footer think that something is above it, which will in turn push it to the bottom where it belongs.