I have a div element that scrolls vertically; the scrollbar is within the div element itself. I'd like to have the scrollbar outside of the div, similar to how a typical webpage scrollbar is. Scrollbar looks like any other webpage, but when scrolled only scrolls this particular div element.
<div id="outer">
<div id="inner"> //to be scrolled
<!-- content -->
</div>
</div>
Example Fiddle: http://jsfiddle.net/7pgyt/
I'd like the scrollbar to be to the far right, in the red area. The scrollbar scrolls the blue area. Can this be accomplished in just HTML and CSS?
A possible outcome would be as below:
Given the following html structure:
<div id="wrapper">
<div id="top" class="bar"></div>
<div id="outer">
<div id="inner"></div>
</div>
<div id="bottom" class="bar"></div>
</div>
You can use the following styles:
#wrapper {
position:relative;
height:200px;
}
#outer {
background-color: red;
overflow-y:auto;
height: 200px;
}
#inner {
color: white;
font-weight: bold;
margin-left: auto;
margin-right: auto;
background-color: blue;
margin:50px;
position:relative; z-index:1;
}
.bar {
height:50px;
z-index:2;
position:absolute;
background:red;
left:0;
right:20px;
}
#bottom {bottom:0;}
#top {top:0; }
Example
Example with psuedo selectors instead of the bar divs
You can use the below:
Demo Fiddle
HTML
<body>
<div id="outer"></div>
<div id="inner">..content...</div>
</body>
CSS
body {
position:relative;
width:100%;
margin:0;
padding:0;
}
div {
box-sizing:border-box;
}
#outer {
border:50px solid red;
padding: 50px;
position:absolute;
height:200px;
right:17px;
left:0;
}
#inner {
color: white;
font-weight: bold;
height: 200px;
padding:50px;
margin-left: auto;
margin-right: auto;
overflow-y: scroll;
background-color: blue;
}
Related
I have a header with width: 100% and I want to make it automatically adjustable not only to screen width, but to page full width that can be stretched beyond screen width by other elements. I can do it with JS, but I wonder if it is possible to use pure CSS to achieve this.
In the example below the A block is intended to be the same size as the B block, but it is much shorter on small screens (just scroll everything to the right and you can see).
html,body{
position:relative; width:100%;
}
#A{
position:relative; width:100%;
background:lightblue; color:white;
}
#B{
position:relative; width:5000px;
background:darkblue; color:white;
}
<html>
<head></head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
Any ideas?
You can try adding display: grid to the container, in this case body
body {
display: grid;
}
#A {
background: lightblue;
color: white;
}
#B {
position: relative;
width: 5000px;
background: darkblue;
color: white;
}
<html>
<head></head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
If you wrap the two divs (A & B) inside another you can achieve this.
html,body{
position:relative; width:100%;
}
#A{
position:relative; width:100%;
background:lightblue; color:white;
}
#B{
position:relative; width:5000px;
background:darkblue; color:white;
}
.header-wrap { display: inline-block; }
<html>
<head></head>
<body>
<div class="header-wrap">
<div id="A">A</div>
<div id="B">B</div>
</div>
</body>
</html>
html,
body {
position: relative;
width: 100%;
}
#B {
position: absolute;
width: 100%;
top: 100%;
left: 0;
background: lightblue;
color: white;
}
#A {
position: relative;
width: 5000px;
background: darkblue;
color: white;
min-width:100%;
}
<div id="A"><div id="B">B</div>A</div>
Try giving your A div a max-width of 5000px as well as width:100%
#A{
position:relative;
width:100%;
max-width:5000px;
background:lightblue;
color:white;
}
I have a very simple problem, but I can't solve it.
There is a div inside another div. The inner div is positioned absolutely out of the outer div (left: 100%). Moreover, the outer div should scroll vertically. However, I can't find how not to scroll horizontally and how to make the inner div be visible outside the outer div, at the same time.
The code is the following:
HTML:
<div id="out">
<div id="in">
</div>
</div>
CSS:
#out{
height:100px;
width:100px;
background-color: green;
position: relative;
overflow-y: scroll;
overflow-x: visible;
}
#in{
position: absolute;
left: 100%;
height:50px;
width:50px;
background-color: red;
}
Thanks in advance!
.main_outer{
overflow-y:scroll;
border:thin black solid;
overflow-x:hidden;
}
#out{
height:100px;
width:100px;
background-color: green;
position: relative;
}
#in{
position: absolute;
left:100%;
width:70px;
height:auto;
background-color: red;
right:0;
}
<div class="main_outer">
<div id="out">
<div id="in">
Your Inner Contents
Your Inner Contents
Your Inner Contents
</div>
</div>
</div>
Here is JSFiddle
PS: Change your red div size to fit your contents.
Hope this helps.
Fixed the scroll with removing the overflow-x:hidden;
================ Latest Change ======================
See the latest change if this is what required but a little tweak in markup.
#outer-div {
overflow-y: scroll;
width: 165px;
}
#out{
height:100px;
width:100px;
background-color: green;
position: relative;
}
#in{
position: absolute;
left: 100%;
height:50px;
width:50px;
background-color: red;
}
<div id="outer-div">
<div id="out">
<div id="in">
</div>
</div>
</div>
I am frustrated trying to fix this issue, but couldn't tackle it.
I have a simple html page structure:
header div, body div, and a footer div.
The problem is that the content of the body div (.form-container) affects the margin of the body div itself (.body-container).
Example:
body {
margin: 0px;
}
.header-container {
height: 250px;
width: 100%;
background-color: red;
}
.body-container {
height: 500px;
width: 100%;
background-color: green;
background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container {
height: 150px;
width: 100%;
background-color: blue;
}
.form-container {
margin-bottom: 30px;
margin-top: 30px;
}
<div class="header-container"></div>
<div class="body-container">
<div class="form-container"></div>
</div>
<div class="footer-container"></div>
How do I get rid of this margin in the body div?
This is due to margin collapsing
This is expected behaviour, Mozilla Developer Network states:
If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
Mastering margin collapsing
In this case the conditions are met by .body-container and .form-container so the margin of .form-container ends up outside .body-container.
What can you do?
There are a number of ways you can stop this behaviour although the easiest would be to use padding instead of margin on .form-container as padding does not collapse.
body {
margin: 0px;
}
.header-container {
height: 250px;
width: 100%;
background-color: red;
}
.body-container {
height: 500px;
width: 100%;
background-color: green;
background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container {
height: 150px;
width: 100%;
background-color: blue;
}
.form-container {
padding: 30px 0;
}
<div class="header-container"></div>
<div class="body-container">
<div class="form-container"></div>
</div>
<div class="footer-container"></div>
There is a div .form-container in body div in which follwing css is applied
.form-container{
margin-bottom:30px;
margin-top:30px;
}
Because there is no content in this div its showing top and bottom margin so u can use float:left or dislay:inline property of you cant remove the css or if you can then simply remove this css.
<html>
<head>
<style>
body{
margin:0px;
}
.header-container{
height:250px;
width:100%;
background-color: red;
}
.body-container{
height:500px;
width:100%;
background-color: green;
background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container{
height:150px;
width:100%;
background-color: blue;
}
.form-container{
margin-bottom:30px;
margin-top:30px;
float:left;
}
</style>
</head>
<body>
<div class="header-container"></div>
<div class="body-container">
<div class="form-container">
</div>
</div>
<div class="footer-container"></div>
</body>
</html>
Add "margin-top:-30px" to the .body-container part
<html>
<head>
<style>
body{
margin:0px;
}
.header-container{
height:250px;
width:100%;
background-color: red;
}
.body-container{
margin-top:-30px;
height:500px;
width:100%;
background-color: green;
background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container{
height:150px;
width:100%;
background-color: blue;
}
.form-container{
margin-bottom:30px;
margin-top:30px;
}
</style>
</head>
<body>
<div class="header-container"></div>
<div class="body-container">
<div class="form-container">
</div>
</div>
<div class="footer-container"></div>
</body>
</html>
► Run code snippetCopy snippet to answer
Remove this part to remove the unwanted margin :
.form-container{
margin-bottom:30px;
margin-top:30px;
}
See this fiddle
EDIT
If you want to keep the space, you can use a padding-top instead.
See it here
.form-container{
padding-top : 30px;
}
Note
This property background-color: green; of .body-container is not applied because of the background property below which has a white background-color property set here : background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
If you make the header, body and footer div float, the extra space disappears.
The float makes them try to stick together, but your width: 100% makes sure they each are page wide.
I've also edited your code a bit.
<html>
<head>
<style>
body{
margin:0px;
}
.header-container{
height:250px;
width:100%;
background-color: red;
float: left;
}
.body-container{
height:500px;
width:100%;
background: url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left;
float: left;
}
.footer-container{
height:150px;
width:100%;
background-color: blue;
float: left;
}
.form-container{
margin-bottom:30px;
margin-top:30px;
}
</style>
</head>
<body>
<div class="header-container"></div>
<div class="body-container">
<div class="form-container">
</div>
</div>
<div class="footer-container"></div>
</body>
</html>
Im trying to place background divs behind the container. I thought i would place one div at the top and one at the bottom. Then make the container have a position:relative. But only the top goes behind the container. This is what it looks like
http://oi62.tinypic.com/2lm3mvk.jpg
And this is how i want it to look like
http://oi57.tinypic.com/5zjjvs.jpg
Both blue divs are suppossed to be behind and the brown div is the container. The red divs are header/footer. How am I suppossed to do this?
<body>
<div id="wrapper">
<div id="top"></div>
<div class="blueLeft"></div>
<div class="padding"></div>
<div id="container"></div>
<div class="blueRight"></div>
<div id="bottom"></div>
</div>
</body>
#wrapper{
width:100%;
height:100%;
}
#top,#bottom{
background-color: red;
width:100%;
height:200px;
clear:both;
}
#container{
background-color: brown;
width:800px;
height:600px;
margin:0 auto;
position: relative;
}
.blueLeft{
width: 100%;
height: 200px;
background-color: blue;
float:left;
}
.blueRight{
width: 100%;
height: 300px;
background-color: blue;
float:right;
}
See if this is what you wanted.
http://jsfiddle.net/vleong2332/pq3823tz/
<div id="wrapper">
<div id="top"></div>
<div class="blueTop"></div>
<div class="padding"></div>
<div id="container"></div>
<div class="blueBottom"></div>
<div id="bottom"></div>
</div>
CSS
#wrapper{
width:100%;
height:100%;
position: relative;
}
#top,#bottom{
background-color: red;
width:100%;
height:200px;
clear:both;
}
#container{
background-color: brown;
width:800px;
height:600px;
margin:0 auto;
position: relative;
}
.blueTop{
width: 100%;
height: 200px;
background-color: blue;
position: absolute;
}
.blueBottom{
width: 100%;
height: 300px;
background-color: blue;
position: absolute;
bottom: 200px;
z-index: -1;
}
On HTML, I changed the class to blueTop and blueBottom since they would be more accurate semantically.
On CSS, since I don't think you'd need the float, I removed them. I used position: absolute on the blue divs. The top one doesn't need to be re-adjusted because the flow already puts it where you want it. For the bottom, I need to position the bottom on top of the red since it goes against the normal flow. z-index is to put the blueBottom behind the brown div.
Hope this helps.
Using your example, you could just give #container a negative margin equal to the height of the second blue div.
So for example:
#wrapper{
width:100%;
height:100%;
}
#top,#bottom{
background-color: red;
width:100%;
height:200px;
clear:both;
}
#container{
background-color: brown;
width:800px;
height:600px;
margin:0 auto;
position: relative;
margin-bottom: -300px;
}
.blueLeft{
width: 100%;
height: 200px;
background-color: blue;
float:left;
}
.blueRight{
width: 100%;
height: 300px;
background-color: blue;
float:right;
}
<body>
<div id="wrapper">
<div id="top"></div>
<div class="blueLeft"></div>
<div class="padding"></div>
<div id="container"></div>
<div class="blueRight"></div>
<div id="bottom"></div>
</div>
</body>
However, you may want to consider doing this differently.
The issue you're having isn't that your #container element is "on top" of your bottom blue float in a Z-axis way, it's that it's above it vertically in the document (basically, the float is clearing your #container.
Try adding margin-top: -300px; to your .blueRight CSS and see if that gives you what you are looking for.
I have this HTML:
<div id="cont">
<div class="chatarea">
<div class="row">
<div class="message">
<div class="nick">
<p>Some Nick</p>
</div>
<p>Some Message</p>
<div class="timestamp"><p>Some Timestamp</p></div>
</div>
</div>
</div>
</div>
and this CSS:
#cont {
width:100%;
text-align:center;
}
.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px;
width:80%;
}
.nick
{
width: 400px;
border-right-style: solid;
text-align: center;
height:100%; position:absolute; top:0; left:0;
}
.timestamp
{
width: 400px;
border-left-style: solid;
position:absolute; top:0; right:0; height:100%;
}
.message
{
border-style: solid;
padding:0 50px 0 140px;
overflow:hidden;
position:relative;
}
im trying to display 3 divs (left and right smaller than the centre one) in the centre of the page. 80% of the browser width.
i have made a fiddle here: http://jsfiddle.net/zQ9pu/
im having a bit of trouble with it - what would be the best way to do this?
Just add
.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px auto;
width:80%;
}
It works fine !! here is ur new fiddle http://jsfiddle.net/zQ9pu/2/
Contain those divs in a parent block level element which has a specified width and then apply CSS margin-left: auto; margin-right: auto; on it.