CSS - Left And Right Image

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

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?

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'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>

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. 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

Hey Guys,

I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated.

Here is my CSS Code:

ul#nav {
height: 91px; width: 271px;
margin:30 auto;
background: url(images/logo.jpg) no-repeat;


}

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

Hello,

I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left.

See here

see how it got below ?

It is XHTML validated and CSS is fine too (some background color warnings).

Plz help me to make central column go up. Thanks.

I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.).

Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left".

What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it?

OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)?
Here's some example HTML:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


 <head>


 <title>Test</title>


 <style type="text/css">


     @import url("style.css");


 </style>


 </head>


 <body>


  


 <form name="form" action="test.php" method="post">


     <label for="name">Name:</label>


         <input type="text" name="name" />


     <label for="thoughts">Your Thoughts:</label>


         <textarea name="thoughts"></textarea>


     <label for="fun">Having fun?</label>


         <input type="checkbox" name="fun" value="yes" />


 </form>


  


 </body>


 </html> 

And the CSS:
css Code:
Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }

  

  


 label {


     display: block;


     float: left;


     clear: left;


     width: 8em;


     margin-right: .5em;


     text-align: right;


 }


 input,


 textarea {


     display: block;


     float: left;


 } 

I always seem to run into this problem and somehow get it fixed but this time I am stuck.

I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE ..

The main CSS:

Code:

* {
 margin: 0;
 padding: 0;
}

body {
margin:0;
padding:0;
background-color:#e5e5e5;
}

#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}

	#navigation {
	width: 640px;
	height: 22px;
	background-color:#c9c9c9;
	margin-top: 88px;
	}
	
	#insidewrapper {
	height:auto;
	width:99%;
	margin: 6px 1px 4px 1px;
	}

		/* Begin Left Side Info Boxes */
		#sidebar {
		width:150px;
		height:600px;
		margin-left:2px;
		float:left;
		border:1px solid #666666;
		border-bottom:0px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:9px;
		color:#666666;
		background-color:#ffffff;
		}
		
			.infobox {
			height:123px;
			font:Verdana, Arial, Helvetica, sans-serif;
			font-size:9px;
			padding:3px;
			border-top:0px;
			border-left:0px;
			border-right:0px;
			}
				.infopic {
				margin-top:9px;
				}
				
			.infobutton {
			height:20px;
			border-bottom:1px solid #666666;
			padding-left:3px;
			}
				
		/* Begin Main Content */
		#maincontent {
		width:465px;
		height:593px;
		margin-left:158px;
		border:1px solid;
		border-color:#666666;
		font:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#333333;
		padding:3px;
		background-image:url(../images/background_trans2.gif);
		background-repeat:no-repeat;
		background-position:center;
		background-color:#ffffff;
		}
			/* Main Content for pages with textual content */
			#content {
			width:97%;
			height:auto;
			padding:5px;
			}

			/* Main Content for pages with products */
			#productWrapper {
			height:auto;
			width:100%;
			margin-top:10px;
			}
			
			#productLeft {
			height:auto;
			width:115px;
			float:left;
			}
			
			#productMiddle {
			height:auto;
			width:200px;
			margin-left:1px;
			float:left;
			}
			
			#productRight {
			height:auto;
			width:auto;
			}
	
	/* Begin Footer */
	#footerlinks, #footer {
	width:640px;
	height:auto;
	text-align:center;
	float:left;
	}
	
	#footerlinks {
	border-right: 2px solid gray;
	border-bottom: 1px solid gray;
	border-left: 2px solid gray;
	background-color:#c0c0c0;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	letter-spacing:1px;
	color:#555555;
	padding-bottom:4px;
	}
	
	#footer {
	margin-left:0;
	margin-top:0;
	margin-bottom:15px;
	padding-top:8px;
	border-top: 0px;
	border-right: 2px solid gray;
	border-bottom: 2px solid gray;
	border-left: 2px solid gray;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#555555;
	background-color:#a9a9a9;
	}
	
	/* Begin Rightside Column */
	#right {
	border: 1px solid orange;
	width:195px;
	margin-left:650px;
	padding-top:111px;
	}

Hi, I have this page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

p {padding: 0; margin: 0; }

html {padding:0; margin:0;}


.leftDiv {
	height: 100px;
	width: 30px;
	background-color: teal;
	float: left;
}

.mainDiv {
	padding: 5px 0 10px 0px;
	width: 200px;
	height: 20px;
	background-color: blue;

}

.mainPara {
	padding-left: 5px;
}

</style>
</head>

<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
	<div class="leftDiv">
	
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		First Para
		</p>
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		Second Para
		</p>
	</div>
</div>
</body>

</html>

And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions?

Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent.

Any help is appriciated,

CJB

I have a dynamic site I am developing. http://www.rubberducktech.com/software/eDeli2/Menu.php

along the top there was an issue with a gap on the left and the right (Using IE6). I got the gap fixed on the left using

* html #mainLogo{
margin-left: -3px;
margin-right: -2px;/*this doesn't work*/
}

which I found here in the forum. But, I cannot seem to get the right side gap to go away.

Here is the code

#header{
font-size:90%;
color:#ffffcc;
font-weight:bold;
}

#mainLogo{
background-image:url(../images/logo-span.png);
background-repeat:repeat-x;
margin-top:10px;
height:140px;
}