I'm looking to force the content of a box that is dynamically centered vertically to flow horizontally instead of the usual vertical flow that will require scrolling up or down.
#outerbox {
height: 100%;
overflow: hidden;
position: relative;
}
/* Creating 2% margin on left & right then 3% on top and bottom */
#innerbox {
height: 94%;
margin: 0 2%;
margin-top: -47%;
position: absolute;
top: 50%;
}
#content {
height: 100%;
min-height: 100%;
}
<div id="outerbox">
<div id="innerbox">
<div id="content">
Content goes here...
</div>
</div>
</div>
The problem is when I resize the browser window, instead of flowing right and have horizontal scrollbars, the content moves down beyond the centered box. Advice on what I'm doing wrong and solution?
Here is an example of creating a horizontally scrolling area with elements inside:
http://jsfiddle.net/6PupD/
The trick is the scrollable container has a width smaller than the object container. You will need to set the width of the object container large enough to hold all the elements.
Hope this helps.
Bob
Related
I have a WP blog with fluid layout, the main content is in a centered div, about 1000px wide.
Now I want to put an ad banner area on each side, and I want to use fixed on the position so that these ad:s stay when user scrolls down the blog.
I have seen blogs with similar ad's but they don't have the fluid layout but instead can use the position: fixed and width:Ypx left:-Ypx which make their ad fixed nicely on the left side always.
It seems that this is not possible though with a fluid layout?
This is the effect I am trying to mimic, see how both sides don't scroll down...
http://radarmagazine.se WRONG SITE
--- update ---------
I put the wrong sample site.. this is the one with fixed positions:
THIS IS THE SAMPLE SITE:
http://freshnet.com
This is possible without JS. Here's my approach.
Basically, you'd want to setup your containing div, then clone it and set it within a div dedicated to position: fixed; that way the cloned container within the fixed div will share the same styles as your actual containing div and scale accordingly.
<div class="ads"> <!-- Dedicated position: fixed; -->
<div class="wrap"> <!-- Cloned container for positioning of Ads -->
<img src="http://placehold.it/100x750&text=Ad1" />
<img src="http://placehold.it/100x750&text=Ad2" />
</div>
</div>
<div class="wrap"> <!-- Main container with a z-index of 1 -->
<img class="main" src="http://placehold.it/960x300" />
</div>
Once that's in place, you can position your "ads" accordingly within the fixed div, and position them outside of the responsive / fixed container so they adhere to it - giving the illusion that they're adhering to your actual wrapper. And after your max-width is reached the fixed ads will be pushed out of the viewport.
http://jsfiddle.net/m0v3vqcp/ - Fiddle
Full Screen /
With Their Ads
It's possible using some JavaScript, fetching the width of the content on the window.resize event and then updating your Ads position on the x-axis based on that value. I made a JSFiddle to illustrate how this could be achieved.
http://jsfiddle.net/r86r6j1f/
You can use padding on the body to make room for the banners, a quick example:
http://jsfiddle.net/dpcd3c1b/
I don't believe you need Javascript for it. You should be able to do it with a couple of relative positioned floats and positioned fixed.
http://jsfiddle.net/9ov32nkd/1/
body, html {
margin: 0;
padding: 0;
}
#wrapper {
min-width: 960px;
position: relative;
margin: 0 auto;
}
#inner {
position: absolute;
width: 960px;
left: 50%;
margin-left: -480px;
}
.content {
width: 720px;
padding: 20px;
background-color: #CCC;
margin: 0 auto;
float: left;
}
.banner {
width: 100px;
height: 100px;
position: relative;
}
.banner1 {
float: left;
}
.banner1 .inner,
.banner2 .inner {
background-color: #EFEFEF;
height: 300px;
width: 100px;
position: fixed;
top: 0;
}
.banner2 {
float: right;
}
I'm struggling with this problem for over an hour now and I just can't get it right.
Fiddle to show the problem
<div class="main">
<div class="header">This is the header</div>
<div class="content">
<div class="top-container">This is the top content container</div>
<div class="bottom-container">
<div class="scroll-container">
This is the container that scrolls
...
</div>
</div>
</div>
</div>
The page is separated into 2 sections. A header and a content div. The content is separatend again into 2 sections. The top and bottom container. I want to make the bottom container scrollable when the content is too large to show on the screen.
This means that the bottom container scrolls under the top container. The header container and top container in the content container should not move. The scrollbar should only be in the bottom-container and not on the whole page.
How can I get this done?
[EDIT]
To make it more clear. The height of the content/bottom container div is unknown, in % and px.
I'm already a bit further: updated Fiddle
Apply 50% for the top and bottom container.
.top-container {
position: relative;
background-color: blue;
height:50%;
}
.bottom-container {
background-color: grey;
position:relative;
overflow: auto;
height:50%;
}
DEMO
Fiddle answer
I made the bottom container fill the remaining space with
position:relative;
display:table-row;
height: 100%;
Then the boundaries of the scroll container are set with
position: absolute;
top: 50px; /* Set the top because the top container is within the boundaries */
bottom: 0;
left: 0;
right: 0;
overflow-y: auto; /* only y-scroll when neccesary */
overflow-x: hidden;
I'm still not really happy with this fix as i need to set the top to the height of the top container. If someone has suggestions to fix this, please let me know!
[EDIT]
Fiddle update
Fixed my issue with a wrapper around the scroll-container. The bottom-container now sets the boundaries for all underlying elements, and the scroll-container fills the space to scroll.
.bottom-container {
position: absolute;
top: 0px;
width: 100%;
bottom: 0px;
}
.scroll-container-wrap {
position:relative;
display:table-row;
height: 100%;
}
<div class="bottom-container" style="height:50%; overflow:auto;">
//use overflow= auto to make it scroll
I think this will help you.
Just use overflow in every div you want to have a scroll tab
I have a div with dynamic text content. The amount of text varies between one word and five or ten words (with large font). Right now, it's absolutely positioned some amount from the bottom and the right of its relatively positioned parent.
However, since the content is dynamic, it looks awkward when sometimes there is more text and the text goes further into the main area of the parent. This is because right now, the reference point of the div is its bottom right corner. Is it possible to have it positioned with the center as the reference point, as depicted above?
The parent container is just styled as normal, with position: relative; and 100% width and height
CSS for the child container is also fairly standard:
position: absolute;
bottom: 33%;
right: 33;
I've tried playing with width, max-width, and min-width, but the result is still not desirable
How about this? Compare these two fiddles using the CSS below fiddle1 & fiddle2
HTML
<div id="parent">
<div id="anchor">
<div id="child">
<h1>Some text</h1>
</div>
</div>
</div>
CSS
#parent {
position: relative;
width: 100%;
height: 100%;
}
#anchor {
position: absolute;
right: 33%;
bottom: 33%;
}
#child {
padding: 10px;
margin-right: -50%;
float: right;
}
I am working on new layout of my site & I come across GIZMODO site, I found that the site can make use of page scroll bar to scroll part of the contents in the site. How can they make it ? I studied their CSS via Firebug, but I am quite confused.
Here is my testing page 1 : http://raptor.hk/dev/theme/dummy.html (this page can center the contents, but cannot scroll as I want)
Here is my testing page 2 : http://raptor.hk/dev/theme/dummy2.html (this page can scroll as I want, but cannot center)
I just want to make the page with left side content scrolling with page scroll bar, but right side content stays in the original position, plus the whole site should align center, i.e. combining my testing page 1 & 2. Can anyone give me some lights?
Though your Gizmodo example uses additional scripts for handling of (the vertical scroll bar of) the sidebar (which even doesn't work in all browsers), the effect is perfectly possible with pure CSS and it even is not as difficult as it may seem at first sight.
So you want:
A horizontally centered layout, possibly widened or narrowed for different browser window sizes,
The main content at the left which is vertically scrollable by the browser's main scroll bar,
A sidebar at the right which sticks to the top of the browser window, scrollable separately from the main content, and only showing its scroll bar when the mouse hovers over. When scrolled to the end of the sidebar, the window's scroll bar takes over.
See this demonstration fiddle which does all that.
The style sheet:
html, body, * {
padding: 0;
margin: 0;
}
.wrapper {
min-width: 500px;
max-width: 700px;
margin: 0 auto;
}
#content {
margin-right: 260px; /* = sidebar width + some white space */
}
#overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
#overlay .wrapper {
height: 100%;
}
#sidebar {
width: 250px;
float: right;
max-height: 100%;
}
#sidebar:hover {
overflow-y: auto;
}
#sidebar>* {
max-width: 225px; /* leave some space for vertical scrollbar */
}
And the markup:
<div class="wrapper">
<div id="content">
</div>
</div>
<div id="overlay">
<div class="wrapper">
<div id="sidebar">
</div>
</div>
</div>
Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.
I assumed a fluid width for the main content and a static width for the sidebar, but both can perfectly be fluid, as you like. If you want a static width, then see this demo fiddle which makes the markup more simple.
Update
If I understand your comment correctly, then you want to prevent scrolling of the main content when the mouse is over the sidebar. For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.
I think this new demo fiddle does what you want:
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
I misunderstood your question. I thought you wanted the main scrollbar to also scroll stuff in another div. Well, here you go:
$(function(){
$(document).scroll(function(){
$('#my_div').stop().animate({
scrollTop : $(this).scrollTop()
});
});
});
Demo: http://jsfiddle.net/AlienWebguy/c3eAa/
You can do this with position:fixed. The relevant part from GIZMODO's stylesheet:
#rightcontainer {
position: fixed;
margin-bottom: 10px;
width: 300px;
height: 100%;
top: 0;
}
This technique is seen on lots of websites today. What they do is give position: fixed to the div on the right side of the screen, so it is not affected by the page scroll.
CSS:
body {
position: relative;
}
#leftSide {
width: 600px;
...rules ...
}
#rightSide {
position: fixed;
left: 610px;
}
HTML:
<body>
<div id="leftSide">
affected by scrolling
</div>
<div id="rightSide">
Not affected by scrolling
</div>
</body>
I assume you are looking for something like this.
http://jsfiddle.net/RnWdh/
Please notice that you can alter the width of #main_content as you wish, as long as it doesn't go "behind" your fixed menu as your text will disappear.
The trick to get the fixed menu to the right in your centered container is using left: 50% and margin-left to adjust it correctly.
For example. You have a container-width of 960px, and fixed menu width of 300px, with left: 50%, there will be a white space of (960/2 - 300 = 180) to the right of the fixed menu. Then just adjust it with margin-left: 180px;
One way to "center" the page (i.e. content + right panel) is to adjust the margins while making the right panel fixed position. So, if you have a div#content and a div#rightPanel, the css may look something like:
#content {
margin-left: 15%; /* left page margin */
margin-right: 25%; /* right page margin + rightPanel's width */
}
#rightPanel {
position: fixed;
top: 0;
right: 15%; /* right page margin */
width: 10%;
}
Just make sure that the left margin of #content is the same as the right margin of #rightPanel.
Here's an example: http://jsfiddle.net/william/ZruS6/1/.
I'm designing a website which has fixed elements on the outer edges of a fixed-width layout. A div in the center is reserved for the content.
When the user scrolls, I want all of the content (besides said fixed outer navigation elements) to stay within the borders of that center element.
Here's a quick mockup of what I mean:
I could very easily set the overflow property of the center element to auto, and have everything remain inside. However, it's very important that a scroll bar not be present on the edge of that element.
Basically, I'm wondering how to either:
Restrict content to that area
(perhaps I could change the size and
positioning of the body element -- is
that allowed? -- and then position
the fixed elements outside of the
body.
Hide the scroll bar that appears
inside the div when using
overflow:auto
Any help would be greatly appreciated!
If possible, you should break your fixed position elements up into 4 separate sections (top, left, right and bottom). Then just make sure you pad you centre content area by their respective widths and heights so the content doesn't get overlapped:
HTML
<!-- 4 fixed position elements that will overlap your content -->
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="content">
<!-- Your content -->
</div>
CSS
html, body {
height: 100%;
}
#top, #left, #right, #bottom {
position: fixed;
left: 0;
top: 0;
z-index: 2;
background: red;
}
#top, #bottom {
width: 100%;
height: 20px;
}
#bottom {
top: auto;
bottom: 0;
}
#left, #right {
height: 100%;
width: 20px;
}
#right {
left: auto;
right: 0;
}
#content {
position: relative;
z-index: 1;
padding: 25px; /* prevent content from being overlapped */
}
You can see it in action here.
Also note the position: relative on the content area. This is so z-index works correctly and the content is displayed below the fixed sections.
If you care about IE6/7 support, you'll need to add a CSS expression fix to get fixed position working properly in those awesome browsers.