CSS - Aligning Left And Right In Same Line - Text Combined With Image

Figured this was simple, but I can't seem to figure it out.

Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way.

With CSS like:

.imginfo {float:none;clear:both;margin-top:1em;}
.imginfo img {float:left;margin-right:1em;}

and code like:

Code:

<div class="imginfo">
  <img src="..." />
  Line of Text<br />
  Line of Text<br />
  Line of Text<br />
</div>

I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image.

Attempting to use vertical-align: bottom doesn't do anything with the text.

The effect I am looking for is like below. If you assume the XXX are the image...

Code:

XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX Line of Text
XXXXXXXXXXXX Line of Text
XXXXXXXXXXXX Line of Text

Hi all, I have a pesky little problem that I can not seem to figure out on my own.

I have a set up like this

PHP Code:
<span class='navitem'><a href='index.php'>
<img src='myimage.gif'>Go Home</a></span> 





My Css Code is

PHP Code:
#leftnavcontent .navitem {
    border-bottom:1px dotted #DADADA;
    font-size:12px;
    font-weight:normal;
    line-height:16px;
}

#leftnavcontent .navitem img {
    margin-right:5px;
    border:none;
} 





My problem is that the image is not aligning with the text. As in there is just a slight maybe 1 or 2 pixel border bottom from the image that makes it dip just above the navitem box which makes it look a little funky.

Any ideas?

I'm trying to figure out how to align the text with the text so that it text starts up and to the top right of the image. And I"m talking about the top middle div.

http://kansasoutlawwrestling.com/v3/index.html

I have a line item where I'm pulling in text and an image from a dB. I would like the text to align at the top and not sure how to do it.
Code:

<li>Song name&nbsp;<img src="beatles.jpg">&nbsp;Artist

Test page:
Played songs
I have tried margins but then the image moves and the text is always aligned at the bottom of the image.
Thanks for your help!

I currently have been trying to align an h1 tag over top of a css background image. I have tried a whole bunch of things but have returned the code back to its most basic form

My external css div looks as follows:

#content_funny{
width: 315px;
height: 51px;
background-image:url(images/funnyvideos1.gif);
background-repeat:no-repeat;
float:left;
clear:left;
margin:0px 0px 0px 0;
display:inline;
}

My index file is as follows

<div id="content_header"><div id="content_funny"><a href="http://www.tokenhumor.com/categories/7/funny_videos.html"><h1>Funny Videos</h1></a></div>


For some reason the text in its natural state is laying differently for IE and FF, preventing me from using any positioning lines within my external style sheet.

Any help with this is much appreciated, I m pulling my hair out

I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09


I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move.


Here is one of the examples:
Code:

#homepage-bar h2.construction {
	position:fixed;
	top:225px;
	left:505px;
}

I tried changing to position: absolute; I also tried to use percentages on the left:


I know this is easy, but I can't find the fix after googling for 30 minutes. Help!

hey all, i have a page that has text on it and i am trying to add another div with a photo in it so that i can place the photo on the right had side and get the text to wrap around it. buti am having probs. the text doesn't wrap around the photo ... so the photo just ends up at the bottom of the text on the right...

here is the code i am currently using for it
Code:

#rightphoto {position: absolute; right: 10px; border: 1px solid #ccc; padding: 2px 2px 2px 2px;}

i have had various ideas but none have worked,,,,this is the latest...

any ideas??

thanks

RF

Hi,

I need some help for aligning text inside a css box. let me first say, that i am using a wysiwyg editor and i am aware of this being a red flag for some folks ....

to make my problem better understandable, please see following picture - this is how i want it to be:

the area of interest is a 3 column box (left and right are fixed widths, middle column is variable), the middle box (highlighted in blue) is the box, which has a background picture ('Melanie Wanders') on the top/left .... then it has some text (one looong line) and also a picture to the right (alignment: right).
what i wanted is, that when the user resizes the window, that the text is able to wrap around the image on the top right - and it does exactly that (you can also view the online version here)

well, what happens is this:


my problem:
when i try to use the 'p' tags to enter a paragraph, it messes up the appearance in FF (completely) and it still shows the text right on the top, above the background image. I also tried to align the text line to the bottom of the box, but it wouldn't do so.

i did also try to have the image ('Melanie Wanders') as an actual image aligned Top/Left, but it wouldn't wanna work for me with the other image next to it. i might get it to work, if this is my only option ....

finally, here the code used (you will also find the code online, if you follow the above link)
Code:

.inner_middle_content_row { width: 100%; height:300px ; }
	.inner_middle_content_row_left { background-image: url(images/inner_table/left.png); background-repeat: repeat-y; background-position: right 0; width:125px; height:300px; float:left; }
	.inner_middle_content_row_right { background-image: url(images/inner_table/right.png); background-repeat: repeat-y; width:20px; height:300px; float:right; }
	.inner_middle_content_row_middle { background-color: white; background-image: url(images/about_us/melanie_title.jpg); background-repeat: no-repeat; background-position: left top; width:auto; height:300px; margin-left:125px; margin-right:20px; }

