I'm really having a hard time researching for an answer. I tried to make my div: absolute but it will ruin the whole fluid grid. All I want is to put the div over the background div. Thanks in advance!
CSS
#mannequin {
box-sizing: border-box;
position: absolute;
width: 60%;
padding: 0 12px;
margin: 0;
float: left;
overflow: hidden;
}
#products {
clear: both;
position: absolute;
margin-left: 0;
width: 100%;
display: block;
z-index: 10;
}
HTML
<div id="mannequin"><img src="http://tinypic.com/r/29596hh/9">
<div id="products"><img src="http://tinypic.com/r/2qw09lc/9">
</div>
</div>
please make one Div position: relative; and other div make position: absolute;
Define height:100% to #products and top left to 0.
#mannequin {
box-sizing: border-box;
position: absolute;
width: 60%;
padding: 0 12px;
margin: 0;
float: left;
overflow: hidden;
}
#products {
clear: both;
position: absolute;
margin-left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 10;
left:0;
top:0;
}
Related
Only solution I found was to put a position: fixed on element I want to fully see. Any other options? (I dont want to 'cool-image' fixed). Help or hint would be awesome. Also, if anyone can explain solution - that would be even better
Fiddle: JSFiddle
HTML
<div class="img-cont">
<div id="slider">
<ul>
<li class="slide">
<img src="http://www.sportspearl.com/wp-content/uploads/2017/05/football-150x150.png" >
<div class="cool-image"></div>
</li>
</ul>
</div>
</div>
CSS
.img-cont{
height: 270px;
position: relative;
}
#slider {
position: relative;
background: green;
overflow: hidden;
width: 440px;
height: 200px;
}
#slider ul{
position: relative;
margin: 0;
padding: 0;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 440px;
height: 270px;
text-align: center;
line-height: 300px;
}
div.cool-image{
background-color: white;
position: absolute;
border: 5px solid #EEEEEE;
width: 650px;
height: 350px;
z-index: 1;
display: inline-block;
background-repeat: no-repeat;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Basketball.png/170px-Basketball.png);
margin-left: -40px; /* Just to product situation */
display: inline-block;
}
Unfortunately, you can't. The child element is only capable of changing within the parents region when the position is not set to fixed or absolute.
If you don't want to make the child fixed, you could try position:absolute; and set the parent to position: relative;
Like this...
.slide img {
position: absolute;
z-index: 2;
}
.slide {
position: relative;
}
Or you could try to only hide the overflow on 1 direction. Like overflow-y:hidden; Or overflow-x: hidden;
I'm not a css-smarty, I already tried some codes from the internet and stackoverf but still not helping.
How can I fix a div on the left side of page, image can be found down below.
Image: http://prntscr.com/fbhhdi (I selected position with red lines)
If the red outline in your screenshot is, for an example, a div with class="fix-this", then your css would be like this:
.fix-this {
position: fixed;
left: 0;
}
Position fixed will position your div relatively to the viewport.
Left: 0 will place it to the left.
Now, if you also want it to go full height, you can add:
.fix-this {
position: fixed;
left: 0;
top: 0;
bottom: 0;
}
I think it will solve your problem.
body {
background-color: #000;
height: 100%;
padding: 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#wrapper {
height: 100%;
}
.leftCol {
border: 2px solid red;
color: #fff;
float: left;
min-height: 400px;
height: 100%;
width: 250px;
}
.rightCol {
color: #fff;
float: left;
min-height: 400px;
height: 100%;
width: calc(100% - 254px)
}
<hr></hr>
<div id="wrapper" class="clearfix">
<div class="leftCol">
Content Here
</div>
<div class="rightCol">
Content Here
</div>
</div>
I'm using font awesome library. I would like to put horizontally center the Arrow icon. And DIVs must be absolute position.
I use this code but it doesn't work.
.arrow {
left: 0;
right: 0;
}
JSFiddle Demo
Use width:100% in absolute div
.home .center {
position: absolute;
bottom: 0;
top:30px;
text-align: center;
width:100%;
}
Updated fiddle
Here is working example. You can delete .arrow css rule because it does nothing.
.home {
margin: 0 auto;
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
max-width: 960px;
}
.home .center {
position: absolute;
width: 100%;
bottom: 0;
top:30px;
text-align: center;
}
I just changed into your CSS, and it works fine.
.home {
margin: 0 auto;
}
.home .center {
margin: 0 auto;
text-align: center;
}
.arrow
margin: 0 auto;
}
Cheers!
This should work,try it.
.home {
margin: 0 auto;
height: 100%;
width: 100%;
position: absolute;
margin: 0 auto;
max-width: 960px;
}
.center {
position: relative;
bottom: 0;
top:30px;
text-align: center;
}
.arrow
left: 0;
right: 0;
As an explanation why it works: well,the wrapper div must be absolute,and its content has to be relative to position what is inside of the wrapper as you please.In this way,will be easier for you if you want to add further relative divs
Try this:
HTML Code:
<div class="home">
<div class="center">
<a class="arrow fa fa-long-arrow-down fa-3x" href="#"></a>
</div>
</div>
CSS code:
.home {
margin: 0 auto;
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
max-width: 960px;
}
.home .center {
position: absolute;
bottom: 0;
top:30px;
text-align: center;
}
.arrow {
}
I'm trying to center a div vertically using line-height, without specifying a set pixel value for the line-height. I need the line-height to expand to the size of it's div. Using '100vh' works, but viewport units aren't widely supported widely enough. Setting the line-height to 100% doesn't seem to work. Here's my HTML:
<div class="background">
<div class="lightboxbg">
<div class="wrapper">
<div class="centerme"></div>
</div>
</div>
</div>
And my CSS:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.background {
width: 90%;
height: 100%;
background-color: AntiqueWhite;
}
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%
}
.centerme {
vertical-align: middle;
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
And here's a jsfiddle. The blue box would be centered if I could get the line-height of wrapper to expand to the height of wrapper, but I don't know how to go about doing that. Thanks for reading.
EDIT: Check out Nathan Lee's answer for a solution with table cells, Fredric Fohlin's for a pretty wild 'absolute positioning' answer, and MM Tac's for a solution using absolute positioning.
Here you go.
WORKING DEMO
The CSS Change:
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
display: table;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%;
display: table-cell;
}
Hope this helps.
Have a look at this idea. It may suit you: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
In your case the wrapper needs the relative positioning, and the "center me" the absolute positioning.
Replace .centerme with following css:
CSS:
.centerme {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px; /* negative-half of element's width*/
margin-top: -50px; /* negative-half of element's height*/
}
Here is a DEMO and here is a full page RESULT.
UPDATE
To center div for variable length is simple, just remove height, width, margin-left, margin-top reference from .centerme css.
.centerme {
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
}
Here is a UPDATED DEMO.
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.