I wanna set one div to be shown on another one.
I can do it by enter it in end of html code after other one,but I wanna do it by css.
how can I do it?
I'm guessing this is what you mean: having the divs overlap when placed one after the other in the markup? You can achieve this by making them position: absolute.
<div id="div1">
</div>
<div id="div2">
</div>
#div1, #div2 {
position: absolute;
}
#div1 {
background-color: red;
width: 100px;
height: 100px;
}
#div2 {
background-color: blue;
width: 100px;
height: 100px;
top: 5px;
left: 5px;
}
Related
Hello I need to position an image as in the example. Theoretically it looks like it is positioned over 2 seperate boxes with different background colors, that is the goal, but practically it is not possible, at least for me. How to solve the problem?
Usually you'd do this with flex and vertical alignment, but since you want specifically the image to be between boxes i'd say absolute is the way to go here
.card {
display: block;
margin-left: 80px; /* image width + 20px */
}
.header, .image-container {
display: block;
margin: 0;
}
.header h1 {
margin: 0;
}
.image-container {
height: 1px;
position: relative;
}
.image-container .image {
display; inlnie-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: purple;
position: absolute;
top: -50%;
left: -10px;
transform: translateY(-50%) translateX(-100%);
}
<div class="card">
<div class="header">
<h1>Header</h1>
</div>
<div class="image-container">
<div class="image"></div>
</div>
<div class="header">
<h1>Header 2</h1>
</div>
</div>
The simplest solution will be using a combination of an of z-index and position:absolute.
*A small suggestion if you may encounter the problem: you must use z-index with specifying the position (position: static will not work)
img {
width: 100px;
height: 100px;
z-index: 99;
position: absolute;
}
div {
background-color: black;
z-index: 1;
width: 200px;
height: 100px;
position: absolute;
top: 10px;
left: 5px;
}
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png'>
<div></div>
How can I achieve the styling shown in the picture? Consindering the following scenario: I got 2 nested div elements, by which the parent is "relative positioned" and the child is "absolute positioned"! And the child div is always "fixed to the bottom" of the body element, when browser is scaled. I don't get this to work...
Here is the code, where I am using padding-bottom: 100%. But this is not a good solution! Is there a way to realise this with only CSS 2.1 API?
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 440px;
left:200px;
background-color: blue;
position: relative;
}
.child {
display: block;
position: absolute;
width: 100px;
right:0px;
background-color: yellow;
padding-bottom: 100%;
}
<body>
<div class="parent">
<div class="child">Fix to bottom</div>
</div>
</body>
Don't take 2nd div as child. You want it to stick to bottom and parent div's height will disturb it while scalling.
I hope this helps :)
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 400px;
left:100px;
background-color: blue;
position: relative;
top:70px;
}
.another-parent {
display: block;
height:60%;
position: absolute;
bottom:0;
width: 100px;
right:22%;
background-color: yellow;
}
<body>
<div class="parent"></div>
<div class="another-parent">Fix to bottom</div>
</body>
I'm having many issues regarding the positioning of div boxes in HTML and CSS. I have got a wrapper and 2 boxes. I want one box on the left and the other on the right, however the box on the right appears under the others. Why is this? I don't want to use "top" as it messes with a few other things. What do I do?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="wrapper">
<div id="navbar"></div>
<div id="newsbar"></div>
</div>
</body>
</html>
#wrapper
{
position: relative;
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
}
FIXED:
#wrapper
{
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
float: left;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
float: right;
height: 100%;
width: 15%;
background-color: #A13927;
}
The default display for a div is: "display: block".
Blocks don't obey "width" style and span as 100%. The following elements are put below the block-displayed div.
Try adding the style to your divs as "display: inline-block" (i.e. to those divs you want to see consecutive).
EDIT: did not fully understand the question fully. BESIDES doing what i told, you can put "float: left" and "float: right" to those divs if you want them to stick to the left and right respectively.
add Float:left and float:right:
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
float:left;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
float:right;
}
The answer to your question is because the elements are position relative to each other.
You have multiple "solutions":
1) float your elements. See JSFiddle
E.g.
#newsbar
{
float: right;
width: 15%;
background-color: #A13927;
}
2) Change your positioning to be fixed, but likely you want absolute. See JSFiddle
E.g.
#newsbar
{
position: absolute;
right:0;
width: 15%;
background-color: #A13927;
}
3) Other options as well (display: table-cell, et cetera)
You have a ton of solutions for this one. Here are three ways of doing it, each method will produce slightly different results. jsFiddle
HTML:
<div class="method-1">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-2">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-3">
<div class="left">
</div>
<div class="right">
</div>
</div>
CSS:
div div {
height: 10em;
width: 15%;
border: 1px solid red;
}
div.method-1 div {
display: inline-block;
}
div.method-2 {
height: 10em;
}
div.method-2 div {
position: absolute;
display: block;
}
div.method-2 div.right {
left: 15%;
margin-left: 1em;
}
div.method-3 {
display: table;
width: 30%;
}
div.method-3 div {
display: table-cell;
}
In the following html/css code:
<div class="blue">
<div class="red">
<div class="yellow">
1
</div>
<div class="yellow">
2
</div>
</div>
</div>
.blue { background-color: blue; height: 150px; width: 100px; margin: 100px; }
.red { background-color: red; height: 100px; width: 500px; margin-left: -50px; }
.yellow { background-color: yellow; height: 50px; }
I need to give .yellow the same width as .blue, but without using fixed px (as .blue is responsive and can change it's width) and without using position: absolute; as the two yellow must not overlap.
Expected result: http://jsfiddle.net/kPg97/3/
This doesn't work as it uses fixed px:
.yellow { width: 100px; float: left; }
This doesn't work as the first .yellow isn't visible:
.yellow { position: absolute; width: 100%; left: 0px; }
Probably with jquery, you can do like this :
$(document).ready(function(){
var width = $(".blue").width();
$(".yellow").width(width);
});
You can do without jquery, you may have understood though.
Please note a display:inline; and float:left were used. Hope they won't conflict with your interest.
Jsfiddle here
I have a in my webpage which carries 2 images. I want one image to be aligned left and other to the right end of the division.
The JsFiddle
Here's my HTML:
<div class="header">
<img id ="ttl" src="Home_files/images/ttl.png">
<img id ="se" src="Home_files/images/se.png">
</div>
and CSS:
.header {
position: relative;
top: 0%;
height: 20%;
}
/*Header CSS*/
img#ttl {
position: relative;
top:50%;
height: 50%;
left: 0px;
}
img#se {
position: relative;
top:60%;
height:30%;
vertical-align:right;
margin-right: 2%;
}
PS: I tried float:right;. Its works in in Chrome and FF but not in IE.
And ofcourse this div has a parent div. But I don't think that will be a problem.
You can wrap the images inside a position relative container and use position: absolute; to position them to bottom left and bottom right
Demo
<div class="wrap">
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
div.wrap {
width: 600px;
border: 1px solid #f00;
height: 300px;
position: relative;
}
.wrap img {
border: 1px solid blue;
position: absolute;
bottom: 0;
}
.wrap img:nth-of-type(1) {
left: 0;
}
.wrap img:nth-of-type(2) {
right: 0;
}
Note: Am using nth-of-type to select images so that I don't have to
declare classes for each image, if you want to support older browsers,
you need to add class for each image and replace :nth-of-type with
those classes
try this
<div class="header">
<div class="left"><img id ="ttl" src="Home_files/images/ttl.png"></div>
<div class="right"><img id ="se" src="Home_files/images/se.png"><div>
</div>
CSS
.left{
float:left;
}
.right{
float:right;
}
Demo
I used a table in a basic HTML header div for an email. It worked fine. In tr, had one image on left as td and another on right with float: right in another td.