Am trying to position div in bottom of another div but unable to do that
<div class="div">
<img src="dual.png"/>
<h1>Boot From a CD or USB Drive on Any PC</h1>
<div>footers</div>
</div>
CSS
.div{
float:left;
height:300px;
width:22%;
margin-top:15px;
margin-left:15px;
background-color: #e4f2ff
}
.div img{
width:100%;
height:180px;
}
.div h1{
font-size:20px
}
.div div{
background:red;
float: bottom;
position: absolute;
bottom: 0;
}
here is
jsfiddle
trying to make design like this http://i.stack.imgur.com/CdGKY.png
Can someone help me how to position div at bottom of parent div..
thanks in advance
Display:table could help you : http://jsfiddle.net/j1raqvc8/4/
.div {
float:left;
height:300px;
width:22%;
margin-top:15px;
margin-left:15px;
background-color: #e4f2ff;
display:table;
}
.div img {
width:100%;
height:180px;
}
.div h1 {
font-size:20px;
margin:0
}
.div div {
background:red;
display:table-footer-group;
}
<div class="div">
<img src="dual.png" />
<h1>Boot From a CD or USB Drive on Any PC</h1>
<div>footers</div>
</div>
But it will allow the box to grow taller than 300px if content needs more height http://jsfiddle.net/j1raqvc8/5/ .
Remove position:absolute solve your problem.
Note: also try to make your class name more clear.
Delete
position: absolute;
bottom: 0;
float: bottom;
From Css selector
.div div{
So it would be like:
.div div{
background:red;
}
This also depends how you want it to flow. But since you had absolute in there I went with that.
Add position: relative; to the parent.
Take your float: bottom; (no such thing) away from the footer div.
.div {
float: left;
height: 300px;
width: 22%;
margin-top: 15px;
margin-left: 15px;
background-color: #e4f2ff;
position: relative;
}
.div img {
width: 100%;
height: 180px;
}
.div h1 {
font-size: 20px
}
.div div {
background: red;
position: absolute;
bottom: 0;
}
<div class="div">
<img src="dual.png" />
<h1>Boot From a CD or USB Drive on Any PC</h1>
<div>footers</div>
</div>
you got several failures in your code. as a suggestion never name a div class div, furthermore there is no float: bottom.
you need to add a position: relative to the parent element to use position: absolute in a child element.
.top{
float:left;
height:300px;
width:22%;
margin-top:15px;
margin-left:15px;
background-color: #e4f2ff;
position: relative;
display: block;
}
.div img{
width:100%;
height:180px;
}
.div h1{
font-size:20px
}
.footer {
background:red;
position: absolute;
bottom: 0;
left: 0;
}
<div class="top">
<img src="dual.png"/>
<h1>Boot From a CD or USB Drive on Any PC</h1>
<div class="footer">footers</div>
</div>
Related
I have to make a div follow an image and sit on its center vertically and horizontally when responsive. I simply have no idea or don't think whether it is possible only by css. Any help is appreciated
.imageWrapper {
height:200px;
width:200px;
position:relative;
margin:50px auto 0px auto;
}
.imageWrapper > div:first-child {
position:absolute;
z-index:1;
top:0px;
left:0px;
right:0px;
bottom:0px;
overflow:hidden;
}
.imageWrapper > div:first-child img{
height:200px;
width:100%;
object-fit:cover;
position:relative
}
.imageWrapper > div:last-child {
position:relative;
z-index:2;
text-align:center;
line-height:200px;
height:200px;
width:100%;
}
<div class="imageWrapper">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Billede_084.jpg"></div>
<div><p>bla bla</p></div>
</div>
make a wrapping div, make the image absolute as a background and place the text in front of the image.
Well you can make good use of an old trick to center element using position property.
as usual an example is better than an explanation.
.html
<div class="parent">
<div class="child"></div>
</div>
.css
.parent {
position: relative;
width: 100%;
height: 200px;
background-color: lightblue;
}
.parent .child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background-color: grey;
}
I want to position my anchor to middle (vertical) inside a fixed div.
I can't use display:table/table-cell because of other content inside my div, so I thought line-height would be the best alternative.
My problem is that the anchor will stretch out when I put line-height with it, but only if it's floated.
HTML:
<div class="fixed">
<a class="btn" href="#">btn1</a>
</div>
CSS:
.fixed
{
height: 100px;
width: 100%;
background-color:grey;
position:fixed;
}
.btn
{
padding: 3px 9px;
background-color:red;
color:white;
line-height:100px;
float:right;
}
JSfiddle: https://jsfiddle.net/828zrzrk/
add display:block;
change padding value.
.fixed
{
height: 100px;
width: 100%;
background-color:grey;
position:fixed;
top:0;left:0;
}
.btn
{
display:block;
padding: 0 9px;
background-color:red;
color:white;
line-height:100px;
float:right;
}
<div class="fixed">
<a class="btn" href="#">btn1</a>
</div>
is this what you need?
```
.btn {
**
width: WIDTH;
height: HEIGHT;
position: absolute;
left: 50%;
top: 50%;
margin-top: -WIDTH/2;
margin-left: -HEIGHT/2;
}
```
Demo
i want to center a image and place some text under it.
The picture should be everytime in the middle of the screen, doesnt matter how i scale the viewport. Also the text has to be under the picture everytime.
The Backgroundcolor has to be #EF762F
It worked for me on one screen with this
https://jsfiddle.net/j2Lec36d/ , but if i watch it on another screen, with other resolution, the text is not centered under the image anymore.
Also the span has to be positioned absolute left with -100%, jQuery slides it then to 50%
HTML:
<div id="sh_start">
<img src="test.jpg"></img>
<span>Test</span>
</div>
CSS:
body, html { font-family: arial; font-size: 12px; margin:0; padding:0; width: 100%; height: 100%; background-color:#fff;overflow:hidden;}
#sh_start img {display: block;padding:5% 0 0 30%;width: 40%; height: auto; position:absolute; top:5%;left:0; right:0; bottom:0;}
#sh_start span {width: 100%; height: auto;display:block;position:absolute;top:58%;left:50%; color:#fff; font-family:ReplicaPro-Bold;font-size:50px;opacity:0.4;}
#sh_start {display:block;background-color:#EF762F;position: absolute; top:0;left:0;width:100%; height: 100%; overflow:hidden;}
You can do this quite simple using flexbox:
$(document).ready(function(){
$( "#sh_start span" ).animate({
left: "50%",
left: "toggle"
}, 5000, function() {
// Animation complete.
});
})
#sh_start img {display: block;width: 40%; height: auto; }
#sh_start span{width: 100%; height: auto;display:block; color:#fff; font-family:ReplicaPro-Bold;font-size:50px;opacity:0.4;
position: relative; left: 100%;
}
#sh_start {display:block;background-color:#EF762F;position: absolute; top:0;left:0;width:100%; height: 100%; overflow:hidden;display:flex;align-items: center; justify-content: center;flex-direction: column;text-align: center;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="sh_start">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQNjQ76c71y3CL0xrOhpl3wf3W5X3Mi3ddv1SUH3UbkPBz3SWPAuw">
<span>Test</span>
</div>
You can try to use the framework bootstrap and do like this:
HTML:
<div class="container">
<div class="row text-center">
<div class="col-lg-12">
<img src="http://placehold.it/700x400" class="img-responsive" alt="">
<h1>Text under image</h1>
</div>
</div>
</div>
CSS:
img {
margin: 0 auto;
}
The image CSS:
#sh_start img {
display: block;
padding: 5% 0 100px 0;
width: 40%;
height: auto;
margin: 0 auto;
}
The span CSS:
#sh_start span {
width: 100%;
height: auto;
display: block;
position: relative;
bottom: 20px;
// left: -100%;
left: 0;
color: #fff;
font-family: ReplicaPro-Bold;
font-size: 50px;
opacity: 0.4;
text-align: center;
}
And the container CSS:
#sh_start {
background-color: #EF762F;
}
You can just animate the left property of the span from 100% to 0.
You can see the code in action here: https://jsfiddle.net/7pnrq1xd/1/
I'm not entrirely sure what your restrictions are or if they are restrictions at all but why not just do this to your span:
left:0;
text-align:center
#sh_start {
display:block;
background-color:#EF762F;
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
overflow:hidden;
}
#sh_start img {
display: block;
padding:5% 0 0 30%;
width: 40%;
height: auto;
position:absolute;
top:5%;
left:0;
right:0;
bottom:0;
}
#sh_start span{
width: 100%;
height: auto;
display:block;
position:absolute;
top:58%;
left:0;
color:#fff;
font-family:ReplicaPro-Bold;
font-size:50px;
opacity:0.4;
text-align:center;
}
<div id="sh_start">
<img src="test.jpg"></img>
<span>Test</span>
</div>
First Create a DIV Tag where you will place both your image and caption.
<div class="imagewrapper">
<img src="imagehere.jpg">
<p class="imagecaption">Image Caption Here</p>
</div>
Now Code your CSS Something like this.
.imagewrapper {text-align:center}
.imagewrapper img {max-width:100%}
Do not forget to add styling for your image caption class. With above code your image and text will stay in center on any screen size.
Hope that helps.
Regards
Manoj Soni
I have removed the position:absolute declarations, and compacted the CSS code
#sh_start
{
background-color:#EF762F;
width:100%;
height: 100vh;
float:left;
}
#sh_start img, #sh_start span
{
float:left;
width:40%;
height:auto;
margin-top:5%;
margin-left:30%;
text-align:center;
}
#sh_start span
{
color:#fff;
font-family:ReplicaPro-Bold;
font-size:50px;
opacity:0.4;
margin-top:1px;
}
Then in the HTML I have fixed the 'img' closing tag.
<div id="sh_start">
<img src="test.jpg" />
<span>Test</span>
</div>
Live demo: https://jsfiddle.net/j2Lec36d/10/
I am just a beginner in HTML/CSS
How to stop the floating div from overlapping.
jsfiddle-link
HTML
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
.left {
float: left;
height: 500px;
width: 300px;
background: #fff;
position: absolute;
}
.right {
float: right;
height: 500px;
width: 300px;
background: #000;
}
Use widths in percentages and remove the absolute positions:
Here is the updated CSS:
*{
margin:0;
padding:0;
}
body{
width:100%;
}
.wrapper {
width: 100%;
}
.left{
float:left;
height:500px;
width:50%;
background:#fff;
}
.right{
float:right;
height:500px;
width:50%;
background:#000;
}
I have also wrapped left and right divs in a wrapper div
Check it here: https://jsfiddle.net/2Lk13045/2/
You set your width fixed instead of 100%.
https://jsfiddle.net/2Lk13045/1/]
Changed your
body{width:100%; }
to
body{width:600px; }
I'm trying to center a div inside a parent div based on the dimensions of the parent div. I have tried using:
display: inline-block;
because I have seen other questions where this was used to center the div but I am not having luck.
BOX1 should be centered insdie of test
<div class="tab-pane" id = "test">
<div id="Box2">
<h1> Graph Text </h1>
</div>
<div id="BOX1">
</div>
</div>
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
display: inline-block;
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
http://jsfiddle.net/bahanson/xvL2qvx0/5/
try this :demo
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
margin:0 auto;
width: 500px;
height: 300px;
background: lightgrey;
position:relative;
z-index:1;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
<div id="test" class="tab-pane">
<div id="BOX1">
<div id="Box2">
<h1> Graph Text </h1>
</div>
</div>
</div>
Adding this to the box 1 css does what you want and will keep the child centered if the parent width changes.
left: 50%;
margin-left: -250px;
http://jsfiddle.net/xvL2qvx0/6/
If you don't need IE8 support you can just use:
left: calc(50% - 250px);
You should read up on normal flow and CSS positioning.
http://webdesign.about.com/od/cssglossary/g/bldefnormalflow.htm
But basically, a div will always position relative to the parent div.
If you add margin: 0 auto; to a div, it should horizontally position it within the parent div
#BOX1 {
display: inline-block;
margin-left:100px;
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
}
use margin-left command to adjust it to the centre....
Seen as though you are using absolute positioning you can simply give it a top,right,left and bottom of 0 and use margin:auto to centre it both horizontally and vertically.
This benefits from be able to use relative (percentage) sizing if you want and there's no maths involved. Furthermore, if you later change the dimensions (maybe via a media-query for mobile devices) you don't need to recalculate messy margins or offsets - just change the size and it will be centred.
#BOX1 {
display: block;
width: 500px; /* it will still work if you change the size */
height: 300px; /* the dimensions could be percentages if you like */
background: lightgrey;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
http://jsfiddle.net/xvL2qvx0/7/
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
<div class="tab-pane" id = "test">
<div id="Box2">
<h1> Graph Text </h1>
</div>
<div id="BOX1">
</div>
</div>