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;
...
}
...
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>
In a container element I have floated element and an absolutely positioned image that needs to protrude from container. However I need container to keep its height because it has a margin-bottom that separate it from the next block below it.
Problem: container's overflow: hidden cuts the image off so it cannot protrude from it. So I have to choose between 2 things I absolutely need: the image to protrude and container to keep its height.
How to solve this dilemma?
HTML
<div class='container'>
<div class='col1'>
content
</div>
<div class='col2'>
<img src='whatever.jpg'/>
</div>
</div>
CSS
.container {
overflow: hidden;
}
.col1,
.col2 {
float: left;
width: 50%;
}
.col2 {
position: relative;
}
img {
position: absolute;
top: -100px;
left: -100px;
}
Is the overflow to contain the floats? If so there are several other methods.
These can be found here
The modern method is:
.container:after {
content:"";
display:table;
clear:both;
}
.container {
width: 80%;
border: 1px solid grey;
margin: 100px auto;
background: pink;
}
.container:after {
content: "";
display: table;
clear: both;
}
.col1,
.col2 {
float: left;
width: 50%;
height: 150px;
}
.col2 {
position: relative;
background: #c0ffee;
}
img {
position: absolute;
top: -100px;
left: -100px;
}
<div class='container'>
<div class='col1'>
content
</div>
<div class='col2'>
<img src='http://www.fillmurray.com/200/200' />
</div>
</div>
I have 4 divs containing images, absolute positioned totalling 100% width.
This is due to the user wanting to use the full width of the page in all browsers.
I need to position a div underneath it, also with 100% width, which expands/contracts at the same rate with the browser.
I understand floating isn't an option.
Desired layout:
[img1][img2][img3][img4]
[ content ]
-------100% width-------
HTML
<div id="container">
<div id="image1"><img src="images/1.jpg"></div>
<div id="image2"><img src="images/2.jpg"></div>
<div id="image3"><img src="images/3.jpg"></div>
<div id="image4"><img src="images/4.jpg"></div>
</div>
<div id="content">
</div>
CSS:
#container{
width: 100%;
position: relative;
height: auto;
}
#image1 {
width: 25%;
position: absolute;
right: 50%;
}
#image2 {
width: 25%;
position: absolute;
right: 75%;
#image3 {
width: 25%;
position: absolute;
left: 50%;
}
#image4 {
width: 25%;
position: absolute;
left: 75%;
}
#content {
width: 100%;
height: auto;
}
img {
max-width: 100%;
height: auto;
}
Used to this method
Live Demo ---------------------------- Demo-two
Css
#pic-container{
font-size:0;
}
#pic-container img{
width:25%;
vertical-align:top;
}
HTML
<div class="container">
<div id="pic-container">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
</div>
</div>
<div class="container">
herer is the your content
</div>
Live Demo
If I am not wrong look at your CSS code:
you forget to put closing "}" of your #image2 .
it must look like this now.
#image2 {
width: 25%;
position: absolute;
right: 75%;
}
hope it helps.
I have a figure with a percentage-based with. Within that box, I have an image with a transparent background. I need to center it horizontally, and pin it to the bottom of the container, while allowing the top to break out of the container (see image).
I can use absolute positioning to pin it to the bottom and break out of the top, but I can't get it centered. Is there a way to do it when I won't know the width of the image and the width of the container is flexible? Is display:table a possibility?
My Code:
<figure class="feature">
<a href="#">
<img src="image" />
<p class="title-bar">Caption</p>
</a>
</figure>
.figure { position: relative; width: 50%; }
.figure img { position: absolute; bottom: 0; }
Please, check this fiddle, there is 2 variants to center an image
http://jsfiddle.net/GSKFD/
Markup is the same
<figure>
<a href="">
<img src="http://placekitten.com/200/300" alt="" />
</a>
</figure>
General style for both methods
img{
vertical-align: bottom;
}
First variant
figure{
position: relative;
width: 50%;
height: 300px;
background: #cad;
}
figure a{
position: absolute;
bottom: 0;
left: 50%;
}
figure img{
position: relative;
left: -50%;
}
And the second one
figure{
position: relative;
width: 50%;
height: 300px;
background: #cad;
}
figure a{
position: absolute;
width: 100%;
left: 0;
bottom: 0;
text-align: center;
}
You can do this with pure CSS, but you need two additional divs to hold and position the elements.
Here's the CSS:
.featureHolder {
position: relative;
/* height can be anything */
height: 200px;
}
.feature {
margin: 0;
overflow: visible;
/* width can be anything */
width: 60%;
height: 100px;
background: #cccccc;
position: absolute;
bottom: 0;
}
.imageHolder {
text-align: center;
width: 100%;
position: absolute;
bottom: 0;
}
img {
margin-bottom: -5px;
}
Here's the HTML:
<div class="featureHolder">
<figure class="feature">
<div class="imageHolder">
<a href="#">
<img src="img" />
</a>
</div>
Caption
</figure>
</div>
Caption also can be positioned within the same a tag as the image, but in this example it's separated out so I didn't have to mess with it.
Here's a demo in JSFiddle - give .feature any width and img should still center. (BTW your CSS isn't right - it should be either 'figure' or '.feature', but can't be '.figure' as figure is an element with class name 'feature'.)
Basically you need to do a left: 50% then margin-left: -whatever the width of the image is. This will position it center in your relative div. My example assumes you do not know the width of the image.
http://jsfiddle.net/rVRT4/2/
http://jsfiddle.net/rVRT4/2/embedded/result/
$(document).ready(function(){
var width = $(".figure img").width();
$(".figure img").css("margin-left", -(width/2));
});
.figure { position: relative; width: 50%; height: 500px;}
.figure img { position: absolute; bottom: 0; left:50%;}
<div class="figure">
<a href="#">
<img src="http://i.stack.imgur.com/4TtEY.jpg" />
<p class="title-bar">Caption</p>
</a>
</div>