I have a div centered in another div with:
<div id="align" style = "width: 420px; margin:auto; ">
The div stays always in the center and that's fine but,
how do I offset it 60px (or any other distance) to the right?
You can move the div and still have it centered using position:relative
#align {
width: 420px;
margin:auto;
position:relative;
left:60px;
}
<div id="align"></div>
Use relative position and left, for example:
<div id="align" style="width: 420px; margin:auto; position: relative; left: 60px;">
Related
I have this code to show absolute div into relative div.
html:
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="relative">
<div class="absolute">Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.</div>
</div>
</div>
<div class="col-md-12">
normal text added
</div>
</div>
</div>
</section>
css:
.relative {
position: relative;
height:auto;
background-color:#e1e1e1;
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
background-color: white;
width: auto;
background-color:#f5f5f5;
margin:0 15px;
}
In reality when I set height:auto for relative div this div is not showing. If I set any height value ie: height:150px; relative div it works and shows true. How do I fix this problem ?
demo here
You can't do this with css, and need to set the height on your outer div with position:relative for your inner position:absolute to show.
This is because when you set a <div> to be position:absolute, the outer container no longer has the concept of its width and height and will not accommodate the space it takes up.
add overflow :hidden; min-height:100px;
.relative {
position: relative;
height:auto;
overflow :hidden;
min-height:100px;
background-color:#e1e1e1;
}
Here the trick
CSS
.relative {
position: relative;
overflow :hidden;
min-height:100px;
background-color:#e1e1e1;
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
background-color: white;
width: auto;
background-color:#f5f5f5;
margin:0 15px;
overflow: auto;
height: 100px;
}
DEMO
Set the relative height and absolute height
I have the below slideshow which is 100% of the screen width. I need to position the banner_slideshow_controls div on top of this in the middle.
I have tried setting the main container of the slideshow to relative and then setting the div to absolute but this will not sit in the middle unless I set a width and margin: 0 auto on the slideshow which I cannot do as I need it to be 100%.
Can anyone suggest a work around for this?
<div id="banner_slideshow_container">
<div id="banner_slideshow">
</div>
<div id="banner_slideshow_controls">
<div class="slideshow_caption">TEXT FOR BANNER</div>
<div class="slideshow_button">More Information</div>
<div id="prev" class="img_replace">Previous</div>
<div id="next" class="img_replace">Next</div>
</div>
</div>
#banner_slideshow_container {
width: 100%;
height: 366px;
margin-top: 339px;
background-color:#ccc;
}
#banner_slideshow {height:366px}
#banner_slideshow a{
width:100%;
height:100%;
display:block;
}
#banner_slideshow_controls {
position:relative;
top:-100px;
margin: auto 0;
width:900px;
z-index:10;
border:2px solid green
}
Many thanks,
If you want to center horizontally, left and right margin has to be auto, so margin: 0 auto, or shorter margin: auto (because default div margin is 0)
Or if you want to use absolute position, add to #banner_slider_container position: relative and than you can position absolutely (if you don´t know container width, you can use left: 50%; margin-left: -450px)
margin: x y is short hand for -
margin-top: x
margin-bottom: x
margin-right: y
margin-left: y
If I understood the requirement correctly -
set margin : 0 auto not the other way around on #banner_slideshow_controls
By doing that you set the left, right margin to 'auto' and top,bottom margin to 0 - which will place the div in the middle.
Can someone tell me why this code doesn't work
<div id="dojam_text_container" style="width: 300px; height: 300px;
margin:auto; background-color:Blue;">
<div style="display:table-cell; vertical-align:middle;">
<span id="text_dojmovi1" style="">"bla bla bla</span></div>
</div>
and this does..
<div style="position:absolute; top:10vw; left:10vh;">
<div style=" border: dotted red 1px; background-color:white; width:20vw; height:
20vh; display:table-cell; text-align:center; vertical-align:middle; position:relative;">
<span> I am some centered shrink-to-fit content!
<br />
</span>
</div>
</div>
Give display:table to your parent div
<div style="position: absolute;display:table;width:300px; height:300px; top:100px; left:100px; background-color:Black;">
.............
</div>
Fiddle
Docs to understand tabular structure using divs
Vertical & Horizontal Centering
Common issues:
Parent do not have a position set
Ancestors do not have a height or width set
Solution for child with known dimensions
This is a solution if you need it to be IE6 compatible. If you know the dimensions of the child, then
define the height/width of the parent.
set the parent's positioning
position the child absolutely with top, left being 50%, 50%.
add a negative margin to offset the child's height & width
JsFiddle
html, body, div.parent {
position: relative;
width: 100%;
height: 100%;
}
div.child {
position: absolute;
width: 10em;
height: 10em;
top: 50%;
margin-top: -5em;
left: 50%;
margin-left: -5em;
}
Solution for child with unknown dimensions
This solution will work for IE8+. If you don't know the dimensions:
define the height/width of the parent.
set the parent's display to table
set the parent to vertical align: middle
JsFiddle
div.fluid.parent {
display: table;
vertical-align: middle;
}
div.fluid.child {
width: auto;
height: auto;
}
More Resources
For more resources, see w3.org
I want to make 2 divs beside each other to be aligned on the same horizontal line WITHOUT FLOATs
I've tried Position:relative ,, but no luck
See the example below :
http://jsfiddle.net/XVzLK
<div style="width:200px;height:100px;background:#ccc;">
<div style="background:Blue; float:left; width:100px; height:100px;"></div>
<div style="background:red; float:left; margin-left:100px; width:100px; height:100px;"></div>
</div>
From the link above, I need the red box to be on the same line of blue box with no space below ..
EDIT : I want the red box to stay outside the container gray box (just as it is) thanks
Relative with inline-block display
#one {
width: 200px;
background: #ccc;
}
#two {
display: inline-block;
background: blue;
position: relative;
left: 0;
width: 100px; height: 100px;
}
#three {
display: inline-block;
background: red;
position: relative;
left: 0;
width: 100px; height: 100px;
}
<div id="one"><div id="two"></div><div id="three"></div></div>
EDIT
The code below also works fine. Here, because of comments, the line feed is commented out and ignored.
#one {
width: 200px;
background: #ccc;
}
#two {
display: inline-block;
background: blue;
position: relative;
left: 0;
width: 100px; height: 100px;
}
#three {
display: inline-block;
background: red;
position: relative;
left: 0;
width: 100px; height: 100px;
}
<div id="one">
<div id="two"></div><!--
--><div id="three"></div>
</div>
Why it works block displays take the whole width of their container, even if you set a very small width, rest of the space
will be taken as margin (even if you remove margin). That's just how
they behave. inline-block displays work much like inline displays
except that they do respect the padding etc you give them. But they
still ignore margins (someone correct me if I am wrong). Same as
inline displays, if you give a line-feed between them in your HTML,
it's converted to a small space. So to remove that, Here I have the
HTML in a single line. If you indent the code then the div#three
will be pushed down (as you have fixed width of div#one so height is
only option.)
Use Position properties when your height and width are fixed
<div style="width:200px;height:100px;position:relative;background:#ccc;">
<div style="background:Blue; position:absolute; left:0%; width:50%; height:100%;">
</div>
<div style="background:red; position:absolute; left:50%; width:50%; height:100%;">
</div>
</div>
If you want to avoid float, position and inline-block, here's a margin-only solution:
<div style="width:200px; background:#ccc;">
<div style="background:blue; width:100px; height:100px;"></div>
<div style="background:red; width:100px; height:100px; margin:-100px 0 0 100px;"></div>
</div>
Updated fiddle
If you want your divs on same line without floats you can use display: inline-block; and give some negative margin value to your div because inline-block contains some margin between them.
See this fiddle
As your Edited question I have submitted another fiddle here
Or you could simply add margin-top: -100px; to your fiddle.
http://jsfiddle.net/XVzLK/22/
<div style="width:200px;position: relative; background:#ccc;">
<div style="background:Blue; position:absolute; top:0; left: 0; width:100px;height:100px;"></div>
<div style="background:red; position:absolute; top:0; right: 0; width:100px;height:100px;"></div>
</div>
Setting position relative on the coloured divs makes their position relative to where they would have been in the document. I think what you wanted to do is make the containing div position relative, and the children divs positioned absolutely within it. I'm assuming that "with now space below" meant "with no space below"
There is a tutorial here that may be of use: http://www.barelyfitz.com/screencast/html-training/css/positioning/
I have this css:
#manipulate
{
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
}
I have this html:
<div id="manipulate" align="center">
</div>
How do we position that div at the bottom center of the screen?!?
If you aren't comfortable with using negative margins, check this out.
HTML -
<div>
Your Text
</div>
CSS -
div {
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto;
}
Especially useful when you don't know the width of the div.
align="center" has no effect.
Since you have position:absolute, I would recommend positioning it 50% from the left and then subtracting half of its width from its left margin.
#manipulate {
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
left:50%;
margin-left:-150px;
}
Use negative margins:
#manipulate
{
position:absolute;
width:300px;
height:300px;
margin-left:-150px;
background:#063;
bottom:0px;
left:50%;
}
The key here is the width, left and margin-left properties.
Here is a solution with two divs:
HTML:
<div id="footer">
<div id="center">
Text here
</div>
</div>
CSS:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
#center {
width: 500px;
margin: 0 auto;
}
Using a Flexbox worked for me:
#manipulate {
position: absolute;
width: 100%;
display: flex;
justify-content: center; // Centers the item
bottom: 10px; // Moves it up a little from the bottom
}
You can center it using negative margins BUT please note that it'll center exactly on the center of the screen IF any containing div is NOT SET to position:relative;
For example. http://jsfiddle.net/aWNCm/
So, best way to exactly center this div is to set correct properties position properties for its containing divs too otherwise it will be lost in some random ways.
100% working single line (Inline CSS Solve)
<div style="position: fixed; bottom: 10px; width: 100%; text-align: center;">Your Content Here</div>
100% working single line (Inline CSS Solve)
<div style="padding: 20px; width: 100%; text-align: center;">Your Content Here</div>