CSS - Image On Left And Right Background

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

G'day all,

I'm trying to get two different images to appear of the far left and far right of the page, extending to the bottom of the page to act as a border.

I currently have two different styles for each, and two different <div> tags, however I think the nesting of the <div> tags may be causing it to stuff up and knock off the positioning.

How can I get the two images to go to the far left and right of the screen, using CSS, in a way that will also let me use the repeating function to stretch them to the bottom of the screen.

This is a screenshot of a mockup I did in Photoshop, the images I need to position are the grey fadeout ones on the left and right.
http://www.ausvirtual.com/Website%20copy.jpg

Cheers.

hi,

this is my first post so go easy with me!

I am trying to use css to make a top navigation bar, with an image to the left and an ul to the right, i want to ul to be in line with the bottom of the image so that it forms a nav bar but i am doing something wrong...!

below is what i think is the relevant code and css.... any help appreciated!! If i need to upload the rest of the pages then let me know. i'm coding in php but this bit is all html so i guess that doesnt really matter for now, i'm new to web development, its part of a uni assignment!

Code:
HTML

<div id="header">
  <p align="left">
  <a href="index.php">
  <img src="/images/GATlogo.jpg" width="150" height="150" alt="Home" border="0" /></a>

  <ul>
  <li><strong><?php echo "$heading"; ?></strong></li>
  <li><img src="/images/login.gif" border="0"/><a href="  Login.php">Login</a></li>
  <li><img src="/images/register.gif" border="0"/><a href="  Register.php">Register</a></li>
  </ul>
</div>

Code:
CSS

#header{
  vertical-align: top;
  text-align: right;
  border: solid thin #999999;
  margin: 0px 0px 0px 0px;
  background: #336699;
  font-family: MS Trebuchet, MS Verdana, Univers, Helvetica, Arial, sans-serif;
  color: #ffffff;
  height: 155px;
}

#header li {         
  display: inline;
  list-style: none;
  padding: 40px;
}

#header a:link {
  color: #ffffff;
  text-decoration: none;
}

#header a:visited {
  color: #ffffff;
  text-decoration: none;
}

#header a:hover {
  color: #ffffff;
  text-decoration: none;
}

#header a:active {
  color: #ffffff;
  text-decoration: none;
}

This may be a stupid question, but is there an easy way to make a div have an image on the left and content on the right... BUT then also make sure that, if the image's height is larger than the div, the div still covers the bottom. I know you can use a "float killer" div, however if I want a float killer on EVERY div class of this type, is there some easy way to tell the css to ALWAYS include code at the bottom?

Also what method would a good coder use to vertically align the content on the right so that there isn't a lot of empty space?

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'm trying to figure out how to postion an Image at the bottom left of a <DIV> container.

Can someone supply an example style class defintion which will place an Image at the bottom left of the div container..

I presently have:

<div>
<h2>Heading 2</h2>
<p>My paragraph text goes here and goes on for a line or so</p>
<img class="bottomleft" src="button.gif" alt="button" />
</div>

.bottomleft {
position: relative;
bottom: 0px
left: 0px
}

But this places the Image relative to the end of the <p> tag not relative to the <div>

How can I position the Image relative to the botom left of <div> tag?

Thanks
David

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

Hello,

I'm trying to float an image inside a content div that is inside a wrapper div that already has a float left (nav) div earlier in the html. I know that this means that the floated image div will not be cleared until after the already floating nav div, since this is the one that comes earlier in the html and is quite large. It leaves a large gap until it clears the nav div.

I have tried a couple of things, here is the page I'm working on and this is the css file

This hasn't been tested on Windows, so I have no idea how it looks.
It has been tested on the Mac: Safari, Opera, Netscape and Firefox display as described above, but IE Mac is way off whack.

The current setup of the page is this:

HTML: Code:

<div id="content">
	<div id="breadcrumb"><a href="http://www.huntacular.com/">Homepage</a></div>
	
	<div class="image1">
		<img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="red">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis 
		parturient montes, nascetur ridiculus mus.</p>
	</div>
	<div class="image2">
		<img class="right" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="orange">Donec accumsan. Pellentesque ac est vitae sapien scelerisque auctor. Nunc pede 
		diam, interdum vel, dictum ut, egestas eget, metus. Maecenas eget sapien.</p>
	</div>
		
	<div class="another3">
		<img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="blue">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient 
		montes, nascetur ridiculus mus. Sed vulputate. Nulla ac leo sollicitudin mauris fringilla 
		consectetuer.</p>
	</div>

CSS: Code:

img.left {
	float: left;
	border: solid 1px black;
	padding: 10px;
	margin-right:10px;
	margin: bottom: 10px;
}

