I would like to has a scrollable div but scrollbar should be on the right side of browser as default (but not on the right side of div). I've seen that on facebook (ceter div - contentArea is scrolled by right side browser scrollbar).
The way Facebook does it is by having all the content that doesn't scroll have a position of fixed. This way the native browser scrollbar will appear to scroll the center area only, while it's actually the rest of the page that is fixed in position.
A very simple example of this:
http://jsfiddle.net/tcaVN/
Now imagine the above, but with all non-scrollable items setup like the #header.
EDIT
Here is a slightly more complex example, with three columns:
http://jsfiddle.net/tcaVN/1/
Actually, the div your are talking about is not scrollable, the other div elements are fixed
That gives you the impression the scrollbar is outside the div, while you are actually scrolling the whole page, the left and right div elements are fixed. i.e: by using the style position: fixed;
I hope this helps a lot... see what you can do from here, i tried to comment on the code as much as possible...
<html>
<head>
<title>Example</title>
<style>
#head{
position:fixed; /* this will make the div stay in the same place */
width:100%; /* this will size the dive to the width of the window */
height: 42px; /* this will make the height of the div 42px */
top:0px; /* make sure the div is at the very top */
left:0px; /* make sure the div is as far left as possible */
background: #009933; /* this will make the background of the div into a green color */
}#head_slack{ /* we make this one the same size so no text is ever covered */
width:100%; /* make sure the width of the slack is 100% */
height: 42px; /* make sure the hight of the slack is the same as the head fixed */
}body{
margin: 0px; /* takes out the default white border around the page */
}#leftFixed{
width 150px; /* set the width the same as the with of the table data cell containing the div */
position: fixed; /* make sure it stays in place */
left: 0px; /* make sure the div is at the left */
top: 45px; /* make sure the div is below the head div */
}#rightFixed{
width 200px; /* set the width the same as the with of the table data cell containing the div */
position: fixed; /* make sure it stays in place */
right: 0px; /* make sure the div is at the right */
top: 45px; /* make sure the div is below the head div */
}
</style>
</head>
<body>
<div id="head">This is the fixed header</div>
<div id="head_slack">this is the header that takes the slack</div>
<table width="100%">
<tr>
<td width="150px" valign="top">
<div id="leftFixed">This is fixed content on the left</div>
</td>
<td>
This is the scrollable content
</td>
<td width="200px" valign="top">
<div id="rightFixed">this is fixed content on the right</div>
</td>
</tr>
</table>
</body>
</html>
A simple way I have found is:
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scoll;
}
For some reason this displays the scroll bar outside the div
Related
Is it possible to specify the max-height of a DIV with position:absolute such that if it would reach past the viewport downwards, a scrollbar appears?
I.e., to user "overflow-y: scroll;" without having to specify the height statically? (Such that it works even if you resize the window.)
Here's what I mean: https://jsfiddle.net/x5efqtv2/2/
(And also see below)
P.S.: I could solve it with JavaScript, I'm interested in pure CSS solutions, if there's any.
Thanks!
div {
border: 1px solid red; /* just to see where the DIVs exactly are */
margin: 5px; /* ditto */
}
.float-over-content {
position: absolute;
max-height: 100px;
overflow-y: scroll; /* works with static max-height only? */
z-index: 10;
background-color: white;
}
<body>
<div id="upper">This one is above the position:absolute one</div>
<div style="position: relative">
<!-- this is needed for position:absolute below to put the div under "upper" -- or so I think -->
<div class="float-over-content">
<!-- I WANT TO DEFINE THE MAX-HEIGHT OF THIS DIV SUCH THAT IF IT REACHES THE BOTTOM OF THE VIEWPORT, A SCROLL BAR SHOULD APPEAR: (AS OPPOSED TO NOW, WHEN ITS HEIGHT REACHES 100px) -->
Make this reach exactly to the bottom<br/>
<!-- X times... -->
Make this reach exactly to the bottom<br/>
</div>
</div>
<div id="lower">
This one is "behind" the position:absolute one (it partially covers this one)
</div>
</body>
What Temani said in the comment. Use the calc function and the view height (vh) of the viewport. Check out the code snippet below. I added a button that will add more lines of text to the element and you can see it expand to fit the viewport with the overflow becoming scroll content.
document.getElementById("add-a-line").addEventListener("click", function(){
document.getElementById("float-over-content").insertAdjacentHTML('afterbegin','Make this reach exactly to the bottom<br/>' );
});
div {
border: 1px solid red; /* just to see where the DIVs exactly are */
margin: 5px; /* ditto */
}
#float-over-content {
position: absolute;
max-height: calc(100vh - 47.4px);
overflow-y: scroll; /* works with static max-height only? */
z-index: 10;
background-color: white;
}
#add-a-line{
position:fixed;
right: 0;
width: 200px;
height: 20px;
background-color: #0f0;
}
<body>
<div id="upper">This one is above the position:absolute one</div>
<div style="position: relative">
<!-- this is needed for position:absolute below to put the div under "upper" -- or so I think -->
<div id="float-over-content">
<!-- I WANT TO DEFINE THE MAX-HEIGHT OF THIS DIV SUCH THAT IF IT REACHES THE BOTTOM OF THE VIEWPORT, A SCROLL BAR SHOULD APPEAR: (AS OPPOSED TO NOW, WHEN ITS HEIGHT REACHES 100px) -->
Make this reach exactly to the bottom<br/>
<!-- X times... -->
Make this reach exactly to the bottom<br/>
</div>
</div>
<div id="lower">
This one is "behind" the position:absolute one (it partially covers this one)
</div>
<div id="add-a-line">
Click to add a line
</div>
</body>
I am wondering if it is possible to keep an img inside a div always centered regardless of the browser size? By being centered I mean that the left/right sides of the image gets cropped to ensure the image stays centered without modifying the height. Also, is it possible to prevent the horizontal scroll bar from appearing when the browser width is less then the image width?
I'm sure this is really easy to do if my image is located in a background-url tag in CSS, but because this image is being housed inside the SlidesJS carousel the image has to be from an img tag.
At the moment, I have used margin:0 auto; to keep the image centered as long as the browser width is larger then the image. Once the browser width shrinks, the image does not resize with the shrinking browser size. I also have yet to figure out how to remove the horizontal scroll bar when the browser width is too small.
This is what I'm trying to achieve: http://imgur.com/Nxh5n
This is an example of what the page layout is suppose to look like: http://imgur.com/r9tYx
Example of my code: http://jsfiddle.net/9tRZG/
HTML:
<div id="wrapper">
<div id="slides">
<div class="slides_container">
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 200px;
margin: 0 auto;
}
Try this: http://jsfiddle.net/9tRZG/1/
#wrapper {
max-width: 200px; /* max-width doesn't behave correctly in legacy IE */
margin: 0 auto;
}
#wrapper img{
width:100%; /* the image will now scale down as its parent gets smaller */
}
To have the edges cropped, you can do this: http://jsfiddle.net/9tRZG/2/
#wrapper {
max-width: 600px; /* so this will scale down when the screen resizes */
margin: 0 auto;
overflow:hidden; /* so that the children are cropped */
border:solid 1px #000; /* you can remove this, I'm only using it to demonstrate the bounding box */
}
#wrapper .slides_container{
width:600px; /* static width here */
position:relative; /* so we can position it relative to its parent */
left:50%; /* centering the box */
margin-left:-300px; /* centering the box */
}
#wrapper img{
display:block; /* this allows us to use the centering margin trick */
margin: 2px auto; /* the top/bottom margin isn't necessary here, but the left/right is */
}
Jeff Hines linked putting image always in center page where ShankarSangoli explained how to achieve this.
img.centered {
position:fixed;
left: 50%;
top: 50%;
/*
if, for instance, the image is 64x64 pixels,
then "move" it half its width/height to the
top/left by using negative margins
*/
margin-left: -32px;
margin-top: -32px;
}
I am not sure about the align center looks proper to me as for the scroll bar.
You can use the following:
overflow-x: hidden;
I have a page with a vertical navbar on the left side of the page, and a "content" area to the right of the navbar. I want the width of the "content" area to fill the remainder of the screen, and the height to match the navbar height.
Here is what I have so far: jsFiddle
Preferably I am looking for a pure CSS solution to this problem.
Typically, the Faux Columns technique is used to fill in the space that isn't filled with content. You'll need to replace your CSS gradients with images, and it's much easier to set up with fixed dimensions (but still possible with fluid dimensions).
Essentially, you'd need to structure your HTML elements like this:
<div id="header"></div>
<div id="wrapper">
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
Your CSS would do the work for you as far as stretching the content goes:
/* The top part of the rounded container */
#header {
background: url(images/bg_top.gif) 100% 100% no-repeat; /* sit on top */
}
/* The background for your content */
#wrapper {
background: url(images/bg_tile.gif) 100% 0 repeat-y; /* repeat on the right */
}
/* The bottom of your content */
#footer {
background: url(images/bg_bottom.gif) 100% 0 no-repeat; /* sit on the bottom */
}
You'll definitely need to play around with some negative margins to get things to sit perfectly.
Apply a min height to your content area:
#content {
position: absolute;
margin-left: 200px;
width: 100%;
min-height:328px;
}
Check out the updated fiddle: http://jsfiddle.net/hsGN6/6/
It's crude, but it works.
I want to recreate the following header:
The problem is that the content is centered in the white section. Grey is the background of body and the header is 100% of screen.
What I have now is:
CSS
.top_left {
background:#3c4d74;
}
.top_right {
background:#2f3a5a;
}
.top_center {
background:#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg) no-repeat right top;
height:140px;
}
#page,
.top_center {
max-width:1000px;
margin:0 auto;
}
#page {
background:#FFF;
}
body {
background:#DEDEDE;
}
HTML
<body>
<div id="top-header">
<div class="top_left"></div>
<div class="top_center">
LOGO
</div>
<div class="top_right"></div>
</div>
<div id="page" class="hfeed">
MY content bla bla bla
</div>
</body>
Which you can see working on http://jsfiddle.net/gTnxX/ (I put max width 600px instead of 1000px so you can see it on fiddle).
How can I make the left side soft blue and right side hard blue at any resolution?
To do this you need to be very aware of how positioning works.
The #header-bg is positioned so it falls below #wrapper. It is 100% width, 140px high with 2 divs which both take up 50% of that space and they both get a different colour for left/right.
The #wrapper is relatively positioned to make z-index work, putting it above the #header-bg. Width is set at 600px, and margin: 0 auto; centers it.
The #header is a simple div which has a height set to it and the background it requires.
Content follows the #header in normal flow.
Here is a jsfiddle with the requested behaviour.
http://jsfiddle.net/sg3s/cRZxN/
This even degrades nicely and lets you scroll horizontally if the content is larger than the screen (something I noticed from the original jsfiddle).
Edit:
To make it IE7 compatible I made some changes to fix 2 bugs. I had to add left: 0; and top: 0; explicitly to #header-bg to fix a positioning bug. Made the divs inside #header-bg 49% instead of 50% or else IE7 would not resize them properly and make the right div bump down. To compensate for the small gap that created I made the right div float: right;.
I am writing a website in Html using CSS; in my website I have a text logo that I want to place in the top center size of the site, I am using CSS as indicated below
background-color:#4d5152;
position:fixed;
width:970px;
top: 0%;
padding-right:200px;
padding-left:200px;
My question is, how can I position my logo in the upper center and have the left and right size of the logo the same color of the logo without righting the values to the padding left and right; so it will be generic for all computer monitor size and browsers
hope I am clear enough
Thank for the help
Typically, I would write something like this:
HTML
<html>
<body>
<div id="wrapper">
<h1 id="logo">My Company</h1>
</div>
</body>
</html>
CSS
#wrapper {
width:960px; /* Width of the containing 'wrapper' or content area */
margin:0 auto; /* This will center the wrapper. 0px margin on the top and bottom, and 'auto' on the left and right (let the browser decide the amount of margin). */
}
h1#logo {
text-align:center; /* If you don't define a width the h1 will be 100% as its parent (#wrapper). This centers the text. */
}
Here's an example showing this: http://jsfiddle.net/V5Cff/1/embedded/result/