How I can make a box to be fixed within a div with scroll?
I'm trying like this:
HTML:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
CSS:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -250px;
background: black;
}
But the box is going along with the page, not only within the div.
What am i doing wrong here??? Can someone show me the way?
Thank you guys.
EDIT
Example -> https://jsfiddle.net/kzhuh7sv/embedded/result/
Try this solution https://jsfiddle.net/yyt8eope/2/
I added a div that wraps both the container div and the class='test' div at the same level so the test div can be absolute inside the wrapper and be always at a fixed position
<div id="wrapper">
<div class="main">
<div class="scroll-container">
<div class="container">
<div class="container2">
</div>
</div>
<div class="test">Fixed inside scroll container</div>
</div>
</div>
</div>
CSS:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.scroll-container{
position: relative;
height: 500px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 200px;
color: white;
position: absolute;
top:0;
left: 50%;
margin-left: -250px;
background: black;
z-index: 1;
}
Try getting rid of 'position: fixed;' and add this 'overflow: scroll;'.
JSFiddle.
EDIT
Changed the JSFiddle, has been updated.
You can't do it with position: fixed since it always ties to the viewport. You want it fixed within it's context.
http://jsfiddle.net/zq1m49wf/2/
The black box stays in place as container3 scrolls
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="container3"></div>
</div>
<div class="test"></div>
</div>
</div>
</div>
#wrapper {
position: relative;
width: 100%;
height: 100%;
}
.main {
width: 100%;
height: 100%;
}
.container {
position: relative;
height: 500px;
padding-top: 200px;
}
.container2 {
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container3 {
height: 1500px;
}
.test {
width: 500px;
height: 500px;
bottom: 0;
background-color: #000000;
position: absolute;
}
Related
I have a chat nav bar with divs for different users in which there is a photo of the user. I want the photo to be a circle. I am doing it with padding-bottom and width, but the problem comes when the width:height ratio of the screen gets bigger the circle gets larger than the nav , because of the padding-bottom being calculated by the width. What is best approach to make this responsive for all screens?https://jsfiddle.net/n386ejzf/
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
.chats{
height: 20%;
width: 100%;
background: red;
}
.chat{
float: left;
width: 20%;
height: 100%;
background: yellow;
display: flex;
align-items: center;
}
.img{
width: 10%;
padding-bottom: 10%;
background: blue;
border-radius: 50%;
}
<div class="chats">
<div class="chat">
<div class="img">
</div>
</div>
</div>
Use viewport height units.
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
.chats {
height: 20%;
width: 100%;
background: red;
}
.chat {
float: left;
width: 20%;
height: 100%;
background: yellow;
display: flex;
align-items: center;
}
.img {
margin: auto;
width: 10vh;
height: 10vh;
background: blue;
border-radius: 50%;
}
<div class="chats">
<div class="chat">
<div class="img">
</div>
</div>
</div>
Hello Stackoverflow Team,
How can the child div inside the parent div with overflow have a right and left margin? I'm trying to solve the issue but it does not give a clean solution for it.
Attempt:
margin-right wont work
div {
border: 1px solid black;
}
.parent {
width: 300px;
height: 300px;
margin: auto;
position: relative;
overflow: auto;
}
.child {
width: 350px;
height: 150px;
top: 50px;
margin-left: 20px;
margin-right: 20px;
position: absolute;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
My unclean Solution:
div {
border: 1px solid black;
}
.parent {
width: 300px;
height: 300px;
margin: auto;
position: relative;
overflow: auto;
}
.child {
width: 350px;
height: 150px;
top: 50px;
margin-left: 20px;
border-right: 20px solid red;
position: absolute;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
any better way to solve the issue?
Since you are using position: absolute for the child, best way to achieve what you want is remove position: absolute then add the margins you need.
div{
border: 1px solid black;
}
.parent {
width:300px;
height:300px;
margin:auto;
position: relative;
overflow: auto;
}
.child {
width:350px;
height:150px;
top: 50px;
margin: 50px 20px 0;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
Update
If you need the child div to be position: absolute you will have to wrap it in another div as follow:
div{
border: 1px solid black;
}
.parent {
width:300px;
height:300px;
margin:auto;
position: relative;
overflow: auto;
}
.child {
border-color: red;
position: absolute;
top: 20px;
height: 150px;
}
.sub-child {
width:350px;
height:150px;
margin: 0 20px;
display: inline-block;
}
<div class="parent">
<div class="child">
<div class="sub-child"></div>
</div>
</div>
I have created a slideshow and to the right of it there are divs, they will be enlarged when you hover over them and when you take your cursor off the div it will shrink. But, the aside (the divs parent) is in the correct place where it should be, it's the divs that aren't filling the top of the aside element. How can I get the divs to fill the aside element and not break anything else?
.thing {
height: 120px;
width: 250px;
z-index: 10;
position: relative;
border: 5px solid brown;
}
.thing:hover {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 11;
}
.report {
text-align: left;
vertical-align: top;
display: table;
width: 100%;
}
.aside {
display: table-cell;
padding-top: 5px;
width: 250px;
border-radius: 10px;
border: 2px solid black;
overflow: hidden;
position: relative;
height: 385px;
}
.container {
position: relative;
width: 750px;
height: 400px;
border-radius: 5px;
border: 1px solid black;
overflow: hidden;
}
<div class="report">
<div id="imgGallary" class="container">
<img src="images/companies.png" alt="" width="750" height="400" />
<img src="gallery" alt="" width="750" height="400" />
</div>
<aside class="aside">
<div id="c1"></div>
<div class="thing" style="background-color: blue;">
<h1>Find Us!</h1>
</div>
<div class="thing" style="background-color: orange;"></div>
<div class="thing" style="background-color: pink"></div>
</aside>
</div>
Your CSS layout is confusing display: table and display: relative. They aren't compatible like you have them. The preferred way to layout your .container and the aside would be to use floats. I revised your example to float those two containers next to each other (roughly at a 80/20 split for the width). This has the added bonus of making your layout responsive.
Working codepen:
http://codepen.io/staypuftman/pen/vKoPmw
.thing {
height: 120px;
width: 250px;
position: relative;
border: 5px solid brown;
}
.thing:hover {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.report {
text-align: left;
vertical-align: top;
display: table;
width: 100%;
}
.aside {
padding-top: 5px;
width: 18%;
border-radius: 10px;
border: 1% solid black;
overflow: hidden;
float: left;
position: relative;
height: 385px;
}
.container {
float: left;
width: 80%;
height: 400px;
border-radius: 5px;
border: 1px solid black;
overflow: hidden;
}
I want to create container div that has width between 800px to 1000px.
Inside, it has two div and want to fix left div to 250px.
For the right div I want it make width-resize automatically
jsfiddle examle
HTML
<div style="width: 100%;">
<div class="container">
<div class="left">
Left div<br />(fixed to 250px)
</div>
<div class="right">
Right div<br />(width fit to blue area left)
</div>
</div>
</div>
CSS
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
}
.left {
width: 250px;
float: left;
height: 200px;
background-color: #0F0;
}
.right {
width: 100%;
background-color: #F00;
height: 200px;
float: left;
}
This will do it. It uses calc (http://jsfiddle.net/vn84nm30/6/)
.right {
width: calc(100% - 250px);
background-color: #F00;
height: 200px;
float: left;
}
You could simply add display: flex to the parent, .container element:
Updated Example
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
display: flex;
}
Alternatively, you could set the display of the parent, .container element to table, and then set the children elements to display: table-cell. If you want the children elements to respect the width, set table-layout: fixed on the parent element:
Alternative Example Here
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
display: table;
table-layout: fixed;
}
.left {
width: 250px;
height: 200px;
background-color: #0F0;
display: table-cell;
}
.right {
width: 100%;
background-color: #F00;
height: 200px;
display: table-cell;
}
Solution
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
}
.left {
width: 250px;
float: left;
height: 200px;
background-color: #0F0;
}
.right {
width:100%;
background-color: #F00;
height: 200px;
}
<div style="width: 100%; display: table; border-collapse: collapse; width: 100%; min-width: 800px; max-width: 1100px;">
<div class="container">
<div class="left">Left div
<br />(fixed to 250px)</div>
<div class="right">Right div
<br />(width fit to blue area left)</div>
</div>
</div>
You can try to remove float:right on the red div :D or
Maybe like this: http://jsfiddle.net/vn84nm30/8/
Used table features ;)
top div : display: table;
container : display: table-row
removed float left
the height is decided by parent :D
Remove float: left from the right element.
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
}
.left {
width: 250px;
float: left;
height: 200px;
background-color: #0F0;
}
.right {
width: 100%;
background-color: #F00;
height: 200px;
}
<div style="width: 100%;">
<div class="container">
<div class="left">
Left div<br />(fixed to 250px)
</div>
<div class="right">
Right div<br />(width fit to blue area left)
</div>
</div>
</div>
Is very simple:
HTML:
<div>
<section class="left">
</section>
<section class="right">
</section>
<div class="clear"></div>
</div>
CSS:
div, section { border: 1px solid #000; }
.left { height: 100%; width: 200px; float: left; height: 200px; }
.right { width: 300px; float: right; height: 300px; }
.clear { clear: both; }
Fiddler: http://jsfiddle.net/H2c6g/
How I do for the div use the 100% of height?
You can use width: 100% on the inner <section>s as long as you also define a height on the wrapping <div>. Try this CSS:
div { height: 400px; background: #ccc; }
.left { height: 100%; width: 200px; float: left; background: #c00; }
.right { width: 300px; float: right; height: 300px; background: #00c; }
.clear { clear: both; }
Working Fiddle
Just use:
body,html {
height: 100%;
}
And make the div's height: 100%
As seen in this updated fiddle
Hmm not sure if this is what you are trying to do
<div class="outer">
<section class="left">
</section>
<section class="right">
</section>
<div class="clear"></div>
</div>
div, section { border: 1px solid #000; }
.left { height: 100%; width: 200px; float: left; height: 200px; }
.right { width: 300px; float: right; height: 300px; }
.clear { clear: both; }
div.outer{
position:absolute;
height:100%;
}
You can use flexbox if you don't need to support older IE browsers.... Check it out below.
display:flex
Notice that I am only setting a height for the .left class the .right class matches the height.
http://jsbin.com/curoruni/1/edit
Here is how I would do it, not using any floats
<div id="wrapper">
<div class="left"></div><div class="right"></div>
</div>
And
#wrapper {
border: 1px solid red;
height: 500px;
width: 100%;
overflow: hidden;
position: absolute; top: 0; left: 0;
}
.left {
position: relative;
background-color: yellow;
display: inline-block;
height: 100%; width: 50%;
margin: 0px;
}
.right {
position: relative;
background-color: blue;
display: inline-block;
width: 50%; height: 100%;
margin: 0px;
}
http://jsfiddle.net/fU379/