Code:

<div class="inner_middle_content_row">
	<!--agl:cssobject id="inner_middle_content_row" type="Column Middle Scale" /-->
	<div class="inner_middle_content_row_left">
		<p class="submenu_brown">Melanie Wanders</p>
		<p><a class="submenu_gray" href="wilhelm%20wanders.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Wilhelm Wanders</a></p>
		<p><a class="submenu_gray" href="philosophie.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Philosophie</a></p>
		<p><a class="submenu_gray" href="history.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">History</a></p>
		</div>
		<div class="inner_middle_content_row_right"></div>
		<div class="inner_middle_content_row_middle">
		<img src="images/about_us/melanie_portrait.jpg" alt="" width="160" height="180" align="right" border="0" />Chef Melanie Wanders received her Culinary Arts and Management degree .... their own hand-made chocolate company - Wanders Artisan Chocolaterie.</div>

it would be great to find a solution to this - the easy way out would be to just skip the background image and have the text start right on top left .... but i like the idea of having a nice title like this - please tell me your opinion though

another thing i realize is, that the whole alignment is off in IE ... this is an issue i think i have read before and it has to do with this 3px or 5px off thing in IE right? i think i will look into this some other time.
Thanx for reading this - please bare with me, as my mother-language is not english and i might have expressed myself not clearly

I need the text "world leaders in spirometry" to be on the same base line as the text in the logo image for Vitalograph to the left of it.

This is what I want it to look like image link

This is what does look like web page link

Here is the CSS css link

How can I get abosolute vertical placement of the text best for firefox and IE?

I know I could put the tage into the logo as one image, but for SEO I would like to have the text there if possible.

Thanks!

I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other.

In safari it looks fine right now.

http://www.ryanbuckley.ca/photos/

Can anyone help with this little annoyance?

Thanks in advance!
Ryan

Hi,

I am trying to achieve a layout which uses unordered lists.

Within the LI, there is an image and some text. The images are all different heights though.

The issue i'm having at the moment is how can I make the text vertically align within the LI? Keep in mind that I can't put a height on as each image changes height. And these lists will be generated dynamically probably - so I don't really want to specify individual heights for each one... To make it even more difficult, the text may end up spanning onto two lines at some stage if i have to enter a larger description - so that also needs to be kept in mind.

I've been looking around all morning for examples of how to do this and I can't find anything - so any help would be greatly appreciated!!!

Here is what I'm trying to achieve:
http://www.joshsphotos.com/user_interface/final_look.gif

Here is the HTML at present:
http://www.joshsphotos.com/user_interface/

And the CSS:
http://www.joshsphotos.com/user_interface/css/style.css

Thanks!

Hi Guys,

I'm trying to align some text along an image. The problem is, I want two lines of text to the right of the image, aligned to the top. If I put a <BR> tag between the two lines, the second line gets placed below the image.

Here's what I have so far.


img.top {vertical-align:text-top;}

<a href="http://company.com/graphics/thumb.jpg">
<img class="top" src="http://company.com/graphics/thumb.jpg">
</a>
<a href="company.com">sample text</a>
<a href="company.com">second line</a>


Any ideas? I've tried like every switch for the vertical-align property...

Have a look at this and tell me what's causing the navigation not to align.
http://n.1asphost.com/wheelofgod/se...t/spokelist.asp

In my footer I'm having a problem with my links aligning left. I'm not sure how I would go about coding it so that Promotional Kit aligns left underneath Headshot v2. I tried text-align: left in ul, li, and in the footer link section but nothing. I may need to change the layout all together which is fine, but I could use your help.

Thanks in advance

http://www.lonniebruhn.com/sitelab/

and here is the css code:



Code:

body, html {
font-size: 100%;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
background-color: #000;}

#container {
margin: 0px auto 90px auto;
width: 940px;
text-align: left;
background-image: url(images/container-bg.jpg);
background-repeat: no-repeat;
background-color: #1d1d1d;;
overflow: hidden}

object {
display:block;
z-index:1}

#header {
width: 920px;
position: relative;
top: 5px;
margin: 0 auto;
background-color: #333;
border: 2px #000 solid;}

#header h1 {color: #ffffff;
font-size: 2em;
font-family: Impact, "Arial Black", Trebuchet, sans-serif, "Times New Roman";
line-height: 90%;
text-align: center;
margin: 0;
padding: 10px;}

.quote {
position: relative;
text-align: right;
Left:10px;
font-family: "Arial Black", Verdana, Helvetica, Arial, sans-serif;
color: #ffcc33;
font-size: .5em;
font-style: italic;
}

#logo {
position: relative;
margin:0 auto;
background-image: url(images/header-logo.jpg);
background-repeat: no-repeat;
width:920px;
height:120px;
border: 2px #000 solid;
}

