I have the following HTML code:
<div id="divFather" class="clsFather">
<div class="clsSon">
<img src="A.png">
<img src="B.png">
</div>
<div class="clsSon">
<img src="A.png">
<img src="B.png">
</div>
</div>
And this is the .css file:
.clsSon{
float: left;
width: 50%;
text-align: center;
position: relative;}
.clsSon img{
position: absolute;
top: 0px;
left: 0px;}
With this, I am trying to have two divs in one row, with two overlaped images in each div. But instead of that, I get four images overlaped in only one place. I want to get 2 + 2 overlaped images in one row of two divs. How can I get it?
like this?
.clsSon {
float: left;
height: 160px;
width: 160px;
text-align: center;
position: relative;
}
.clsSon img {
position: absolute;
top: 0px;
left: 0px;
}
<div id="divFather" class="clsFather">
<div class="clsSon">
<img src="http://source.unsplash.com/160x160">
<img src="http://source.unsplash.com/160x160/?mountain">
</div>
<div class="clsSon">
<img src="http://source.unsplash.com/160x160">
<img src="http://source.unsplash.com/160x160/?mountain">
</div>
</div>
Finally, I was able to do it in this way:
.clsSon{
float: left;
text-align: center;
position: relative;
height: 160px;
width: 50%;}
.clsSon img{
position: absolute;
margin: auto;}
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>
I don't know the height of parent element.
I aligned child div vertically using:
position: absolute;
top: 50%;
transform: translateY(-50%);
How can I align div in the same way in top10%-part? Child div should start after 10% of parent div vertically.
.text-image.flag {
width: 25px;
height: 25px;
position: absolute;
margin-left: 0px;
margin-right: 0px;
top: 50%;
transform: translateY(-50%);
float: right;
right: -5px;
background: url(/flag.png) 0 0 no-repeat;
}
<td class="firstColumn wide-cell index-cell tall-cell sorting_1">
<div class="inner-wrapper" style="position: relative;">
<div class="table-tooltip" index="7">
<a href="">
<div class="text-image">
Real, Student
</div>
<div class="text-image flag"></div>
</a>
</div>
</div>
</td>
I want to have top 10% from firstColumn, not from inner-wrapper.
You could add a <div id="container> around all of the relevant code, and style it like position: relative; so you can use position: absolute; on the child div, because absolute positioning only works if its parent is not statically positioned.
I guess this will help you.
.parent {
border: 1px solid #ccc;
width: 200px;
height: 200px;
display: table;
}
.child {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<div class="parent">
<div class="child">
This is content.
</div>
</div>
I'm having a rough time trying to position things in CSS. I understand padding,margin,height,width which to me seems like it should be enough to organize nested div boxes, but unfortunately it doesn't seem to be that easy for me.
Anyway, in my example below, the profile picture is bigger than the actual div it's contained in.
What am I doing wrong here?
CSS
.mailcontainer{
top: 40px;
width:600px;
height: 100%;
width: auto;
position: relative;
background-color:green;
}
.mail {
margin: 5px auto;
width: 700px;
height: 40px;
z-index: 100px;
overflow: hidden;
background-color: #d3d3d3;
position: relative;
border-radius: 6px;
}
.leftprofileimage img {
float: left;
max-height: 100%;
width: auto;
position: absolute;
border-radius: 90px;
}
.snippet {
float: right;
top: 10px;
width: 55%;
margin-left:26%;
position: absolute;
}
.sendername {
font-size: 1.0em;
width: 26%;
padding: 9px 0;
margin-left: 15%;
position: absolute;
}
HTML
<div class="mailcontainer">
<div class="mail">
<div class="leftprofileimage"><img src="https://s3.amazonaws.com/BodegaMagazine/StaffPhotos/Small/eric-small-profile-photo.jpeg" alt="" /></div>
<div class="sendername"><a href="/">Jeff
</a></div>
<div class="snippet">
Hello this is a test message</div>
<div class="delete"><p>DELETE</p></div>
</div>
<div class="mail">
<div class="leftprofileimage"><img src="https://s3.amazonaws.com/BodegaMagazine/StaffPhotos/Small/eric-small-profile-photo.jpeg" alt="" /></div>
<div class="sendername"><a href="/">Jeff
</a></div>
<div class="snippet">
Hello this is a test message</div>
<div class="delete"><p>DELETE</p></div>
</div>
http://codepen.io/pen/
Your profile picture is 40x40, and the nearest positioned parent is .mail, which is also 40px. The profile pics immediate parent (.leftprofileimage) was not explicitly positioned, so that's probably where the confusion lays. This codepen simply adds rules to .leftprofileimage to make it the element that profile pic conforms to:
http://codepen.io/sean9999/pen/xypBb
There are some DIVs and SPANs with text defined widths. I need to define their exact position according to TOP/LEFT. But it is not possible with "inline-block" option.
How to set exact position with top/left and maintain their width defined width of the text ?
jsFiddle example
HTML
<div id="container" style="float: left; margin-right: 10px;">
<span id="test1">aaa</span>
<span id="test2">bbb</span>
<span id="test3">ccc</span>
</div>
<div id="container" style="float: left;">
<div id="test1">aaa</div>
<div id="test2">bbb</div>
<div id="test3">ccc</div>
</div>
CSS
#container {
width:300px;
height:300px;
background-color: #efefef;
}
#test1{
position: relative;
top: 100px;
left: 0px;
display: inline-block;
}
#test2{
position: relative;
top: 0px;
left: 0px;
display: inline-block;
}
#test3{
position: relative;
top: 0px;
left: 0px;
display: block;
}
Set the wrapper position to relative
#container {
position: relative;
...
}
and then set the inside divs position to absolute
#test1 {
position: absolute;
...
}
...
I have a odd problem while working on a small site.
I can't get my wrapper to wrap around all of my other divs correctly. My code looks like this:
<body>
<div id="wrapper">
<div id="header">
<div id="menu">
</div>
</div>
<div id="content">
<div id="text">
<form></form>
</div>
<div id="contact"><img />
<map name="Map" id="Map">
</map>
</div>
</div>
<div class="clear"></div>
</div>
</body>
And the CSS:
body {
margin: 0px;
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
}
#wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 0px;
}
#header {
height: 560px;
width: 1190px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/Header.jpg);
background-repeat: no-repeat;
}
#menu {
width: 640px;
position: relative;
left: 350px;
top: 115px;
}
#content {
width: 1190px;
margin-left: auto;
margin-right: auto;
position: relative;
top: 10px;
}
#text {
width: 550px;
float: left;
margin-bottom: 20px;
position: relative;
left: 180px;
}
#contact {
float: left;
margin-bottom: 20px;
position: relative;
left: 230px;
top: 50px;
}
.clear {
clear: both;
}
The wrapper seem to wrap on some of my pages but not all, and if I specify the size of the image in #contact it will fail on the other pages aswell. However, it does wrap the #text div.
Am greatly pleased for any help!
Best Regards
Robert
The position: relative; style attached to the contact div is messing up the wrapper near the bottom. If you remove that style and then switch out the offsets to be margins instead, the wrapper div now wraps correctly across all the content divs. I have set up an example with your code here:
http://jsbin.com/eqecev/2/edit#preview
Add overflow:auto; to your wrapper div's CSS.