I' am trying to position a div on my site to bottom 0px. Please see the code below. This div with position 0px is wrap inside another div.
Here's the HTML
<div class="top-wrap">
<div class="clearfix top-cleafix">
<div class="test">
Test
</div>
</div>
</div>
Here's the CSS
.clearfix{
width: 960px;
margin-left: auto;
margin-right: auto;
}
.top-wrap{
height: 341px;
background: #F00;
width: 100%;
}
.top-cleafix{
height: 100%;
}
.test{
bottom: 0px;
}
Try:
.test{
position:absolute;
bottom: 0px;
width:100%;
}
.top-wrap{
height: 341px;
background: #F00;
width: 100%;
position:relative; //add relative position
}
Fiddle here.
add
position:absolute;
or
position:relative;
based on content
use
.test{
float: bottom;
vertical-align:bottom;
}
you need to add absolute position in test and relative in top-wrap
.top-wrap{
position:relative;
height: 341px;
background: #ddd;
width: 100%;
}
.clearfix{
width: 960px;
margin-left: auto;
margin-right: auto;
}
.top-cleafix{
height: 100%;
}
.test{
bottom: 0px;
position: absolute;
}
Fiddle example
Related
I'm trying to achieve something but in vain. I have put the image below, it's worth a thousand words.
Basically I'm trying to center div 3, which is in div 2, between div 1 and 2 exactly to achieve the following result
Now, here's my HTML and CSS code:
HTML
<div id="container">
<div id="leftSide">
<!-- 1. -->
</div>
<div id="rightSide">
<!-- 2. -->
<div id="circle">
<!-- 3. Contains the image -->
</div>
</div>
</div>
CSS
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:left
background-color: red;
}
#circle{
width: 100px;
height: 100px;
margin-left: 30px;
background-color: black;
}
I don't have a clear idea on how to achieve it. Any help is appreciated. Thanks.
You could always try using the CSS position property?
CSS
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position:relative;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:left
background-color: red;
}
#circle{
width: 100px;
height: 100px;
margin-left: 30px;
background-color: black;
position:absolute;
top:/* VALUE GOES HERE */;
left:/* VALUE GOES HERE */;
}
top:50px; drops the element down 50px
left:50px; moves the element to the right 50px
Can be done with position:absolute;(along with the positions as shown below) to the #circle and position:relative to the #container.
Here's the fiddle: http://jsfiddle.net/a081j6bv/1/
#container{
position:relative;
}
#circle{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
Assuming that you are going to have the "circle" div set as a static height/width you can do it by positioning it absolutely 50% left and top and then set a negative margin to half the size of the circle div.
HTML:
<div id="container">
<div id="leftSide">
<!-- 1. -->
</div>
<div id="rightSide">
<!-- 2. -->
</div>
<div id="circle">
<!-- 3. Contains the image -->
</div>
</div>
CSS:
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position:relative;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:right;
background-color: red;
}
#circle{
width: 100px;
height: 100px;
background-color: black;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
JSFiddle
You need to give the #container a relative positioning and an absolute positioning to the circle.
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position: relative;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:right;
background-color: red;
}
#circle{
width: 100px;
height: 200px;
position: absolute;
left:0;
right: 0;
top:0;
bottom:0;
margin: auto;
background-color: black;
}
#circle img{
width: 100px;
height: 100px;
}
<div id="container">
<div id="leftSide">
<!-- 1. -->
</div>
<div id="rightSide">
<!-- 2. -->
<div id="circle">
<!-- 3. Contains the image -->
<img src="http://i.imgur.com/lrg4uy5.jpg"/>
<img src="http://i.imgur.com/RLKixQW.png"/>
</div>
</div>
</div>
According to your tastes and needs, you may choose one of the 4 following templates:
#1 Center circle using position, top, bottom, left, right and margin properties
#container {
height: 300px;
/* prepare #container to center #circle */
position: relative;
}
#leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
}
#rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
/* center #circle inside #container */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div id="container">
<div id="leftSide"></div>
<div id="rightSide">
<div id="circle"></div>
</div>
</div>
#2 Center circle using position, top, left, margin-top and margin-left properties
#container {
height: 300px;
/* prepare #container to center #circle */
position: relative;
}
#leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
}
#rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
/* center #circle inside #container */
position: absolute;
top: 50%;
left: 50%;
margin-top: -70px;
margin-left: -70px;
}
<div id="container">
<div id="leftSide"></div>
<div id="rightSide">
<div id="circle"></div>
</div>
</div>
#3 Center circle using position, top, left and transform properties
#container {
height: 300px;
/* prepare #container to center #circle */
position: relative;
}
#leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
}
#rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
/* center #circle inside #container */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="container">
<div id="leftSide"></div>
<div id="rightSide">
<div id="circle"></div>
</div>
</div>
#4 Center circle using Flexbox
Note that the following HTML snippet is different from the previous ones.
#container {
height: 300px;
background: linear-gradient(90deg, blue 50%, red 50%);
/* prepare #container to center #circle */
display: flex;
align-items: center;
justify-content: center;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
}
<div id="container">
<div id="circle"></div>
</div>
hey guys i had the same problem as a beginner..so to achieve the effect i had to set the container's position to relative and the image's position to absolute...works like magic
-ENJOY!
I have 3 divs in a div and I want to center the bottom one. I've tried every hint I've found on the net (a you can see in my code...), but nothing works.
This should be fairly easy, but it just won't center.
.container {
position: relative;
width: 968px;
margin: 0 auto;
text-align: center;
}
.text {
position: absolute;
width: 968px;
height: 100px;">
}
.bg_image {
position: absolute;
width: 968px;
height: 545px;
top: 150px;
background-image: url(x.jpg);
}
.bg_image2 {
position: absolute;
display: block;
width: 50%;
margin: 0 auto;
height: 200px;
top: 545px;
background-image: url(x.png);
background-repeat: no-repeat;
}
Firstly in your css code there's an error in .text remove this "> after height: 100px;
Secondly we can't answer this if you don't add your html code.
I hope this example code may help you..
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
#outer{ position:fixed; top:0; left:0; width:100%; height:100%; }
#inner1{ width: 50%; height: 20%; top: 25%; margin: 0 auto; position: relative; background:orange; }
#inner2{ width: 50%; height: 40%; top: 25%; margin: 0 auto; position: relative; background:red; }
</style>
</head>
<body>
<div id=outer>
<div id=inner1> </div>
<div id=inner2> </div>
</div>
</body>
</html>
Give a fixed width eg(width:100px;) and margin:0 auto; whichever Div you want to make in center.
This will work for you.
.centerDiv{
width:100px; /*as per your choice but width should be fixed.*/
height:100px; /*as per your choice even you can add auto*/
margin:0 auto; /*this is important to make div in center.*/
}
I'm really stuck on this and would appreciate any direction.
I need to code the following design using CMS and html but I have no idea how to get the center image to overlap the divs on the right and left of the image. I have been reading about relative position and z-indexes but everything that I have tried has failed. Generally when I line up three dives across I will use the float property and it works perfectly but it turns out z-indexes can only be used with positioned elements. If someone could get me started in the right direction I will probably be able to figure it out.
See the design I am trying to code here: https://cdn.shopify.com/s/files/1/0211/8026/files/Example.png?9982
This is the base framework but I don't know where to go from here...
.row-container {
width: 100%;
height: 300px;
margin: auto;
text-align: center;
position: relative;
}
.box1 {
height: 216px;
width: 288px;
float: left ; /* <-- This does not work */
border: 1px solid blue;
}
.image {
height: 250px;
width: 350px;
float: left ; /* <-- This does not work */
border: 1px solid grey;
}
.box2 {
height: 216px;
width: 288px;
float: left; /* <-- This does not work */
border: 1px solid red;
}
<div class="row-container">
<div class="box1"></div>
<div class="image">-- Should I use a div for the image?</div>
<div class="box2"></div>
</div>
Try this it would have worked a bit more better if position:absolute is used but since you wanted float there will be re sizing problems Fiddle
Zoom out to get the effect
.row-container {
width: 100%;
height: 300px;
margin: auto;
text-align: center;
position: relative;
}
.box1 {
position: relative;
z-index: -1;
background: green;
height: 216px;
width: 288px;
float: left;
}
.image {
margin-left: -80px;
background: red;
float: left;
height: 250px;
width: 200px;
}
.image img {
width: 300px;
}
.box2 {
position: relative;
z-index: -1;
float: left;
background: blue;
height: 216px;
width: 288px;
}
<div class="row-container">
<div class="box1"></div>
<div class="image">
<img src="http://placekitten.com/300/301" />
</div>
<div class="box2"></div>
</div>
You can do it without floats using position: (colors added for emphasis)
fiddle
.row-container {
width:900px;
height:300px;
margin:auto;
text-align: center;
border:2px solid black;
background-color:blue;
position:relative;
}
.box1 {
height:216px;
width: 288px;
left:0px;
position:absolute;
z-index:10;
}
.image {
height:250px;
width: 350px;
position:absolute;
top:20px;
left:275px;
z-index:100;
background-color:red;
}
.box2 {
height:216px;
width: 288px;
right:0px;
position:absolute;
z-index:10;
}
div{
background-color:green;
}
You can use z-index on position: relative, so add that to your inner elements and set the z-index.
To create the overlap you can use a negative margin-left on the second and third elements.
So I have 3 Divs. Left, center right.
Image
If browser size smaller than center min-width, it goes down. Video:
Video
I don't know what do I wrong, so many people tried to help me + I searched for it but I didn't find anything. Here's the code:
HTML:
<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS:
#parent
{
margin-left: 5%;
margin-right: 5%;
position: fixed;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
overflow: auto;
}
#left {
position: relative;
width: 370px;
height: 100%;
float: left;
background: #093F5C;
overflow: hidden;
}
#right {
position: relative;
width: 230px;
height: 100%;
float: right;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
min-width: 550px;
overflow: auto;
}
maybe...
#left {
position: absolute;
left:0px;
top: 0px;
width: 370px;
height: 100%;
background: #093F5C;
overflow: hidden;
}
#right {
position: absolute;
right:0px;
top:0px;
width: 230px;
height: 100%;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
position:absolute;
left: 370px; /*width of leftDiv */
right: 230px; /*width of rightDiv */
top:0px;
/*min-width: 100px;*/
overflow: auto;
background: red;
}
jsfiddle: http://jsfiddle.net/alemarch/35bxtc2z/7/ (i have change the dimension fixed of the left and right div). Is this what you search?
The #center should have a max-width:550px, not a min-width:550px. You'll also probably want to add a width to it as well.
#center {
height:100%;
max-width:550px;
width:100%;
overflow:auto;
}
There's also a lot of other odd things about your CSS in general, but thats beyond the scope of this question... Some things to think about - why does the #parent have a position:fixed ? Why is everything else position:relative ? And why do you have heights of 100% ?
I have some elements that are getting out of my parent div. Why?
Here is what I have
CSS:
.lightbox img {
margin-top: 2%;
}
.viewer-v3.lightbox {
overflow: auto;
display: block;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: black;
background: rgba(0,0,0,0.8);
}
.viewer img {
margin-top: 2%;
max-width: 100%;
margin-bottom: 2%;
}
.borderLightbox
{
border:#cccccc;
border-width:1%;
border-top-style:none;
border-right-style:solid;
border-bottom-style :solid;
border-left-style:solid;
position:relative;
width: 80%;
background-color:#e5e5e5;
margin-left:auto;
margin-right:auto;
}
.headerLightbox
{
position:fixed;
background-color:#e5e5e5;
border:#cccccc;
border-width:1%;
width: inherit;
float:left;
border-top-style:solid;
border-right-style:none;
border-bottom-style :none;
border-left-style:none;
}
.actionsLightbox
{
background-color:#ffffff;
}
And HTML:
<div class="viewer-v3 lightbox">
<div class="borderLightbox">
<div class="headerLightbox">
HEADER
<div class="actionsLightbox">
ACTIONS
</div>
</div>
<img class="image" src="http://www.goldbergjones-or.com/blog/wp-content/uploads/2013/05/how-to-get-divorced.jpg">
</div>
</div>
The problem is with headers and action always getting out of parent div. I don't know why, because all the widhts are inherited from parent div, and my header and actions div are always getting out of parent?
UPDATE 3
The solution is to add a content box around the content and let him have the scrollbar.
See this example.
HTML
<div class="viewer-v3 lightbox">
<div class="borderLightbox">
<div class="headerLightbox">
HEADER
<div class="actionsLightbox">
ACTIONS
</div>
</div>
<div class="contentbox">
<img class="image" src="http://www.goldbergjones-or.com/blog/wp-content/uploads/2013/05/how-to-get-divorced.jpg">
</div>
</div>
</div>
CSS
.lightbox img {
margin-top: 2%;
}
.viewer-v3.lightbox {
overflow: auto;
display: block;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
background: black;
background: rgba(0,0,0,0.8);
}
.viewer img {
margin-top: 2%;
max-width: 100%;
margin-bottom: 2%;
}
.contentbox {
height: 100%;
overflow: auto;
}
.borderLightbox
{
border:#cccccc;
border-width:1%;
border-top-style:none;
border-right-style:solid;
border-bottom-style :solid;
border-left-style:solid;
position:relative;
width: 80%;
height: 100%;
background-color:#e5e5e5;
margin-left:auto;
margin-right:auto;
overflow: visible;
}
.headerLightbox
{
position:fixed;
background-color:#e5e5e5;
border:#cccccc;
border-width:1%;
width: inherit;
float:left;
border-top-style:solid;
border-right-style:none;
border-bottom-style :none;
border-left-style:none;
}
.actionsLightbox
{
background-color:#ffffff;
}
UPDATE 2
Understood your requirements, and I am afraid it is not possible.
The reason for the behavior is that .viewer gets a scrollbar, therefore its content width won't equal to the width of the body.
Thus: 80% of viewer != 80% of body (which is what you have for the position: fixed .header)
To see what I mean, just remove the height: 100% from the .viewer, and everything pops into place (only that .viewer won't be scrollable which is a no go)
UPDATE 1
If you need it fixed: do pixel sizes help?
.borderLightbox {
width: 500px;
}
http://jsbin.com/AkAhawa/5
ORIGINAL
It is because you have the position: fixed; property.
Think about it as that takes it out of the context of its parent and makes the body its parent, so from then on, positioning and sizing the .headerLightbox will be relative to the viewport.
If you wish to simply display the header with width: 100% (regarding its parent) then use
.headerLightbox
{
width: 100%;
}