I have an exotic design that needs the following. The left side must scroll, while the right side + top head must stay put (fixed). See attached image.
I can accomplish this by position: fixed on the top and right side. The top & right hand side stays put while the left scrolls.... BUT then the PROBLEM is that there is NO scroll bar anymore if anybody zooms in and you also cannot scroll left to right to see whole page
How would one attack such a layout?
Thank You.
Could not post code before - let me try again:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exotic</title>
<style type="text/css">
#top {
background-color: #FF0;
width: 1800px;
height: 50px;
position: fixed;
left: 0px;
top: 0px;
}
#sideLeft {
float: left;
width: 950px;
background-color: #9C0;
clear: left;
}
#sidebarLeft {
background-color: #0CC;
height: 800px;
width: 300px;
float: left;
}
.list {
float: left;
width: 600px;
margin-top: 100px;
}
#ordoner {
background-color: #F90;
float: left;
width: 640px;
height: 800px;
position: fixed;
top: 50px;
left: 950px;
}
#sidebarRight {
width: 210px;
height: 800px;
position: fixed;
top: 50px;
left: 1590px;
background-color: #0CF;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="sideLeft">
<div id="sidebarLeft"><!--end #sidebarLeft--></div>
<div class="list"><!--end .lisist--></div>
<!--end #sideLeft--></div>
<div id="ordoner"><!--end #ordoner--></div>
<div id="sidebarRight"><!--end #sidebarRight--></div>
<div id="footer"></div>
</body>
</html>
Clarification:
My css reflects 2 things in the right hand side but the point is that the right and the top should be static while the left scrolls... AND they should be horizontally scrollable IF a user zooms :)
Also, I've tried wrapping things in a container div, but that has its own problems - it scrolls but never reaches the right hand side if the window is not maximized.
Thanks again.
To clarify: As an example to get my point across... please resize the stackoverflow window to half your horizontal screen size... Now see how you can scroll left to right? If you zoom in, you can scroll left to right also to see the whole page. Well, in my layout, which works in full screen browser mode... once I resize that scroll bar at the bottom does not appear at all leaving the user with no ability to scroll horizontally. See picture below
Fiddle
http://jsfiddle.net/moby7000/tWb3e/
Its not very hard to create a layout like this.
I created one for you, see that Working Fiddle
HTML:
<div class="Container">
<div class="Header">
<p>The Header div height is not fixed (But he can be if you want it to)</p>
<p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
</div>
<div class="Content">
<div class="Wrapper">
<div class="RightContent">
<p>You can fix the width of this content.</p>
<p>if you wont, his width will stretch just as it needs to.</p>
</div>
<div class="LeftContent">
<p>this will scroll</p>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.Header
{
margin-bottom: 10px;
background-color: #6ea364;
}
.Content
{
position: relative;
z-index: 1;
}
.Content:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Wrapper > div
{
height: 100%;
}
.LeftContent
{
background-color: purple;
overflow: auto;
}
.RightContent
{
background-color: orange;
float: right;
margin-left: 10px;
}
Bonus:
with a little change in the CSS, you can create a beautiful scrolling.
See that Fiddle
Edit:
If you want to set a width value to the left side, that is actually bigger then the body size (and to have an horizontal scroll), do it that way.
<div class="LeftContent">
<div style="width:1200px;"> <-- better to aplly the width from the CSS
..<The content>..
</div>
</div>
you need to add overflow:auto; to the area you want to scroll.
Have you tried
overflow-y: scroll;
in body?
Related
I'm trying to center a div at the bottom of the page and having no luck. I've scoured the web, but keep turning up nothing when attempting to apply their solutions.
Any chance anyone out there might have a solution? See code below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script></script>
<style type="text/css">
body {
background-color: aqua;
height:100%;
min-height:100%;
}
.centerDiv {
display: table;
width:90%;
margin:0 auto;
height:100%;
min-height:100%;
text-align: center;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
</style>
</head>
<body>
<div class="centerDiv">
<div class="box box1" style="background-color:#585858;"> </div>
<div class="box box2" style="background-color:#118C4E;"> </div>
<div class="box box3" style="background-color:#C1E1A6;"> </div>
<div class="box box4" style="background-color:#FF9009;"> </div>
</div>
</body>
</html>
I think you mean, that your div will be at the bottom of page. This would help you:
.centerDiv {
display: block;
width: 100%;
margin: 0 auto;
height: auto;
text-align: center;
position: fixed;
bottom: 0;
}
Setting position to fixed and div will stay at a place anytime (also when you scroll down).
The problem you're having is that the box is technically already at the bottom of the page -- the page expands to fit the content, not the window. If you want the box to always be at the bottom of the window, then you need to use position: fixed, and it will be at the bottom of the window no matter how much you scroll or how short/tall the page is.
See the demo here for the result with the fixed position.
.centerDiv {
width:100%;
text-align: center;
position: fixed;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
}
Now, if you want the box to always be at the bottom of the page, except when the page height is less than the window height (in which case it would be at the bottom of the window), you're going to have trouble. That's a bit tougher to do with CSS. However, it's easy with jQuery, if you don't mind using scripting:
See the demo here for the result using jQuery.
var minheight = $(window).height();
$("body").css("min-height", minheight);
and
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
}
.centerDiv {
width:100%;
text-align: center;
position: absolute;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
div element has an align attribute so it can help:
<div align="center"></div>
I'm having trouble solving this puzzle: I'm using a 2-column layout with a fixed-width right column and a left column which takes out the remaining space. Both heights are variable. So something like this:
<div class="sidebar">sidebar</div>
<div class="main-area">main content</div>
<style>
.sidebar { float: right; width: 250px; }
.main-area { position: relative; overflow: hidden; }
</style>
Ok, so up to here everything is fine. But here comes the tricky bit. I'm using CSS3 to enable a css change when reaching a max-width of 750px. I want the sidebar to break down below and have a 100% width (so it becomes a footer for the main content). But, because in the HTML code the sidebar div is required to be first it always appears above the main area.
Any ideas on how to lay this out?
Thank you very much!
The simple answer to your question is no. You can't make your sidebar move beneath the content in your breakpoint if the sidebar falls before the content area in your HTML. At least... Not without javascript and a bunch of craziness.
That said... Just move your sidebar below your main-content div. Semantically there is no reason for you not to.
<section class="container">
<div class="main-area">main content</div>
<div class="sidebar">sidebar</div>
</section>
Some CSS changes are required to achieve this however. It's not quite as simply done as you had it previously, but not especially difficult either.
.container {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
right: 0;
width: 250px;
}
.main-area {
background: red;
margin-right: 250px;
}
Here is a JSFiddle demonstrating it working.
Feel free to add varying amounts of content to either the main-content area or the sidebar and you'll see that both still have varying heights that don't interfere with each other.
HTML:
<section class="container">
<div class="main-area">main content</div>
<div class="sidebar">sidebar</div>
</section>
CSS:
.container {
position: relative;
max-width: 1024px; /* could be width: x% as well*/
}
.sidebar {
position: absolute;
right: 0; top: 0;
width: 250px;
}
.main-area {
margin-right: 260px; /* sidebar width plus 10px gap */
}
#media only screen and (max-width: 750px) {
.sidebar {
position: static;
width: 100%;
}
.main-area {
width: 100%;
margin-right: 0;
}
}
I think you can realize this with jQuery.
HTML
<div class="main-area"></div>
<div class="sidebar"></div>
CSS
.sidebar{
background-color: #000;
height: 200px;
width: 50%;
}
.main-area{
position: relative;
background-color: #ff0000;
height: 200px;
width: 50%;
}
jQuery
$(function(){
$('.sidebar').css('float', 'right');
$('.main-area').css('float', 'left');
$(window).resize(function(){
if($(this).width() <= 750){
$('.main-area').removeAttr('style');
$('.sidebar').removeAttr('style');
}else{
$('.sidebar').css('float', 'right');
$('.main-area').css('float', 'left');
}
});
});
You can see result here -> jsFiddle
Well, this is my way.
I think I found the answer here: http://jsfiddle.net/salman/TPNpy/
<div id="main-area-wrap">
<div id="main-area">Column 1</div>
</div>
<div id="sidebar">Column 2</div>
<div id="clear"></div>
#main-area-wrap{
float: left;
width: 100%;
}
#main-area {
background-color: cyan;
margin-right: 200px;
}
#sidebar{
background-color: lime;
float: left;
width: 200px;
margin-left: -200px;
}
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.
I've found a method of placing the footer that I like, except for the fact that footer overlaps the content when the page resizes.
Using the structure and formatting I have already, how can I "clear" the footer, so that it drops off when the page resizes (avoiding an overlap of #content)?
I've tried clear: left and that does nothing for this.
Essentially, I want the footer to always be visible, and attached to the lower left of the window, as long as space allows; however, when the window gets smaller, I don't want the footer to overlap my content.
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background-size: cover;
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
min-width: 900px;
overflow: hidden;
}
.main_nav {
margin: 0;
width: 160px;
float: left;
padding-left: 40px;
overflow: hidden;
}
#content {
float: left;
width: 750px;
height: 600px;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
}
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
<ul class="main_nav">
<li></li>
</ul>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
The answer has been already choosen, but i wanted to give an alternative.
The "wrapper" contains "header" and "content", while the "footer" is outside of it. You could, for example, add
z-index:10;
to the wrapper's css and
z-index:1;
to the footer's css.
This one last isn't really needed, but it's for completeness. This way, whenever they get in "touch", the one with higher z-index will remain on foreground (ie, higher level on the z-axis, that is the axis perpendicular to the screen surface) and the other elements will slide behind, according to their own index.
This problem is because of width. You width is different in each case i.e. in content , footer & wrapper as well. I created a jsfiddle
[http://jsfiddle.net/jvaibhav/xncuF/37/]
try this.
I need to design a page with border images on each side. I need the page to fit on 1280x1024 and 1024x768 resolutions. Is it possible to have a fixed size for the center div and crop the border images in the lower resolution ?
1280x1024 : border-200px center-840px border-200px
1024x768 : border-72px center-840px border-72px
I've made two images with 200px X 5px. I've tried to use the float property without success.
So I've made it this way so far, it works in 1280x1024 but not in 1024x768 (it's too wide).
HTML :
<body>
<div id="right"></div>
<div id="left"></div>
<div id="center">
<h1>Title</h1>
<p>Content here</p>
</div>
</body>
CSS :
html {
margin: 0px;
padding: 0;
}
body {
margin: 0px;
padding: 0;
width: 100%;
background-color: white;
overflow: auto; /*to clear the floats*/
}
#right {
clear: both;
position: absolute;
right: 0;
background-image: url('/site_media/images/border-right.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#left {
clear: both;
position: absolute;
left: 0;
background-image: url('/site_media/images/border-left.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#center {
width: 840px;
margin: 0px auto;
padding-left:10px;
padding-right:10px;
}
Thank you!
since the center element if fixed-width, this should be easy. the side border should be placed as 'background' in the body instead of having its own div.
correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.
<style type="text/css">
body { /* can also use your own div */
background:url(path_to_the_single_image) repeat-y top center;
}
#center {
width:840px;
margin:0 auto; /* centered the div */
background:green;
}
</style>
<body>
<div id="center">center content</div>
</body>
thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.
let me know if this is what you looking for.. :)
if I understand correctly - what you're looking for is a bit difficult to achieve without javascript.
You can consider a bit different approach that is: can the sidebars (graphic borders) slide under the center content?
example:
<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</div>
</body>