Basically I have two pieces of text and an image.
<div class="container">
<span class="title">Text</span>
<img src="an_image.png" />
<span class="note">Other Text</span>
</div>
I want all the elements to be at the bottom of the container div, the title to aligned to the left, and the note all the way to the right. The image will be right next to the title and aligned to the bottom of the title text. So far the only way I have gotten this to work is by using relative/absolute position. Is there a way to do this with CSS?
Here is an image of what I am trying to accomplish. I can change the width and height of the container and the title, image, and notes will align properly to the bottom, left, and right just like so:
Try this
<style type="text/css">
.container { vertical-align: baseline; position: relative; border: solid 1px Gray; }
.note { position: absolute; right: 0; bottom: 0; }
</style>
<div class="container">
<span class="title">Text</span>
<img src="an_image.png" height="100" width="100" />
<span class="note">Other Text</span>
</div>
Sorry, Updated solution... Here's the working link
You can try to play around with the vertical-align, but it's kinda evil..i usually use the absolute position. You can test by yourself on the W3C Tryit Editor
Related
i created a jsfiddle: https://jsfiddle.net/ro2egff7/3/
html:
<div class="updated">
a lot of text
<span style="display:block; position:relative; float:right;">
<img src="~/Images/ic_cancel_black_18dp.png" >
</span>
</div>
<div class="updated" >a lot of text</div>
.css
.updated {
padding:5px 0px 5px 0px;
word-break: normal;
background-color: white;
top:0;
position:relative;
}
there you can see that my icon will be cut off because of the end of the first div.
How can i achieve that that icon is everytime at the rigth corner of the div, but wont cut off. If the line is full of text its ok that a new line, just with the icon in the right corner, will be created. But normally the icon should be in the same line at the end of the text.
Thanks for your help.
Make a clearfix of the second div. Just add clear: both; to .updated
Instead of wrapping your image with a span, just give it display:inline-block:
<div class="updated">
a lot of text
<img src="~/Images/ic_cancel_black_18dp.png" style="display: inline-block" >
</div>
Here is an updated fiddle.
Based on my earlier thread I'm trying to use and understand the recommended way to align two divs horizontally using the overflow element.
With my short text the two divs align correctly, but when I add loner text it drops below the image. Can anyone explain why this is happening and how do I fix it?
My JSFIDDLE
HTML:
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
CSS:
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
padding:5px;
float: left;
}
div.right {
float: left;
}
.thumb-small{
width:35px;
height:35px;
border: 1px solid #B6BCBF;
}
Floats expand to try to encompass their content. They generally expand up to the width of the containing region, regardless of how they are positioned. That is why it is going to a new line when the text is really long.
For what you are doing, I believe you want the image to the left of some text. This is done by having the outer region set with clearfix CSS (to always encompass all floats):
.container {
overflow: hidden;
min-width: 1px;
}
/* IE7+ */
*+html .container {
min-height: 1%;
}
Then, only float your image to the left. Do NOT float your content. Add margins around the image as desired. So something like:
.left {
float: left;
margin: 0 10px 10px 0; /* 10px on right and bottom */
}
The content in the div will then act like you are expecting.
Remove the float rule on the long text (jsFiddle example). When en element is floated after another floated element, it can't come before it vertically.
<div>
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
See the W3 for the long version:
The outer top of a floating box may not be higher than the outer top
of any block or floated box generated by an element earlier in the
source document.
Remove the float:left; on the rule and it will work. However, you may want to improve and test in ie 6+.
You have to set max-width attribute to restrict your text form taking as much space as available and to get maximum space its going to next line.
http://jsfiddle.net/a6BbD/1/
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
<br>
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some short text here</div>
</div>
</div>
The recommendation says you should always set width on floated elements.
the below link has great material to understand floats..
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://tinypic.com/r/9km2v8/5
In the image, you see the floating box. The top left corner of the box (0,0) is aligned with the top of the parent div which is line 3.
I am trying to get the bottom left corner of the floating box to align with the middle of the parent div.
I am using CSS:
.video_desc_box_open {
position: absolute;
left: 500px;
width: 301px;
}
bottom: 0; does not work. It pushes it down very far on the page.
I am open to JS solutions too :)
Thanks!
EDIT: Almost forgot, the height is dynamic.
HTML:
<div class="video_odd">
<div class="video_list_viewed" >
<img src="viewed_no_odd.jpg" />
</div>
<div class="video_list_number">
3
</div>
<div class="video_list_title">
<a id="show-panel" class="show-panel" href="#">Title to vid</a>
</div>
<div class="video_list_desc">
Text goes here
</div>
<div class="video_desc_box">
<img src="desc_box_top.png" />
<div class="video_desc_box_text">
Text for the desc goes here
Run Time:1:21
<br>
Desc goes here
</div>
<img src="desc_box_bottom.png" />
</div>
<div class="video_list_post_date">
02/01/2011
</div>
<div class="video_list_run_time">
1:21
</div>
</div>
I think I kinda understand your question, try this:
#parent_div {
position:relative
}
.video_desc_box_open {
position: absolute;
top:-50%
left: 500px;
width: 301px;
}
if you could provide live code it will be easier to help :)
Add position:relative; to the box's parent then align using bottom.
I'm sure this will be ridiculously simple, but whatever... I'm trying to display a text area with a button to its right, similar to how StackOverflow displays a comment field with button when one clicks the 'Add Comment' link...the problem I'm experiencing is with the button alignment; it appears to align at the top right of its div (see image), I want to align it at the bottom left. I've tried using text-align, align, nothing works to move that pesky button, I used padding-top to move the button down, but padding-right appears to have no effect, but there's got to be a better way than padding. I need it to be cross-browser compatible as well.
Here is the html/css I'm using...
.newComment {
position: relative;
width:475px;
background-color:WHITE;
}
<div class='newComment'>
<div style='float:left;width:375px;'>
<textarea style='border:1px solid #888;overflow:auto' rows='3' cols='40'>comments </textarea>
</div>
<div style='float:left;width:75px;'>
<input type='submit' value='Add Comment'/>
</div>
</div>
The reason why it is not adjacent to the textarea is because the div encompassing the text area is too large. If you inspect element on Chrome, you will notice where all the elements are.
I'd suggest you do not put them in separate divs if you want them stuck together.
<style>
.newComment {
position: relative;
width: 475px;
background-color: white;
}
</style>
<div class='newComment'>
<textarea style='border:1px solid #888; overflow:auto' rows='3' cols='40'>comments</textarea>
<input type='submit' value='Add Comment' />
</div>
You've set the widths of the container divs but you haven't specified the height, so your padding is not taking. I've provided a sample below so you can visually see what is happening...
http://jsfiddle.net/g6JSU/
Below is a possible solution with the button aligned to the vertical center:
http://jsfiddle.net/g6JSU/1/
try this
.newComment {
position: relative;
width:475px;
background-color:WHITE;
}
<div class='newComment'>
<div style='float:left;width:375px;'>
<textarea style='border:1px solid #888;overflow:auto' rows='3' cols='40'>comments </textarea>
</div>
<div style='float:left;width:75px;'>
<input style="float: left; margin-top: 20px;" type='submit' value='Add Comment'/>
</div>
</div>
uparrow.gif and downarrow.gif
So, it would look like so:
How can I create 3 divs and style them with CSS so those arrows are positions with the top arrow above the bottom arrow?
<div class="vote">
<div class="uparrow" />
<div class="downarrow" />
</div>
Should I create a "vote" div with restricted width? Would I float: top and float: bottom the two arrow divs with the background set as my two images? I plan on having content directly to the right of the vote arrows so it needs to be restricted and tight.
Don't use divs for an image - there's already a perfectly good img tag!
<div class="vote">
<img alt="^" title="vote up" src="/images/up.arrow.png" />
<img alt="v" title="vote down" src="/images/down.arrow.png" />
</div>
And then simply:
.vote
{
width: 15px;
float: left; clear: left;
}
.vote img
{
display: block;
float: none; clear: both;
}
You may want to add some margin to the .vote to separate it from the content it will be next to.
By default, <div> elements are block-level meaning they are one-per-line and will expand horizontally to fill their container.
Adding the click handling is another problem. You could include the <a> and <img> elements in the uparrow and downarrow elements or you do it in CSS as you suggested (the less compatible way). Another option is registering DOM events with Javascript.
HTML:
<div class="vote">
<div class="uparrow" />
<div class="downarrow" />
</div>
CSS:
div.vote {
width: 50px;
float: left;
}
div.uparrow {
background-image: url(...);
}
div.downarrow {
background-image: url(...);
}
Use 2 divs. Float the text div left and put the two images in a single div. use display: block on the images to force one below the other.
A more semantic and efficient solution than divs would be this, which also takes care of positioning the vote box.
.content-item {padding-left:110px;position:relative; width:500px;border:1px solid red;}
.vote{width:100px;position:absolute; top:0; left:0;border:1px solid red;}
.vote h4 {style heading how you like}
.vote img{width:100px;height:30px;background:black;}
<div class="content-item"> content
<div class="vote">
<h4>Vote</h4>
<img alt="vote up" src="..." />
<img alt="vote down" src="..." />
</div>
</div>