#left {
margin: 15px 10px 0px 10px;
width:180px;
position: relative;
width: 180px;
float: left;
border: 2px #000 solid;
background-color: #333;}

#left h1{
height:20px;
margin: 10px auto;
color: #ffcc33;
font-family: Impact, "Arial Black", Verdana, Helvetica, Arial, sans-serif;
font-size: 1.50em;
text-align: center;
text-decoration: underline;
}

#dates {
position: relative;
margin: 0 auto;
text-align: left;
}

#dates ul {
margin:0;
color: #ffffff;
font-family: Verdana, Arial, sans-serif;
font-size: .625em;
font-weight: bold;
position: inherit;}

#dates li {
padding: 10px 0 5px 5px;
list-style-image: url(images/1.gif);
display: list-item;
margin: 0px 18px 15px -15px;
list-style-type: none;
text-align:left;
border-bottom: 2px #ffcc33 dashed;}

#mainbody {
position: relative;
background-color:#333;
width: 480px;
min-height:320px;
margin: 15px auto;
right: 20px;
border: 2px #000 solid;
}


#right {
position: relative;
width: 220px;
background-color: #333;
min-height: 320px;
float: right;
border: 2px #000 solid;
margin-top: 15px;
margin-right: 10px;}

#right h1 {
text-align: center;
color: #ffcc33;
font-family: Verdana, Arial, sans-serif;
font-size: 1.25em;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 10px;}


#footer-wrap {
background-image: url(images/footer-bg.gif);
width: 100%;
height: 78px;
z-index: 2;
left: 0;
bottom: 0;
position: fixed;
text-align:left}

#footer-left {
position:fixed;
width: 244px;
min-height:68px;
margin-top: 5px;
border-right: 2px #000 solid;
left:-25px;
padding-right: 25px;
float:left;}

#footer-left ul{
display: block;
margin:0;
width:244px;
list-style-type: none;

}

#footer-left li {
display: inline;
margin-right:10px;
}

#footer-wrap a:link, #footer-wrap a:visited, #footer-wrap a:active {
color: #000;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .75em;
text-decoration: none;
}

#footer-wrap a:hover {
text-decoration: underline;} 



#footer-center {
position: fixed;

}

#footer-right {
position: fixed;

}




p {
margin:0 25px 25px 25px;
font-size: .875em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";

color: #fff;
text-align: justify;}

#links{
text-align: right;
padding: 2px;

}

#links a:link, #links a:visited, #links a:active {
right:8px;
font-weight: bold;
font-size: 0.625em;
font-family: Verdana, Arial, sans-serif;
color: #cccccc;
font-family: Verdana, Arial, sans-serif;
text-decoration: none;
position: relative;}

#links a:hover {
text-decoration: underline;}

#links ul {margin: 0; list-style-type:none}

#links li {
display: inline; 
}

#menu
{ height: 15px;
 
  width: 920px;
  height:22px;
  position: relative;
  margin: 0 auto;
  background-color: #333;
  border-left: 2px #000 solid;
  border-bottom: 2px #000 solid;
  border-right: 2px #000 solid;}

#menu ul{margin: 0 auto;} 

#menu li
{ float: left; 
  margin: 0;
  padding: 0;
  list-style: none;
} 

#menu li a 
{ display: block; 
  height: 20px;
  text-decoration: none; 
  padding: 0 19px 0 19px;
  border: 2px #000000 solid;
  text-transform: uppercase;
  font-size: 0.75em;
  font-family: Verdana, Helvetica, Arial,sans-serif; 
  color: #ccc;
  background-color: #666;} 

#menu li a:hover, #menu li a#selected, #menu li a#selected:hover 
{ border: 2px #000000 solid; background-color: #3f3f3f;
} 

.postdate {
display:block;
margin: 10px 20px 20px 20px;
padding-left: 10px;
color: #ffcc33;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.75em;
background-color: #000;}

.post p {
margin: 0px 5px 0px 5px;
font-size: .75em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
padding: 10px;
padding-top: 20px;
line-height: 120%;
}


.post h1 {
margin: 0px 5px 0 5px;
color: #ffcc33;
font-size: 1.2em;
font-family: Verdana, Georgia, sans-serif, "Times New Roman";
padding: 10px;
text-decoration: underline;}

.post h2 {
margin: 0px 20px 0 20px;
color: #ffcc33;
font-size: .6em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
padding: 15px 10px 5px 10px;
text-transform: uppercase;
border-bottom: 8px #666 double;}

.blue {
color: #3399ff;;
margin: 5px 0 10px 0;
display: block;}


.video {
width: 190px;
margin: 10px auto 0px auto;
z-index: 1}

Hi,

I am pretty new to the whole CSS thing and have had a look around for an answer to no avail.

I am trying to align all the widgets for my wordpress theme to the left because my screen resolution is set to 2560 x 1440, they seem to wrap when my browser window is maximised. is there any way to stop this so that they stay underneath one another even when the screen is maximised?

my website is at grandfunghi.com

thanks in advance,

J