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>
Related
I want to make the following element.
Basically an image in top of a page layout, and then a box on top of that image, containing a header and some more text.
But, what is the most optimal way of doing this in regards to responsiveness. I imagine something like the following markup
<div class="header">
<img src="myimage.png" alt="" />
<div class="text">
<h1>Header</h1>
<p>Lorem ipsum</p>
</div>
</div>
And then set .header to position relative, img to max-width of 100%, and .text to position absolute, bottom: -50%, left: 10% etc.
But this does not scale well, and absolute position seems to me, to be a bit invalid in regards to responsiveness. Also, there is content below the element, that should move accordingly to the amount of text, in the text element. If if is positioned absolute, that gets more tricky to manage.
Any ideas to another approach?
Try this:
img {
border: 2px solid black;
}
#container {
position: relative;
}
#example {
position: absolute;
top: 10px;
left: 10px;
padding: 5px;
background-color: white;
border: 2px solid red;
}
<div id="container">
<img src="http://i34.tinypic.com/4tlkci.jpg">
<div id="example">This is my div</div>
</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'm designing a web page with a small label off to the right of the body on some lines. For this, I created an absolute-positioned <div> inside of a relative-positioned one.
The label is appearing exactly as I want it. However, even though the absolute-positioned <div> dimensions are 0 x 0, it still is taking up some room on the line.
This can be seen at http://jsfiddle.net/sznH2/. I would like the two buttons to line up vertically. Instead, the button next to the label is pushed left a few pixels.
Can anyone see what is causing this spacing and how to eliminate it?
HTML:
<div>
<div class="pull-right">
<button>Hello world!</button>
</div>
</div>
<div>
<div class="pull-right">
<button>Hello world!</button>
<div class="outer-relative">
<div class="inner-relative">
<span>XXX</span>
</div>
</div>
</div>
</div>
CSS:
body {
width: 500px;
margin-left: auto;
margin-right: auto;
}
.pull-right {
text-align: right;
}
.outer-relative {
display:inline-block;
position:relative;
height: 0px;
width:0px;
}
.inner-relative {
position: absolute;
left: 0px;
top: -15px;
background-color: Lime;
}
Inline block elements will render the spacing between the tags. Check this out: http://jsfiddle.net/sznH2/4/
<button>Hello world!</button><div class="outer-relative"><div class="inner-relative"><span>XXX</span>
Remove the spaces and you're good to go
I think You Need to make pull-right postiton:relative
and outer-relative absolute
http://jsfiddle.net/tousif123/sznH2/3/
is this what are you looking for?
.pull-right {
position:relative;
}
.outer-relative {
position:absolute;
}
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>
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>