I am currently doing this with a table with 2 bottom-aligned cells. I am okay with the table solution, but just wondering if this is possible with (just css and html, no javascript).
Requirement:
* The sizes of the text and image are unknown, but the combined width of the two will not exceed the width of the containing element. (e.g. if i later want to change the image or the text, i do not want to dive into the ccs file)
* Image is aligned to the left, and the text (actually, a horizontal list) is aligned to the right.
Edit: In response to Kos,
the sizes of the text and images are dynamic, be it height or width, BUT the combined width of the two elements will not exceed the width of the containing element.
the image and text should be bottom aligned
the containing element should fit tightly the tallest element.
HTML
<div class="wrapper">
<img src="" class="image" />
<p class="text">Hello world!</p>
</div>
CSS
.wrapper {
position: relative;
width: 500px;
}
.image {
position: absolute;
display: block;
left:0;
bottom: 0;
}
.text {
position: absolute;
right:0;
bottom: 0;
}
EDIT: I added the appropriate HTML code.
EDIT 2: In case the height of the wrapper is unknown (only restriction is that .image has always to be higher than .text)
CSS
.wrapper {
position: relative;
width: 500px;
}
.image {
vertical-align: bottom;
}
.text {
position: absolute;
right: 0;
bottom: 0;
}
HTML
<div class="wrapper">
<img class="image" src="" />
<p class="text">
Hello world!
</p>
</div>
This should work I think:
HTML
<div class="outer">
<img src="" title="" />
<div class="text">Some text </div>
</div>
CSS
.outer {display: inline-block; width: 350px; }
.outer img {float: left;}
.outer .text {float: right; }
<div style="width:400px; overflow:visible; position:relative;">
<img src="#" alt ="#" style="float:left;"/>
<p style="position:absolute; bottom:0; float:right;">Lorem Ipsum</p>
</div>
Related
I want to put the play button (first img) centered to the second images. I can do it with position absolute and margin but how can that be dynamic? What if I'm in a loop and the height of the second images is not always the same?
<img src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/>
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/>
There are two solutions to do this
1) Put that image between paragraph tags and give style to that paragraph "text-align:center;", just like below
<p style="text-align:center"><img src="#url to your image"/></p>
2) Give style to that img tags margin:0px auto , just like below
<img src="#url to your image" style="margin:0px auto;"/>
you will need to add a parent for the images and position the play image absolute and set it top left 50% and set negative margin of half the width of the play image so that it align it vertically and horizontally
div {
margin: 30px;
position: relative;
border: 1px solid red;
}
img.main {
width: 100%;
height: auto;
vertical-align: middle;
}
img.play {
position: absolute;
top: 50%;
left: 50%;
margin: -63px 0 0 -63px;
}
.second .main {
height: 400px;
}
<p>with smaller height</p>
<div>
<img class="play" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png" />
<img class="main" src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg" />
</div>
<p>with larger height</p>
<div class="second">
<img class="play" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png" />
<img class="main" src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg" />
</div>
I have an image within a parent div. I also want to have some text underneath the image within that parent div, but I only want the width of that text div to be as large as the image.
<div class="parent">
<div class="child">
<div class="image-container">
<img src="..." />
</div>
<div class="text">
...
</div>
</div>
</div>
Here is a jsfiddle that illustrates my problem:
jsfiddle
How can I resolve this? I can't put the text inside the same div as the image because the image is cut off using a max-height css.
Is this what you were after? Can you use jquery?
$('.child').width($('.image-container').width());
http://jsfiddle.net/YRYZA/
I simplified your markup and css a little bit. You can keep them in the same parent. use position absolute for the text and add position relative to its parent. that way it will take the parent's width. and the parent's width will be set by whatever size the image is, hence the text will be the same width as the image at the end of the day.
html:
<div class="parent">
<div class="image-container">
<img src="http://lorempixel.com/400/600/" />
<div class="text">
text
</div>
</div>
</div>
CSS:
.parent {
width: 700px;
}
.image-container {
background: green;
float:left;
position: relative;
}
div.text {
background: green;
position: absolute;
width:100%;
left:0;
}
jsfiddle
Do this:
.child{ position: relative; }
.text{ position: absolute; left: 0px; right: 0px; }
Then .child div would be as wide as the image (not influenced by .text width) and .text would fit in the space.
JSFiddle: jsfiddle.net/8hV2E/12
I have several fluid images that I want to float and stack up next to each other. For example I have the img-div width set to 50% which stacks two images in each row. The images also increase in size depending on browser size. At the same time I want to be able to put a text over the middle of each image that floats around and stays in the center of the images. My problem is the text not centering. When I set img as absolute it centers but the stacking gets messed up.
Any idea how I can do this via CSS only?
Here's my HTML code:
<div id="container">
<!-- image1 -->
<div class="img-div">
<a href="#">
<img src="images/image1.jpg" />
<div class="txt-div">
<p>Some text goes here!</p>
</div>
</a>
</div>
<!-- image2 -->
<div class="img-div">
<a href="#">
<img src="images/image2.jpg" />
<div class="txt-div">
<p>Another text.</p>
</div>
</a>
</div>
<!-- image3 -->
<div class="img-div">
<a href="#">
<img src="images/image3.jpg" />
<div class="txt-div">
<p>Some more text.</p>
</div>
</a>
</div>
<!-- image4 -->
<div class="img-div">
<a href="#">
<img src="images/image4.jpg" />
<div class="txt-div">
<p>Last text.</p>
</div>
</a>
</div>
</div>
Here's my CSS:
.img-div {
width: 50%;
float:left;
a {
position: relative;
display: block;
height: 100%;
font-size: 0;
text-align: center;
}
a:before {
vertical-align: middle;
content: '';
display: inline-block;
height: 100%;
width: 0;
}
.txt-div {
vertical-align: middle;
position: relative;
z-index: 10;
display: inline-block;
font-size: medium;
p {
padding: 0;
margin:0;
}
}
img {
position: absolute;
width: 100%;
z-index: 9;
top: 0;
left: 0;
}
}
You almost had it :)
use position:relative/ absolute to draw your text-container over the image, and within use the pseudo :before and vertical-align technique to center your <p>.
.img-div {
width: 50%;
display:inline-block;
position: relative;
}
.img-div img {
width:100%;
}
a {
text-align: center;
}
.txt-div {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
}
.txt-div:before {
content:'';
padding-top:100%;
vertical-align:middle;
display:inline-block;
}
.txt-div p {
max-width:95%;
display:inline-block;
vertical-align:middle;
}
DEMO: http://codepen.io/gc-nomade/full/Cxkqf
remove the div around the p and set position:absolute; to the p set the img to position:relative; the p will now go over the img, if I'm correct. set text-align:center; to p to get it centered. (sometimes it might be good to width:100%; the p too)
You could use CSS background images to place each image in a dynamically sized div, then simply float the divs and they will fill in whatever space without altering position of the block level elements. In this case each div would get a unique id according to the image it would contain and the urls for your images would be a background image for the div. The only drawback to this that I can see is that if images were disabled you would not get alt text, but your divs would remain the specified size. and in their correct position.
I need to display an image on the top-right corner of a div (the image is a "diagonal" ribbon) but keeping the current text contained in an internal div, like stuck to the top of it.
I tried different things as including the image in another div or defining its class like:
.ribbon {
position: relative;
top: -16px;
right: -706px;
}
<div id="content">
<img src="images/ribbon.png" class="ribbon"/>
<div>some text...</div>
</div>
but without any luck. The best result I got was all the text scrolled down for the same height size of the image.
Any idea?
You can just do it like this:
<style>
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
</style>
<div id="content">
<img src="images/ribbon.png" class="ribbon" alt="" />
<div>some text...</div>
</div>
Position the div relatively, and position the ribbon absolutely inside it. Something like:
#content {
position:relative;
}
.ribbon {
position:absolute;
top:0;
right:0;
}
While looking at the same problem, I found an example
<style type="text/css">
#topright {
position: absolute;
right: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(TRbanner.gif) no-repeat;
text-indent: -999em;
text-decoration: none;
}
</style>
<a id="topright" href="#" title="TopRight">Top Right Link Text</a>
The trick here is to create a small, (I used GIMP) a PNG (or GIF) that has a transparent background, (and then just delete the opposite bottom corner.)
Try using float: right; and a new div for the top so that the image will stay on top.
Example below:
#left{
float: left;
}
#right{
float: right;
}
<div>
<button type="button" id="left" onclick="alert('left button')">Left</button>
<img src="images/ribbon.png" class="ribbon" id="right">
</img>
</div>
<p>some text...
the image is on the top right corner</p>
<p>some more text...</p>
This is what I'm trying to achieve
http://i.stack.imgur.com/e9xZa.jpg
I tried this
jsfiddle.net/RUSm3/
but as you can see the date overlaps on the image.
So I added left:215px for the date
jsfiddle.net/9aw29/
It looks good but perhaps I don't have an image. How can I get the date back to the far left? I'm trying to achieve this without php.
If you have a div like this
<div class="container">
<div class="date">today</div>
</div>
with this css fragment your date div will be positioned to the bottom right of it's container.
.container {
position:relative;
width: 100px;
height: 180px;
border: solid 1px black;
}
.date {
bottom:10px;
position:absolute;
right:10px;
}
You can verify it working here
I'm not sure what your markup is, but the easiest solution would be to have the heading, text and date all in one div (inside .entry), and float the image to the left if it's there. The date would be positioned as you have already done in your example. When there is no image, the entire div will move flush left.
<div class="entry">
<img [...] />
<div>
<h2>Heading</h2>
<p>Entry text</p>
<p class="date">[Date]</p>
</div>
</div>
Here is what I came up with and will probably be a good jumping-off point for you. In short, wrap the two text areas in their own divs, and wrap them in a parent div. Float the parent div to the right and make it's position something other than static. If the position is static, you cannot use the position: absolute attribute with it's children divs.
<style type="text/css">
div.entry{
float: left;
position: relative;
width: 40%;
}
img.left{
float: left;
}
div.right{
float: right;
display: inline;
position: absolute;
height: 100%;
width: 50%;
}
div.topRight{
}
div.bottomRight{
position: absolute;
bottom: 0px;
}
</style>
<div class="entry">
<img class="left" src="http://www.google.com/logos/2010/halloween10-ires.gif"/>
<div class="right">
<div class="topRight">
Some stuff
</div>
<div class="bottomRight">
Some other stuff
</div>
</div>
</div>