I need to position 3 objects as follows:
Div 1 is a absolute positioned container, with a fixed width, height and position.
Image 1 should be an absolute positioned image, with a fixed align left position only.
Div 2 should be an absolute positioned div, with a fixed align left position only.
I need Image 1 and Div 2 to align to the vertical center of div 1, as these are variable text and image elements with a dynamic height.
Example:
Div 1 is 200px high fixed.
Image 1 is 52px high variable
Image 1 should be vertically positoned:
(200 / 2) + (52 / 2) = 126px
I've looked into CSS table-cell, vertical-align, margin as % and others but was unable to get this working.
Thanks.
.div1
{
position: absolute;
width: 100px;
height: 100px
top: 100px;
left: 100px;
}
.image1
{
position: absolute;
left: 10px;
// something here to align the image in the vertical middle of div1
}
.div2
{
position: absolute;
left: 60px;
// something here to align the image in the vertical middle of div1
}
<div class="div1"><img class="image1"><div class="div2"></div></div>
Updated code:
<head>
<style type="text/css">
.div1 {
background: yellow;
display: table;
position: absolute;
width: 300px;
height: 300px;
top: 100px;
left: 100px;
}
.newdiv {
display: table-cell;
vertical-align: middle;
height: 300px;
}
.image1 {
left: 10px;
position: relative;
width:50px;
height: 80px;
background: blue;
}
.div2 {
position: relative;
background: red;
left: 70px;
width: 100%;
height: 200px;
}
</style>
</head>
<div class="div1"><div class="newdiv"><div class="image1" /></div><div class="div2">123</div></div></div>
Try this, you have to add another div inside your first div:
<head>
<style type="text/css">
.div1 {
background: yellow;
display: table;
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
}
.newdiv {
display: table-cell;
vertical-align: middle;
}
.image1 {
left: 10px;
position: relative;
}
.div2 {
position: relative;
background: red;
left: 6px;
}
</style>
</head>
<div class="div1"><div class="newdiv"><img class="image1" /><div class="div2">123</div></div></div>
UPDATE (I've found another way, without the new div, I didn't test it in IE.):
<head>
<style type="text/css">
.div1 {
background: yellow;
position: relative;
width: 300px;
height: 300px;
top: 100px;
left: 100px;
}
.image1 {
left: 10px;
position: absolute;
width:50px;
height: 80px;
background: blue;
top:0;
bottom:0;
margin:auto;
}
.div2 {
position: absolute;
background: red;
left: 70px;
width: 100px;
height: 200px;
top:0;
bottom:0;
margin:auto;
}
</style>
</head>
<div class="div1">
<div class="image1" /></div>
<div class="div2">123</div>
</div>
.image1,
.div2 {
position: absolute;
top:0;
bottom:0;
margin: auto;
}
jsFiddle
Related
I have one outer div and two children divs. I want the outer div fixed to the window, one child div to the left most of the parent div and another to the right most of the parent div.
When I position: fixed the parent, it is fixed to the window but the two child divs stick to the left and overlap. If I position: relative the parent, the two child divs stick to the left and right respectively but it is not fixed to the top of the window.
How can I do it? Thanks!
<div class="nav-wrapper">
<div class="child1"></div>
<div class="nav-pages"></div>
</div>
My css:
nav {
#media only screen and (min-width: 0) {
height: 3em;
.nav-wrapper {
padding: .7em 1em 0 1em;
}
}
#media only screen and (min-width: $medium-screen) {
height: 500px;
.nav-wrapper {
padding: 0em 1em 0 1em;
height: 64px;
position: relative;
background-color: rgba(60,63,65,0.22);
}
}
}
nav {
background-image: url("http://image.insider-journeys.com/overview/china.jpg");
background-size: cover;
}
.navbar-non-link {
padding: 0 15px;
}
.nav-pages {
padding-right: 0px;
}
.side-nav {
width: 500px;
}
Try This:
body {
height: 1200px;
}
.parent {
position: fixed;
background-color: red;
height: 100px;
width:100%;
}
.child1 {
background-color: green;
width: 100px;
height: 100px;
position: absolute;
left: 0;
}
.child2{
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
right: 0;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
Something like this:
body {
width: 100%;
min-height: 1000px;
margin:0px;
padding:0px;
}
div {margin:0px;padding:0px;}
.wrapper {
border: 1px solid black;
width: 100%;
position: fixed;
height:50px;
top:0px;
}
.parent {
position: fixed;
width: 20%;
height: 50px;
background: red;
overflow:hidden;
top:1px;
right:40%;
}
.child1 {
position: fixed;
left: 20%;
top: 1px;
height: 50px;
width:20%;
background: green
}
.child2 {
position: fixed;
right: 20%;
top: 1px;
height: 50px;
width: 20%;
background: green
}
<body>
<div class="wrapper">
<div class="parent">parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</div>
</body>
I have read here in stackover flow and elsewhere that if we have a parent div with relative position, the child tags with absolute position will not relocate when zooming. But in my following example, it does not obey this rule.
In the main file, I have <img> tags instead of div with ids img1 to
img3
Any advice will be appreciated.
#container {
position: relative;
width: 200px;
height: 200px;
border: 3px solid green;
}
#img1 {
position: absolute;
width: 100px;
height: 100px;
background: red;
left: 25%;
}
#img2 {
position: absolute;
width: 20px;
height: 100px;
background: blue;
left: 30%;
}
#img3 {
position: absolute;
width: 20px;
height: 100px;
background: yellow;
left: 60%;
}
<div id="container">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</div>
I have a div ".container" with two divs: first ".blue" and second ".green".
I got my green div fixed to the bottom-0, but I need to put the first div blue to backboard the green div.
http://jsfiddle.net/washington_guedes/k959kmqd/
css:
.container{
position: relative;
width: 100%;
}
.blue{
position: relative;
width: 100%;
background-color: #acf;
}
.green{
position: fixed;
bottom: 0;
width: 100%;
height: 250px;
background-color: #bfb;
}
html:
<!-- some divs before -->
<div class="container">
<div class="blue">Blue</div>
<div class="green">Green</div>
</div>
You could set both div to be absolute position and then play with whatever you need to do:
.container{
position: relative;
width: 100%;
}
.blue,
.green {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 250px;
}
.blue{
background-color: #bbf;
}
.green{
background-color: #bfb;
top: 250px;
}
Divs in top of each other http://jsfiddle.net/vfpzbj9q/
Divs overlapping http://jsfiddle.net/wkkyoz0h/
I'm trying to get an element inside a variably sized parent to be both square, and positioned at the left and centred vertically. I would prefer to do this in CSS only and avoid javascript.
This produces a box of the correct width and horizontally the correct position (10% from left), but it fills the height of its parent. http://jsfiddle.net/6tvsmLnp/
<div id="d1">
<div id="d2"></div>
</div>
<style type="text/css">
*
{
margin:0;padding:0;
}
div#d1
{
width: 90vw;
height: 50.625vw;
background: pink;
max-height: 90vh;
max-width: 177.78vh;
margin: auto;
position: absolute;
top:0;bottom:0;
left:0;right:0;
}
div#d2
{
background: blue;
width:10%;
top: 0;
bottom: 0;
left: 10%;
position:absolute;
margin:auto;
}
#d2:before{
content: "";
display: inline-block;
padding-top: 100%; /* initial ratio of 1:1*/
}
</style>
Changing the position of #d2 to relative makes it the desired size and aspect ratio, but is postioned at the top and to the right of center of its parent. http://jsfiddle.net/ozu6c4eo/1/
<div id="d1">
<div id="d2"></div>
</div>
<style type="text/css">
*
{
margin:0;padding:0;
}
div#d1
{
width: 90vw;
height: 50.625vw;
background: pink;
max-height: 90vh;
max-width: 177.78vh;
margin: auto;
position: absolute;
top:0;bottom:0;
left:0;right:0;
}
div#d2
{
background: blue;
width:10%;
top: 0;
bottom: 0;
left: 10%;
position:relative;
margin:auto;
}
#d2:before{
content: "";
display: inline-block;
padding-top: 100%; /* initial ratio of 1:1*/
}
</style>
demo - http://jsfiddle.net/victor_007/6tvsmLnp/1/
div#d2 {
background: blue;
width: 10%;
top: 50%; /** changed to center vertically **/
bottom: 0;
left: 10%;
position: relative;
transform: translateY(-50%); /** added to center vertically **/
}
I am trying to set the margin for multiple div elements inside a container div. Here is the HTML:
<div id="container">
<div id="square"></div>
<div id="square1"></div>
<div id="square2"></div>
</div>
Here is the CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
Now, say I want to edit the margin of square 1. Here is the updated CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
#square1 {
margin-top: 55px;
height: 50px;
background: red;
}
The margin of square 1 is correct. However, it messes up the margin of square2 because now the top margin is measured from square1 instead of the container div. How do I set the margins of all the sibling divs to where they are measured from the container, regardless of what the other sibling divs are added/removed? Any help would be greatly appreciated.
your will need to give position absolute and width 100%; you can check the js fiddle
Js fiddle
like this for every square
#square {
margin-top: 10px;
height: 50px;
background: green;
position:absolute;
width:100%;
}
You're better off dumping these square divs into a relative div and have an absolute position for each square div. You kind of lucked out because you know the height of each of your square divs.
So your HTML stays the same. The reason you put absolute within the relative is so that the absolute value plays into the #container field instead of body.
Your CSS changes however:
#container {
background: #eee;
width: 200px;
height: 500px;
position: relative;
border: 10px solid green;
}
#square {
margin-top: 10px;
position: absolute;
height: 50px;
left: 0;
right: 0;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
position: absolute;
background: black;
left: 0;
right: 0;
}
#square1 {
margin-top: 55px;
position: absolute;
left: 0;
right: 0;
height: 50px;
background: red;
}