I am trying to place a box along side each image on my webpage that will scroll down with the page but only inside the confines of the post/image, like can be found at memecenter, but i am having some difficulties.
I have set the parent div (post) to position relative and the child div (scrolling box) to position absolute, and they are nested within each other in the html but the child div wont scroll it still stays static on the page.
See code here:
.parent {
position: relative;
width: 613px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
}
.child {
position: absolute;
width: 46px;
height: 100px;
float: right;
margin-right: 20px;
}
and html:
<div class="parent">
<div class="child">
</div>
</div>
You can use "top" and "left" values.
Css Part:
.parent {
position.parent {
position: relative;
width: 613px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
}
.child {
position: absolute;
left: 100px;
top: 10px;
width: 46px;
height: 100px;
float: right;
margin-right: 20px;
float: left;
}:
Html part:
<div class="parent">
<img src="img.png" width="100px">
<div class="child">This is image description</div>
</div>
Css :
.parent
{
background-color:Blue;
position:fixed;
width: 150px;
height:200px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
overflow:hidden;
}
.child {
background-color:red;
position: absolute;
width: 460px;
height: 220px;
float: right;
margin-left:150px;
overflow:scroll;
}
and html:
<div class="parent">
</div>
<div class="child">
</div>
Please find a working fiddle.
http://jsfiddle.net/Victor_AJ/8GS7b/13/
CSS :
.parent {
background-color:Blue;
position:fixed;
width: 70%;
height:100%;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
overflow-y:scroll;
overflow-x:hidden;
}
.child {
background-color:Grey;
position: absolute;
width: 30%;
height:100%;
float: right;
margin-left:70%;
overflow:hidden;
}
And Html :
<div class="parent">
</div>
<div class="child">
</div>
Find a Fiddle Here Working EX
Related
I thought adding margin to an element in position: absolute does not work.
In the following snippet, #child2in #parent2 is in position: absolute and yet adding margin: 10px seems to work as #child2 seems to be in alignment with #child1, which does not have position: absolute
Why is this happening or what am I getting wrong about margin and position: absolute of elements ?
#root{
display:flex;
gap: 10px;
}
#parent1{
border: 1px solid #000;
position: relative;
width: 100px;
height:100px;
}
#child1{
background:hotpink;
width: 70px;
height: 70px;
margin: 10px;
}
#parent2{
border: 1px solid #000;
position: relative;
width: 100px;
height:100px;
}
#child2{
background:cyan;
width: 70px;
height: 70px;
position: absolute;
margin: 10px; /* <-- Why does margin work here */
}
<div id='root'>
<div id="parent1">
<div id="child1">no absolute</div>
</div>
<div id="parent2">
<div id="child2">absolute</div>
</div>
</div>
How to make the green div wrap around the blue and yellow divs (his children)
in this particular problem:
https://jsfiddle.net/y74ueuLa/
HTML
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
CSS
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
}
#one {
width: 100%;
height: 150px;
background-color: blue;
position: absolute;
z-index:-1;
}
#two {
position: relative;
top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
}
The green div is wrapped around the blue div. It just doesn't appear that way because the blue div is on top.
With div #two you're positioning it relatively with top 100px. When you position something relative, you're moving the visual component of the div relative to where it would naturally fall in the browser. It's equivalent to saying "visually move down 150px from where you are". You could just make the green div taller, but I don't think that's what you're going for.
I think what you're trying to do (and please correct me if I'm wrong), is this:
https://jsfiddle.net/dk6L1zLL/
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
padding-top:10px;
padding-bottom:10px;
}
#one {
//width: 100%;
height: 150px;
background-color: blue;
//position: absolute;
z-index:-1;
margin:0 10px 0;
}
#two {
//position: relative;
//top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
/*margin-bottom: 500px;*/
}
#footer {
height: 100px;
background-color: red;
width: 100%;
position: relative;
z-index: -3;
}
<body>
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
</body>
I got rid of a lot of the positioning rules and added some margin and padding.
I'm trying to create a progress bar and i have a problem aligning div inside a div.
css:
.outer {
width: 20px;
height: 190px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display:inline-block;
}
.inner {
width: 100%;
overflow: hidden;
position: absolute;
border-top-width: 0;
background-image: url('/images/progressBar2Red.png');
background-size: 20px;
bottom: 0;
height: 0%;
display:inline-block;
}
.progress{
display: inline-block;
align-items:center;
}
html:
<div class="progress">
<label class="progNum">20</label><br />
<div class="outer">
<div class="inner"></div>
</div>
</div>
For some reason the inner div is not exactly in the middle of the outer div. This is how it looks:
How can i put the inner div exactly in the middle of the outer div?
You made this .inner element of position: absolute. Just add left: 0; and right: 0; to the .inner CSS rules.
Divs are of 100% width by default, never set a div to a 100% width unless you absolutely need it... for some reason.
EDIT
Ok I actually do not understand what DOES NOT work for you. Check this JSFiddle. I think the problem is your background.
Give the inner margin: 0 auto;
JSfiddle Demo
HTML
<div class="progress">
<label class="progNum">20</label>
<div class="outer">
<div class="inner"></div>
</div>
</div>
CSS
.outer {
height: 190px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
border-radius: 4px;
}
.inner {
width: 100%;
position: absolute;
border-top-width: 0;
background-color: red;
bottom: 0;
width: 100%;
height:20px; /* or anything else you want */
border-radius: 4px;
}
.progress{
display: inline-block;
width: 20px; /* sets width of the whole bar - everything else can be 100% */
}
.progNum {
text-align: center;
display: block;
}
Hi I would like center correctly my content inside the container but I don't know how to do this. I have tried text-align : center.
How can I do this ?
HTML
<div id="Contacts" data-bind="foreach: viewModel.contacts()">
<div class="title">
<div class="container">
<small> <span class="red"> NEW CONTACT</span> </small>
<br>
<br>
</div>
</div>
</div>
CSS
.container {
width: 940px;
margin-left: auto;
margin-right: auto;
zoom: 1;
}
.title {
width: 540px;
height : 30px;
margin-bottom: 10px;
background-color: #F9F7F7;
border: 1px solid #e4e4e4;
position: absolute;
}
no centering
Centered version (approximative) what I would like :
Add line-height:30px; to .title class.
.container {
width: 940px;
margin-left: auto;
margin-right: auto;
zoom: 1;
}
.title {
width: 540px;
height : 30px;
line-height : 30px;
margin-bottom: 10px;
background-color: #F9F7F7;
border: 1px solid #e4e4e4;
position: absolute;
}
Jsfiddle: http://jsfiddle.net//vU73t/
.centerMe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
/* dimensions */
}
Here is corrected css and HTML with Fiddle link.
HTML
<div id="Contacts">
<div class="container">
<div class="title">
Demo Text goes here <br>
</div>
</div>
</div>
CSS
*{
padding:0;
margin:0;
}
.container {
width: 940px;
margin:0 auto;
zoom: 1;
background-color:#ffb7b7;
padding:20px;
text-align:center;
}
.title {
width:540px;
height:30px;
margin-bottom: 10px;
background-color: #F9F7F7;
border: 1px solid #e4e4e4;
margin:0 auto;
/*position: absolute;*/
}
I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).
How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.
Code (unfortunately I cannot jsfiddle this as their servers are read only atm):
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: right;
}
Use a negative margin-right on the left box so that the right box is allowed to overlap:
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
margin-right:-104px;
}
The 104 pixels is the overlap amount plus 4px for borders.
Here's a jsfiddle.
You can only do that with positioning.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#right {
width: 250px;
border: 1px solid #ccc;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
You could create the divs with absolute position and add a positive z-index to the one you want to be in front.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
Can you add an extra div in there?
<div id="container">
<div id="left">
<div id="left-inner">left</div>
</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
}
#left {
float: left;
width: 0px;
overflow:visible;
}
#left-inner {
float: right;
width: 250px;
}
#right {
width: 250px;
}
</style>
Make container bigger so both fit. Then use position relative and left: -100px or whatever on the one on the right.
Excellent Solution: http://jsfiddle.net/A9Ap7/237/
So, dont use:
MARGIN-LEFT:100px...
==
or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems!
so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.
Try this one:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
margin-left: 150px;
position: absolute;
}
</style>
How about pulling the right div with negative margin. Something like this?
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
position: relative;
width: 400px;
height: 110px;
background-color: #eee;
}
#left {
width: 250px;
height: 100px;
border: 1px solid green;
float: left;
}
#right {
position: relative;
float: right;
width: 250px;
height: 100px;
top: -100px;
border: 1px solid red;
}