CSS Forum

**silverglade** · 03:50 PM

i am having such a simple problem with my css. jeez. anyway, i have 2 images inside an image div, one image is floated left, and one image is floated right, when i see them in dreamweaver, the image on the right is underneath, when i view it in browser, it doesnt look right either. im trying to get the images to line up back to back. any help greatly appreciated. thank you, derek.

here is the link to the page im talking about
http://derekvanderven.com/phyllisgallery_raw/home.html

and here is the css.

Code:

@charset "utf-8";
/* CSS Document */
#wrapper {
margin: 50px 0 50px 0;
width: 790 px;
height: 346 px;
}
body {
background-color: #A37AAF;
}
#imagediv {
width: 237 px;
height: 326 px;
float: left;
}
#textdiv {
width: 553 px;
height: 326 px;
float:right;
}

and here is the html.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="phyllis.css" rel="stylesheet" type="text/css"/>
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper"> 
<div id="imagediv"><img src="phyllis_main.jpg" width="237" height="326" /></div>
<div id="textdiv"> <img src = "main.gif" height="326" width="553"> </div>
</div><!-- end wrapper-->
</body>
</html>

**Insensus** · 02-24-2009, 03:52 PM

Just next to each other?
Use the same float value in that case.

**LadynRed** · 02-24-2009, 04:07 PM

Exactly, float them both in the same direction.
You also need to remember to CLEAR your floats - see the stickies, I put a new one up for EXACTLY this subject.

**silverglade** · 04:27 PM

i will read the stickies thanks

edit- i read the stickies and kind of know what they are talking about, i think, ill have to read it again later, i am still having trouble with this simple layout. the float:left images now are next to eachother, but in dreamweaver they are on top of eachother i dont know why, and in IE or FF, the images arent centered like i declared in the "wrapper" div. please help, just a little more thank you . derek

here is the new css for the page.

Code:

@charset "utf-8";
/* CSS Document */
#wrapper {
margin: 50px auto 50px auto;
width: 790 px;
height: 346 px;
}
body {
background-color: #A37AAF;
}
 img {
 float: left;
 
 }

**Insensus** · 02-24-2009, 04:41 PM

Yet another misunderstanding.

The margin auto makes the #wrapper centered, not it's content.

To center the images I would wrap them in yet another wrapper with display: inline and margin: auto.
Not sure if that's the correct way to do it, though.

**silverglade** · 05:22 PM

thank you again for that. i guess i havent ever tried centering inside my main div before. the browser is ignoring my image centering div and putting everything to the left of the browser. sorry i keep messing up. any more help appreciated. thanks. derek
here is the link to the new page. the images are back to back now, but to the left. i even tried "text-align: center" but that didnt work either.

http://derekvanderven.com/phyllisgallery_raw/home.html

and here is the new css to my page.

Code:

@charset "utf-8";
/* CSS Document */
#wrapper {
margin: 50 px auto 50px auto;
width: 790 px;
height: 326 px;
}
body {
background-color: #A37AAF;
}
 #leftimage {
 float: left;
 width: 237 px;
 height: 326 px;
 }
 
 #rightimage {
 float: left;
 width: 553 px;
 height: 326 px;
 }
#imgwrapper {
margin: 0 auto;
 display: inline;
 
}

and here is the new html for the page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="phyllis.css" rel="stylesheet" type="text/css"/>
 
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper"> 
<div id="imgwrapper">
<div id="leftimage"><img src="phyllis_main.jpg" width="237" height="326" /></div>
<div id="rightimage"><img src="main.gif" width="553" height="326" /></div>
 </div> <!-- end imgwrapper-->
</div>
<!-- end wrapper-->
</body>
</html>

**Insensus** · 02-24-2009, 05:46 PM

Easily fixed.
Remove the space between the value and px for width/height.

**silverglade** · 02-24-2009, 06:12 PM

insensus!! THANK YOU SO MUCH!! that fixed it both in the browser and in dreamweaver view. i am so tired of being a newbie. im going to have to try to read the stickies more like ladynred said. but thank you so much for taking the time out to help me. many thanks. derek ( i may still be a web designer yet)