img.right {
	float: right;
	border: solid 1px black;
	padding: 10px;
	margin-left:10px;
}

.image1 {
	border: red 1px solid;
	padding : 0px;
}
.image2 {
	border: orange 1px solid;
	padding : 0px;
}
.image3 {
	border: blue 1px solid;
	padding : 0px;
}
/* Trying to sort the float problem - this sends IE Mac nuts, not checked on IE Win */
.another:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.another {display: inline-table;}

/* Hides from IE5/Mac \*/
* html .another {height: 1px;}
.another {display: block;}
/* End hide from IE5/Mac */

/* .clearer {
	clear: both;
} */

p.red {
	color: red;
}
p.orange {
	color: orange;
}
p.blue {
	color: blue;
}

Is there a work around? I thought I'd found one in the third attempt - the one with blue text, but I'm not sure if I've implemented it correctly. Also, IE Mac isn't doing any of these correctly either (well, nearly the second one, but I haven't tested this stuff on Windows either.

Is there a solution?

In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work.

You can clearly see the problem here, a gap at the bottom:

http://www.groundedgroup.com/clients/NWR/

Here's the relevant css:
http://www.groundedgroup.com/client...WR-GG/style.css

I've googled and subsequently tried out some solutions, but no luck. Got any ideas?

Thanks in advance.

PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed.

I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong?

<DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV>

Hi. I'm reasonably new to tableless-design, and i've run into the common problem of aligning one bit of text to the left of a line and another to the right. I have searched the web and have found several means of achieving this, but in my case there is an image combined with a inline list (horizontal menu) that needs to be aligned left, and another combination of text and images to the right.

| [image] text .... right-side text |

This might seem rather simple, but it becomes more complicated: the entire block needs to be padded on the top in order for the text not to appear cramped up at the top, and the left-margin and right-margin of the image is then set to the corresponding negative values in order for it to still be displayed precisely in the top left corner. I have found this to be the only cross-browser compatible method.

All the methods I have experimented with to align the two sides on left and right have either resulted in the image and text to be incorrectly (vertically) aligned or be displayed in different lines, even when the image is not used as part of the alignment-method.

Any help or suggestions will be greatly appreciated.
Thanx

http://www.ilumos.co.uk/site/

http://www.ilumos.co.uk/site/style/styleDefault.css

As you can see on the left there is a "glowing" blue-white fadey thing going on on the left of the page, but it stops after the header (#header) for no apparent reason. The page renders fine in IE, but in Firefox or any other standards obeying browser it stops there.

the CSS for the page border on the left is as follows:

#wrap {
background: url("../images/ilumosPageFadeLeft.jpg") repeat-y;
padding-left: 25px;
width: 750px;
}

(the wrap div contains all of the page's content)

How can I make the image extend to the bottom of the page?


Thanks

I would like to align left images so that they touch against each other.
Here is a capture of my problem.
dollhedz.com/test

[CODE]
<style type="text/css">

body{
background-color:#000033;
color:#00cc33;

}


#wrapper{
background-color:#000000;
margin:15px auto 0px;
width:700px;
height:800px;
}



#sitenav{
background-image:url(sitegrax/sitenavback.jpg);
background-repeat: no-repeat;
height:55px;
padding-left:213px;
border: 0px;
margin:0px;
text-align:left;
}

#one{
float:left;
text-align:left;
align:left;
margin:0px;
padding:0px;
}




</style>
</head>

<body>

<div id="wrapper">

<div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" />
</div>

<div id="sitenav" >
<div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a>
<a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a>
<a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div>
</div>

</div>

</body>
</code>

Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image.

thank you for your time

Hi everyone,

I have a problem I'm trying to overcome with displaying an image next to the text in a table cell. I've set the table cell to valign=middle and this achieves the layout I want (hopefully this demonstration will look right..)
Code:

PICTUREHERE
PICTUREHERE
PICTUREHERE   The text goes here
PICTUREHERE
PICTUREHERE

So the text and the picture are laid out along the middle of the cell. However as soon as the text gets too big for the cell (or the cell gets smaller) this happens:
Code:

PICTUREHERE
PICTUREHERE
PICTUREHERE  The text goes here, but when it's longer
PICTUREHERE
PICTUREHERE
the remainder comes here

I knew this to be because the img is still an inline element in the cell. I tried to solve the problem by making the img float:left, but the following happens, even if the valign=middle property is set in the cell:
Code:

PICTUREHERE   The text goes here, but when it's longer
PICTUREHERE   the remainder comes here
PICTUREHERE
PICTUREHERE
PICTUREHERE

Is it possible to achieve the top layout. If it is can someone help me please (it's probably staring me in the face)

Thank you in advance
Andy