View Full Version : CSS image spacing problem

10-26-2009, 07:09 PM
I'm having trouble getting an image positioned where I need it. I'm working on a test domain before I move the files over to the proper site.

Page in question:

I'm trying to place a product image (same size as the others: 287w X 220h) vertically parallel with the two images on the bottom, but to the left with the same side-by-side margin spacing.

Css code and html code available below.

All the images on the right are contained in the "big_center" block, which has enough width to easily manipulate getting images side-by-side, so I'm not having any trouble getting them positioned correctly.

However, since the site owners wants an image on the left, I'm having to incorporate it in the "body", then "left" div class.

I'm a bit new to css, so i first tried just inserting an image and creating paragraph breaks to push the image down far enough below the side navigation, but I got conflicts between browsers. Then I tried creating a new css block and adjusting the top margin to push it down, and I'm not getting the result I'm looking for.

I need help big time. Thanks for any assistance.

CSS Code:

@charset "utf-8";
body { margin:0; padding:0; width:100%; background:#efefef url(images/bg.gif) repeat-x;}
html { padding:0; margin:0;}

/* main */
.main { width:984px; padding:0; margin:0 auto; }

/********** header **********/
.header { width:984px; height:160px;}
/* logo */
.logo { float:left; padding:0; margin:30px 0 0 65px; width:288px; height:88px;}
/* search */
.search { float:right; padding:0; margin:40px 0 0 10px; width:380px;}
.search form { margin:0; padding:0;}
.search input { float:left; border:0;}
.search span { float:left; background:url(images/search_bg.gif) no-repeat left; width:332px; height:35px;}
.search input.text { background:none; width:312px; height:15px; padding:10px; color:#a2a2a2; font:normal 14px Arial, Helvetica, sans-serif;}
.search input.button { float:left;}
/* menu */
.menu { padding:0; margin:0; width:500px; float:right; height:85px;}
.menu ul { padding:44px 0 0 0; margin:0; list-style:none; border:0; height:41px;}
.menu ul li { float:left; margin:0; padding:0; border:0;}
.menu ul li a { float:left; margin:0 2px 0 0; padding:14px 0 14px 0; color:#434343; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span { padding:14px 12px 14px 12px;}
.menu ul li a:hover { background:url(images/r_menu.gif) no-repeat right;}
.menu ul li a:hover span { background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active { background:url(images/r_menu.gif) no-repeat right;}
.menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left;}

/********** slider **********/
.slider_bg { background:url(images/slider_bg.gif) repeat-y; margin:10px auto; padding:0; width:984px;}
.slider_t { background:url(images/slider_t.gif) top no-repeat;}
.slider_b { background:url(images/slider_b.gif) bottom no-repeat; padding:10px; height:231px;}
.slider_t .small { height:50px;}
.title_text h2 { padding:2px 10px 0 40px; margin:0; color:#2a2a2a; font:normal 36px Arial, Helvetica, sans-serif;}
.title_text p { float:right; padding:6px 20px 0 10px; color:#2a2a2a; font:normal 11px Arial, Helvetica, sans-serif;}

/*simple text*/
#slider p.img { float:left; padding:0 10px 0 0; margin:0 5px; line-height:0;}
#slider p.img img { padding:0; margin:0; border:0;}
#slider h2 { font:bold 36px Arial, Helvetica, sans-serif; color:#323232; margin:0; padding:10px; line-height:1.2em;}
#slider p {font:normal 12px Arial, Helvetica, sans-serif; color:#5f5f5f; margin:0; padding:10px; line-height:1.8em;}

#slider div.button { clear:right; float:left; margin:0 0 0 420px; width:520px; margin-top:-31px;}
#slider div.button .right_but { margin:0 0 0 200px;}

/* body */
.body { width:984px; clear:both;}
.left { width:321px; float:left; margin:0 10px 0 0; padding:10px 0;}
.big_center { width:652px; float:left; margin:0 10px 0 0; padding:10px 0;}
.big_center a { color:#efefef;}
.right { width:321px; float:left; padding:10px 0;}

.body h2 { color:#2a2a2a; font:normal 18px Arial, Helvetica, sans-serif; padding:15px 10px; margin:0;}
.body h3 { color:#2a2a2a; font:normal 18px Arial, Helvetica, sans-serif; padding:15px 10px; margin:0 0 10px 0; border-bottom:1px solid #d2d2d2; clear:both;}
.body p { color:#5f5f5f; font:normal 12px Arial, Helvetica, sans-serif; line-height:1.8em; padding:5px 10px; margin:0;}
.body p.spec { color:#a4a4a4; font:normal 11px Arial, Helvetica, sans-serif; line-height:1.8em;}
.body a { color:#0092dd; font:normal 12px Arial, Helvetica, sans-serif; line-height:1.8em; text-decoration:none;}
.body a:hover { text-decoration:underline;}
.body img.img { float:left; padding:10px;}

/* box_block */
.box_block { width:984px; clear:both; padding:0 0 10px 0;}
.box { width:321px; margin:0 10px 0 0; float:left; background:url(images/box_bg.gif) repeat-y;}
.box .box_t { background:url(images/box_t.gif) no-repeat top;}
.box .box_b { background:url(images/box_b.gif) no-repeat bottom; padding:0 0 10px 0;}
.box h2 { margin:0 0 10px 0; padding:11px 0 11px 20px; color:#616161; font:normal 18px Arial, Helvetica, sans-serif;}
.box img { float:left; padding:15px;}
.box p { padding:5px 20px; margin:0; font:normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; line-height:1.8em;}
.box a { font:normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; line-height:1.8em;}
.box a.more { padding:0 10px; font:bold 11px Arial, Helvetica, sans-serif; color:#0092dd; line-height:1.8em; text-decoration:none;}
.box a.more:hover { text-decoration:underline;}

.box ul { padding:10px 20px; margin:0; list-style:none;}
.box ul li { background:url(images/sub_nav.gif) no-repeat left; margin:0; padding:3px 0 3px 25px; border-bottom:1px solid #eaeaea;}

/* twitter */
.twitter { background:url(images/twitter_bg_s.gif) no-repeat; width:271px; height:96px; margin:10px auto;}
.twitter p { padding:5px 10px 0 0px; margin:0;}
.twitter img { float:bottom; padding:0px 10px 0 10px;}

/* testi */
.testi { margin:20px 0; padding:20px 10px; background:url(images/testi.gif) no-repeat top left;}
.testi p { font-style:italic;}

/* lister */
.lister { clear:both; border-top:1px solid #d2d2d2; padding:10px;}
.lister ul { margin:0; padding:0; list-style:none;}
.lister ul li { background:url(images/lister.gif) no-repeat; float:left; width:24px; height:23px; margin:1px; text-align:center;}
.lister ul li a { color:#7d7d7d;}
.lister ul li a:hover { text-decoration:underline;}
.lister ul li a.active { font-weight:bold;}

/********** contact form **********/
#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#5f5f5f;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { margin:0; width:110px; display:block; padding:3px 0; font:bold 12px Arial, Helvetica, sans-serif; color:#5f5f5f; text-transform:capitalize;}
#contactform label span { display:block; font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { width:540px; border:1px solid #d0d0d0; margin:3px 0; padding:5px 2px; height:16px; background:#ffffff;}
#contactform textarea { width:540px; border:1px solid #d0d0d0; margin:3px 0; padding:2px; background:#ffffff;}
#contactform li.buttons input { padding:3px 0; margin:0; border:0; color:#FFF;}
p.response { text-align:center; color:red; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto;}

.footer {padding:0; background:#e7e7e7; margin:0;}
.footer_resize { width:984px; margin:0 auto; padding:5px 0;}
.footer p { font:normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; padding:3px 10px; margin:0; line-height:1.8em; }
.footer a { font:normal 11px Arial, Helvetica, sans-serif; color:#383838; line-height:1.8em; text-decoration:none;}
.footer a:hover { text-decoration:underline;}
.footer p.leftt { text-align:left; width:50%; margin:10px 0; padding:10px 0; float:left;}
.footer p.rightt { text-align:right; width:50%; margin:10px 0; padding:10px 0; float:right;}
.FBG {padding:0; margin:0; background:url(images/line.gif) top repeat-x;}
.FBG h2 { font:bold 12px Arial, Helvetica, sans-serif; color:#5f5f5f; padding:10px; margin:0;}
.FBG .foot_nav { float:left; width:187px; border-left:1px solid #dedede; padding:0 0 0 40px; margin:10px 0;}
.FBG .subscribe { float:left; width:300px; margin:10px 0;}
.FBG .subscribe input.text { border:1px solid #d9d9d9; background:#FFF;}
.FBG ul { margin:0; padding:0; list-style:none;}
.FBG ul li { background:url(images/foot_nav_sm.gif) no-repeat left; padding:0 20px; margin:0;}

.no_margin { margin:0;}
p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { clear:both; border-top:1px solid #e0e0e0; padding:0; margin:5px 0; background:none;}

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">
<title>Maintenance Kits | Enginetics Technologies, Inc.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow">
<link href="style.css" rel="stylesheet" type="text/css" />
<div class="main">
<div class="header">
<div class="logo"><a href="index.html"><img src="images/eti_logo.gif" width="288" height="88" border="0" alt="logo" /></a></div>
<div class="search">
<form id="form_search" name="form_search" method="post" action="">

<label> <span>
<input name="search_q" type="text" class="text" id="search_q" value="" />
<input type="image" name="search_b" id="search_b" src="images/search_but.gif" class="button" />
<div class="menu">
<li><a href="./../../"><span>Home</span></a></li>
<li><a href="./../../services.html"><span>Services & Capabilities</span></a></li>
<li><a href="./../../products.html" class="active"><span>Products</span></a></li>
<li><a href="./../../customers.html"><span>Customers</span></a></li>
<li><a href="./../../about.html"><span>About us</span></a></li>
<li><a href="./../../contact.html"><span>Contact</span></a></li>
<div class="clr"></div>
<div class="slider_bg">
<div class="slider_t">
<div class="slider_b small">
<div class="title_text">
<h2>Maintenance Kits</h2>
<div class="body">
<div class="left">
<div class="box no_margin">
<div class="box_t">
<div class="box_b">
<h2>Ground Support Categories</h2>
<li><a href="oil_service_units.html">Oil Service Units</a></li>
<li><a href="maintenance_kits.html">Maintenance Kits</a></li>
<li><a href="maintenance_fixtures.html">Maintenance Fixtures</a></li>
<li><a href="maintenance_hand_tools.html">Maintenance Hand Tools</a></li>
<li><a href="air_manifolds_&_cooling_ducts.html">Air Manifolds & Cooling Ducts</a></li>
<li><a href="cable_assemblies_&_harnesses.html">Cable Assemblies & Harnesses</a></li>
<li><a href="electronic_test_sets_&_adapters.html">Electronic Test Sets & Adapters</a></li>
<li><a href="circuit_board_&_card_assemblies.html">Circuit Board & Card Assemblies</a></li>
<li><a href="ground_handling_wheels_&_adapters.html">Ground Handling Wheels & Adapters</a></li>
<div class="box no_margin">
<div class="box_t">
<div class="box_b">
<h2>Main Product Categories</h2>
<li><a href="./../airborne.html">Airborne Products</a></li>
<li><a href="./../ground_support.html">Ground Support Equipment</a></li>
<div class="clr"></div>
<div class="big_center no_margin">
<h3>Maintenance Kits</h3>
<p class="img"><img src="images/maintenance_kit01.jpg" alt="picture" width="297" height="220" class="img" /></p>
<p class="img"><img src="images/maintenance_kit02.jpg" alt="picture" width="297" height="222" class="img" /></p>
<p class="img"><img src="images/maintenance_kit03.jpg" alt="picture" width="297" height="220" class="img" /></p>
<p class="img"><img src="images/maintenance_kit05.jpg" alt="picture" width="296" height="230" class="img" /><img src="images/maintenance_kit06.jpg" alt="picture" width="296" height="230" class="img" /></p>
<div class="lister">
<div class="clr"></div>
<div class="footer">
<div class="FBG">
<div class="footer_resize">
<div class="foot_nav">
<h2>Main Navigation:</h2>
<li><a href="./../../">Home</a></li>
<li><a href="./../../services.html">Services & Capabilities</a></li>
<li><a href="./../../products.html">Products</a></li>
<li><a href="./../../customers.html">Customers</a></li>
<li><a href="./../../about.html">About us</a></li>
<li><a href="./../../contact.html">Contact</a></li>
<div class="foot_nav">
<h2>Site Info:</h2>
<li><a href="./../../privacy.html">Privacy Policy</a></li>
<li><a href="./../../terms.html">Terms of Use</a></li>
<li><a href="./../../sitemap.html">Sitemap</a></li>
<div class="clr"></div>
<div class="FBG">
<div class="footer_resize">
<p class="leftt"> Copyright <a href="./../../">Enginetics Technologies</a>, Inc. All Rights Reserved. <br />
<p class="rightt"><a href="http://dreamtemplate.com/"></a></p>
<div class="clr"></div>

10-26-2009, 07:49 PM
Hello lsargent,
It would be difficult to get the left image to line up with the right images when they are not in the same container with each other. If they need to line up, maybe another div is in order.
Try adding something like this bit highlighted in red -
="picture" class="img" width="297" height="220"></p>
<p class="img"><img src="images/maintenance_kit05.jpg" alt="picture" class="img" width="296" height="230"><img src="images/maintenance_kit06.jpg" alt="picture" class="img" width="296" height="230"></p>
<div class="lister">

<div id="foot2"><p class="img"><img src="images/maintenance_kit01.jpg" alt="picture" class="img" width="297" height="220"></p>
<p class="img"><img src="images/maintenance_kit02.jpg" alt="picture" class="img" width="297" height="222"></p>
<p class="img"><img src="images/maintenance_kit03.jpg" alt="picture" class="img" width="297" height="220"></p>
<div class="clr"></div>
<div class="footer">
<div class="FBG">
<div class="footer_resize">
<div class="foot_nav">
<h2>Main Navigation:</h2>