I've looked around and haven't found QUITE what I'm looking for yet, so hopefully this question hasn't already been answered somewhere else!
Anyways, the layout in question can be found HERE. What I am trying to achieve is a fixed width left column, and fluid width content area. For the most part, it works just fine. However, when content expands beyond the browser window's height or width, the sections don't seem to expand like I would want. Notice how to grey bar at the top doesn't reach the right of the page content, and the height of the left column doesn't reach the bottom of the page content either.
Am I right in thinking this stems from the fact that setting something to 100% height or 100% width via CSS is static? i.e. Whatever the height/width of the browser window was when the CSS was called is saved and that's that?
If that's the case, maybe I need to look into some other methods of setting the height and widths of my elements. Any ideas? Also, note that the dummy content in the page is an image for now. I wanted to blur out names, etc. to keep data private.
THANKS FOR ALL OF YOUR HELP!!!
How about something like this...
The left column will only go as far as the right content though. If you want it to expand to the height of the viewport when there's not enough content to fill you'll need some javascript or you'll have to use a repeating background that fills the html
Demo: http://jsfiddle.net/wdm954/KyUfN/
<div id="wrapper">
<div id="left">left</div>
<div id="right">
<div id="content">
<div id="top">top</div>
content
</div>
</div>
</div>
CSS...
/* clearfix */
#wrapper:after, #right:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
#wrapper, #right {
display: inline-block;
}
#wrapper, #right {
display: block;
-height: 1px;
}
/* end clearfix */
#wrapper {
background-color: #000000;
}
#left {
float: left;
width: 300px;
color: #FFF;
}
#right {
margin-left: 300px;
}
#top {
height: 100px;
background-color: #DEDEDE;
border-bottom: 1px solid #B8B8B8;
}
#content {
background-color: #F4EBEB;
height: 600px;
width: 1200px;
}
If the background is the main problem, you can just style the wrapper. This is what I ended up doing for an unruly sidebar, as I didn't want to resort to JS and other solutions didn't work for me. In my case, the issue with the sidebar came because of jQuery tabs, that are part of the theme. When I switched to the tabs, the sidebar wouldn't extend to the full height, so the background wouldn't either.
HTML
<div id="wrapper" class="sidebar-right">
<div id="maincontent">
#content
</div>
<div id="sidebar-right">
#sidebar content
</div>
</div>
CSS
(this presumes 960 grid with 280px sidebar)
#wrapper.sidebar-right{
background: white url('images/bg.png');
background-repeat: repeat-y; /*repeats down the length of the page*/
background-position: 680px 0px; /*moves it into place*/
}
If you have different sidebars, or full-width layouts, change the background image/position and style accordingly. Hope that helps someone.
Related
Option 1
Below is a general layout of a site im trying to construct. The green regions are the sites header and footer. The blue region is flash content who’s height changes depending on what is displayed. The red region are two spacers im trying to construct that bound the flash content and their sizes change according to the width of the browser however the width of the flash content stays static.
Where im getting hung up is how do i create these spaces in css. I assume that i would use CSS to solve this problem correctly.
For example, in the CSS file i need to set the background color and height as they as always going to be static, only the width changes.
#left spacer {
background-color: #881E42;
height: 46px;
float: left;
}
#right spacer {
background-color: #881E42;
height: 46px;
float: right;
}
How can i set the width of right and left spacer to (Browser width - Flash Content width)/2
Where the width of the flash content is static at 920px.
I'm not sure how to govern the width of the spacers.
Somehow the width of the spacers needs to be set to a size of (Browser width - flash content width)/2
In this example the static width of the flash content is 920px and the browser width is variable. so say the browser width is 1920px than the size of each spacer would be 500px per container. I would also set the minimum width of each spacer to 20px so they show up if the browser width is below a certain threshold.
Opetion 2
The other idea that i had was to create 1 container which housed the flashcontent
<div id="container">
*Flash content scipt goes here
</div>
I dont know how to do this or even if its possible, but it would work
#Container{
psudo code
Color 1: #881E24
Color 1 height: 25px
Color 1 width: 100%
background-color: #FFFFFF;
height: auto;
width: 100%;
text-align: center;
}
Here is a working JSFIDDLE
Updated code.
Example of code,
<div id="header">
</div>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<div class="clear"></div>
<div id="footer">
</div>
CSS
#header {
width: 100%;
height: 50px;
background-color: green;
}
.clear {clear: both;}
#one {
width: calc((100% - 250px)/2);
height: 10px;
background-color: red;
float: left;
}
#two {
width: 33%;
height: 970px;
background-color: blue;
float: left;
}
#three {
width: calc((100% - 250px)/2);
height: 10px;
background-color: red;
float: left;
}
#footer {
width: 100%;
height: 50px;
background-color: green;
}
One way to do this would be make the three DIVs float:left and size them as you want, then between the end of the content you'd use a clear and end with the floating area.
If you do it that way, you'll have:
left_spacer | flash_content | right_spacer
The spacers are really only needed if you want to put content in them (otherwise you could use only margins to put #flash_content wherever you want, and not need to make anything float).
To size your DIVs, you would have to size left_spacer and flash_content with a certain amount of pixels or percentage, and right spacer should fill the rest of the space.
You might want to put the three divs in a container if you're using fixed width, too.
edit: actually, I think you won't need to make the last of the three divs (right_spacer) float:left, since it is the last one on the row.
I'm running into a minor issue with one of the elements on my page. I have a sidebar which I am attempting to have span the height of the page by using the following CSS:
#sidebar {
width: 180px;
padding: 10px;
position: absolute;
top: 50px;
bottom: 0;
float: left;
background: #eee;
color: #666;
}
The corresponding CSS is pretty much what you'd expect:
<div id="header">
The header which takes up 50px in height
</div>
<div id="main-container">
<div id="sidebar">
The sidebar in question
</div>
<div id="main-content">
The rest of my page
</div>
</div>
The code works as expected for the most part. When the page renders it spans 100% of the height (minus the 50px from the top). The problem is that it essentially assigns the box to the exact height of the window so as I scroll down the box scrolls away instead of staying locked to the bottom of the window. Any ideas how to resolve this?
You have to use position:fixed if you want for the sidebar to be fixed on some position:
#sidebar {
width: 180px;
padding: 10px;
position: fixed;
top: 50px;
bottom: 0;
background: #eee;
color: #666;
}
JSFiddle
Another way would be to give to the parent container position:relative, and on his child position:absolute - but then the parent must have some height so the child element takes its height.
html,body{
position:relative;
height:100%; /* some height */
}
#sidebar{
width: 180px;
padding: 10px;
position: absolute;
top: 50px;
bottom: 0;
background: #eee;
color: #666;
}
JSFiddle
Check learnlayout to read more about positioning.
use css position:fixed to make the sidebar fixed.
in order to lock the height according to screen height i would use javascript/jquery:
$(function(){
// assign to resize
$(window).resize(set_height);
});
function set_height() {
$('#sidebar_id').height($(window).height());
}
hope that helps
First of all, I don't understand how it's spanning 100% of the height when no height has been defined.
Secondly use position: fixed instead of absolute.
On a second note, I'd like to recommend what seems a more proper way of going about positioning this. At the end of the main-container div, before it's closing tag, put this
<div style="clear: both;"></div>
and make the main container also float left, or float right if that doesnt give you what you want. It's suprising how such a common layout can feel tricky to do properly. (at least for newbies like us). I might be wrong, this might not be a better way, but it's the way I'd do it. The extra div you add is so that floated divs take up space, apart from that if it doesn't work, give the sidebar a height of 100%, or if you think it will overflow, tell me I'll add to my answer.
I'm working on a website that fits perfectly in the browser window. Below is a basic blueprint of the website layout:
So far, the Red area is just display:block. The Green area is also display:block with margin-right:200px. The Blue areas(nested in a div) is float:right.
So I've got the width sorted. It's the height I need advice on. The Red and Dark Blue areas are a set height, but I need the Green and Light Blue areas to fit the height of the browser window view.
I'm trying to use box-sizing, but it exceeds the height of the window view because it's extending to the max height of the window. Sorry for my poor explanation. Any advice if would be excellent. Thank you!
For green div set height: calc(100%-{red-div-height}); and for the light blue div set height: calc(100%-{dark-blue-div-height}-{red-div-height});
This is kinda the legacy version of C-Link's answer.
jsFiddle and fullscreen
This has the limitation of any content falling below one page-full falling outside of its container (you can see if you scroll down in the fiddle, but not on the fullscreen).
Make sure our page stretches to its full height.
body, html { height: 100%; width: 100%; margin: 0; padding: 0;}
Set a static-height header.
header {
height: 101px;
background: red;
}
Create a box for everything under the header. You were on the right track with the box-sizing. We can add padding to it, in the same amount as our header. Then percentages inside it work nicely.
.content {
position: absolute;
box-sizing: border-box;
padding-top: 111px;
padding-bottom: 10px;
top: 0; left: 0;
height: 100%; width: 100%;
}
We float our aside (may or may not be the correct element, depending on contents) and set some styles on it.
aside {
float: right;
width: 20%;
height: 100%;
padding-bottom: 111px;
box-sizing: border-box;
}
.top {
height: 100px;
background: blue;
}
.bottom {
margin-top: 10px;
height: 100%;
background: skyblue;
}
This is our main, large, content area, which we float to the left. The width could be specified exactly if we wanted exact padding at the cost of additional HTML.
[role="main"] {
width: 78%;
background: limegreen;
height: 100%;
float: left;
box-sizing: border-box;
}
You can also set overflow-y: auto on our main or aside elements, to have them scroll when they run out of space. There should also be mobile styles for this page that remove the floating, absolute positioning, absolute styling, and widths should be nearly 100%.
you can always set the green box height to the window height minus the red box height.
accordingly the light box height to the window height minus the (red box height + the dark blue box height)
Edit 1: I haven't mentioned that has to be done with javascript.
Edit 2: Consider any paddings and margins too.
Could you not just give the divs a max or min height depending on their purpose?
I use a main container or wrapper div that the others would be contained in, that div is then my effective page or screen area.
<div id="wrapper">
<div id="content">
<div id="sidebar">
</div>
</div>
</div>
#wrapper{
min-height: Whatever value you want here;
max-height: Whatever value you want here;
}
It might be a good idea to set up your page using main container divs, hot only for the content but for the header and footer as well.
As an example, I have a main wrapper that is the whole page, within that is the header div, the content div, the nav div and the footer div. These are the main ones. Everything else can then be contained within them.
So, you can set the layout out using percentages so you have a fluid design that'll react to each browser size. The other elements will then 'fit' inside the main divs and be constrained to them. You may need to look into positioning etc but this is certainly the direction you should head towards.
<div id="wrapper">
<div id="header">Header Here including any divs to be contained within this space</div>
<div id="content">All content etc here</div>
<div id="nav">This is your sidebar</div>
<div id="footer">Footer, as per header</div>
</div>
Then use the css to re deisgn the above layout focusing only on those main divs. Use % instead of px to maintain fluidity.
#wrapper{
width: 100%;
height: 100%
}
#header{
width: 100%;
height: 20%
}
#content{
width: 70%;
height: 60%;
float:left;
}
#nav{
width: 30%;
height: 60%;
float:left;
}
#footer{
width: 100%;
height: 20%
}
A pretty common trick is to give the green (and light blue) box absolute positioning, a padding AND a negative margin. Because 100% width is relative to the containing box (could be a parent div, or just the window itself) this is not suitable. When the header was a relative height, say 10%, it would've been easy. The padding makes sure the content will not disappear behind the header, the negative margin puts the box back in place. Don't forget the z-index (otherwise the content (green part) will overlap the header).
The css looks like this:
.header { position: absolute; width: 100%; height: 100px; background: red; z-index: 1; }
.content { position: absolute; width: 100%; height: 100%; padding: 100px 0 0; margin-top: -100px; background: green; z-index: 0; }
The fiddle looks like this: http://jsfiddle.net/2L7VU/
<div id="main" style="overflow:hidden;height:80%;>
<div id="header">
</div>
<div id="content" style="overflow:hidden;">
</div>
</div>
I have two divs in the main div, and I want the content div to fill up the remainder of the main div, but if stuff fills up the content div past its filled up height, I don't want the content div to grow any taller.
I've seen some other stackoverflow questions like this, but none of the answers have worked for me. Tried: Make DIV fill remainder of page vertically?, Get CSS Div to fill available height, and How to make a DIV fill the remaining vertical space of the browser window?
I think the main difference is that I require the content div to fill up, but ALSO not overflow. Is this possible with only css?
Update:
I kept trying out different pieces of code and this is what I want: http://jsfiddle.net/zXnnp/. But for some reason I couldn't replicate it on my localhost. And then I found out it was because I was using http://jamesflorentino.github.io/nanoScrollerJS/ And for some reason class="nano" on the content div messed things up. Still investigating on what's wrong.
Update2:
class="nano" has height:100%; so I just overrode it with height:auto; and things are now fine. Thanks for all the help!
You could do something like this:
/* stretch the body to full height */
body, html {
height: 100%;
}
/* stretching the containers */
#header {
height: 50px; /* just a random number i chose, not sure what you wanted here */
}
#content {
height: 100%;
margin-bottom: -50px; /* same as the header height, but negative */
}
You can see the code in action here: http://jsfiddle.net/mRK24/
The magic lies in first stretching you body to viewport height. The #main will then become 80% of the viewport height. Next you give the header some fixed height, and the content you set to a height of 100%, with a negative margin bottom that is the same as the height of the header.
Note that some of your content will be lost, due to the overflow:hidden;. Strange, cause you can not know how much since you don't know the height of your user's viewport. Perhaps you should consider setting the overflow of the content to scroll, cause I can't imagine you would want part of you content to be invisible.
Have you tried using the CSS property max-height? This is from CSS 2 and should not have any compatability issues.
http://www.w3schools.com/cssref/pr_dim_max-height.asp
If you post some editable code then we could play with it and help you find some ways of making it work.
I'm not exactly sure what you're after, but maybe this will get you close:
http://jsfiddle.net/isherwood/TCVvn/1
#main {
height: 80%;
width: 80%;
position: absolute;
}
#header {
height: 50px;
position: relative;
top: 0;
}
#content {
position: absolute;
top: 70px;
right: 5px;
left: 5px;
bottom: 5px;
overflow: auto;
}
<div id="main">
<div id="header">Header</div>
<div id="content">Content</div>
</div>
Keep overflow:hidden on <div id="#main"> and let the content div take as much height as it wants with no overflow restrictions. #main will cut off #content if it gets too tall to fit inside of #main.
I am looking to create a layout for my site where a sidebar is fixed at the right side of the viewport with a 30% width (content is to the left of it) until the browser window reaches a certain width, at which point I want the content and sidebar to be centred and no longer grow with the browser window (since it becomes hard to read at extremely large widths). Here is an idea of the html being used:
<body>
<div id=sidebar>sidebar content</div>
<div id=content>articles, images, etc</div>
And here is some of the basic HTML being used to format it:
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;
}
#content {
width: 70%;
margin-right: 30%;
max-width: 49em;
}
At this point, when the content gets wider than 49em, it sticks to the right side of the page creating an ever-increasing gap between it and the fixed sidebar. What I would like is to have it reach a max width of 49em, have the sidebar reach 21em (so they are still 70:30) and remain fixed, but have that whole 70em worth of width centered in the viewport.
I also want the background colour of the sidebar to span the entire way from the edge of the content to the right-hand side of the screen (i.e. a containing div that centers both the sidebar and content with a max width of 70em doesn't work since the background of the sidebar would only go to the edge of the containing div instead of the viewport). That one isn't as important because it might look fine to put some sort of textured background on the body element to make it look like as though the page is "sitting" on some textured surface (not ideal, but fine). I just haven't been able to center the sidebar and content while maintaining the sidebar's fixed positioning.
Thanks!
Update: here's a very rough schematic of what I am looking for:
|A|B|C|D|
B is the content area with a max width of 49em. C is the sidebar with max width of 21em AND it has to have fixed positioning. A and D would be the margins (each half of the difference between the viewport width and 70em). Background of D must be the same colour (gray) as the sidebar. Background of A must be white.
This solution meets most of your requirements, but you need to provide the width of the content+sidebar (in this case, I put 70em)
HTML:
<div id="container">
<div id="content">articles, images, etc</div>
<div id="sidebar">sidebar content</div>
</div>
CSS:
#sidebar {
width: 29%; background-color: gray; border: 1px gold solid;
float: left;
position: fixed; right: 0; top: 0;
}
#content {
width: 69%; max-width: 49em; border: 1px silver solid;
float: left;
}
#container {
max-width: 70em;
margin: 0px auto;
}
jsFiddle here. (You can test by just dragging the middle frame left and right)
Something like this:
<body>
<div id="wrapper">
<div id="sidebar">sidebar content</div>
<div id="content">articles, images, etc</div>
</div>
</body>
With CSS that is similar to this:
body { background:url(imageForSidebar.png) right top repeat-y; }
#wrapper {
max-width:1000px;
margin:0 auto;
background:#FFF url(imageForSidebar.png) -66% top repeat-y;
position:relative;
}
#sidebar {
width:30%;
float:right;
position: fixed;
}
#content { margin-right:30%; }
The background image on the body would take care of it going all the way to the edge of the screen. You would use a background image that was large enough to do this, but small enough so that it gets covered by the #wrapper background. The background image on the wrapper works in a similar way, but in this case it is just making sure that the sidebar image always extends to the bottom of the content.
You can add media queries into your css
//your normal css
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;}
//media query (you can add max and min width of the sceen or one of both)
#media screen and (min-width:500px) {
#sidebar{
//css you want to apply when when width is changed
}
}