Need help with Alignment problem for two column layout

**designkitt** · 04-16-2007, 07:54 PM

Hello,
I have a two column layout with a class that puts a gray box around text pertaining the the images on its left. For some reason, I cannot create a space between the two boxes so the gray boxes align with the middle of the image. I tried using a transparent gif separated by a <br/> , but that didn't work.

Any suggestions would be greatly appreciated!!
Thanks in advance!

Here is the html: http://www.kittelbergerdesign/JBarber/testpage.html

HTML Code:

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>xxxxxxxxxx</title>
<link href="testpage.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="wrapper">
  <div id="banner">
    <ul id="navigation">
      <li><a href="index.html">contact</a></li>
      <li><a href="about.html">property search</a></li>
      <li><a href="portfolio.html">client services</a></li>
      <li><a href="testimonials.html">testimonials</a></li>
      <li><a href="services.html">Jan's portfolio</a></li>
      <li><a href="mainframe.html">about Jan</a></li>
      <li><a href="index.html" target="_top">home</a></li>
    </ul>
  </div>

  <div id="leftcol">
    <img src="images/7378emainst.jpg" width="350" height="250" alt="7378 East Main St Lima" />
    <br/>
    <br/>
    <img src="images/1839rochesterst.jpg" width="350" height="250" alt="1839 Rochester St" />
  </div>

  <div id="rightcol">
    <div class="textbox">
      <p><strong>xxxxxxxxxxxxxxxxxxxxxxxx</strong></p>
      <p class="subheading">xxxx ccc ccc cc<br />vvvvvvvv</p>
    </div>
    <br/>
    <img src="images/trans.gif" height="100" width="3">
    <br />
    <div class="textbox">
      <p><strong>xxxxxxxxxxxxxxxxxxxxxxxx</strong></p>
      <p class="subheading">xxxx ccc ccc cc<br />vvvvvvvv</p>
    </div>
  </div>
  <div class="clearit"></div>
</div>

</body>
</html>

Here is the CSS: http://www.kittelbergerdesign/JBarber/testpage.html

Code:

/* CSS Document */

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  color: #333333;
  background-color: #000000;
  border: 0;
  padding: 0;
  margin: 0;
}
#wrapper{
  width: 750px;
  margin-left: auto;
  margin-right: auto;
  border:0;
  background-image:url(images/sky.jpg);
}
#banner {
  height: 134px;
  width: 750px;
  background-image:url(images/banner.jpg);
  background-repeat:no-repeat;
  float: left;	
}
#navbar li {
  display:inline;
  border:1px solid;
  margin:0 0 0 15px;
  padding:0 0 0 10px;
  line-height: 9em;
  float: left;
}
#navigation {
  padding: 0 1px 1px 5px; margin: 0 5px 5px 10px;
  font: bold 11.25px arial, sans-serif;
}
#navigation li {
  list-style: none;
  margin: 2px;
  display: inline;
  float:right;
  line-height: 22em;
}
#navigation li a:visited {
  color: #000000;
}
#navigation li a {
  padding: 0.5em 1em 0.5em 0.75em;
  text-decoration: none;
}
#navigation li a:link {
  color: #333;
}
#navigation li a:hover {
  color: #990000;
  text-decoration: underline;
}
.clearit{
  clear: both;
}
h2 {
  font-size:18px;
  font-family: times;
  color: #333;
  font-variant: small-caps;
  letter-spacing: 4px;
  line-height: 200%;
}
#leftcol {
  float: left;
  width: 380px;
  margin-top: 20px;
  padding: 0;
  margin-left: 10px;
  vertical-align: top;
}
#rightcol {
  float: left;
  padding: 0;
  width: 340px;
  margin-right: 10px;
  margin-top: 80px;
  vertical-align: top;
  border: 1px;
  border-color: #000;
}
.textbox {
  background-color: #e7e7e7;
  width: 300px;
  height: 75px;
  float: left;
  padding: 10px;
}
p {
  color: #000;
  font:normal 18px times, serif;
  line-height: 1.5em;
  letter-spacing: .12em;
}
p.subheading {
  font:normal 16px times, serif;
  letter-spacing: .8px;
  line-height: 1.5em;
}
IMG.stylename {
  border: 3pt solid white;
}
.rule {
  width: 500px;
  text-align: center;
  margin-left:25px;
  margin-right: 25px;
  background-color: #990000;
}
#footer {
  height:51px;
  width:890px;
  background-image:url(images/barberfooter.jpg);
  background-repeat:no-repeat;
}

**coothead** · 04-18-2007, 09:05 AM

Hi there designkitt

unfortunately your link...

http://www.kittelbergerdesign/JBarber/testpage.htm

...does not work.

**designkitt** · 04-18-2007, 01:56 PM

Sorry about that. Try this:
http://kittelbergerdesign.com/JBarber/testpage2.html
Here is the css:
http://kittelbergerdesign.com/JBarber/testpage2.css

I've been playing around with this since I first posted and now my problem is in IE. My second column contains text that I put in a div class. Instead of lining up to the right of the corresponding house, it is aligning after the houses end. Any suggestions would be greatly appreciated.

**designkitt** · 04-20-2007, 08:57 PM

Problem solved... thank you anyway!

**~~pakistanboy~~** · 09-04-2007, 01:14 AM

Hello,
I have problem with background position in CSS. I want to align image background in my div, but i used background position to control image background. It is showing warning in my rebuild.

Thank you,
Regards,
Pakistan Boy

**coothead** · 09-04-2007, 02:00 AM

Hi there pakistanboy,

I would suggest that you start a new thread for your problem and also supply a link to the problematic page.

Thread: Need help with Alignment problem for two column layout

Thread Tools

Related

CSS two column problem Forum: CSS Forum

Layout alignment problem Forum: CSS Forum

nested table relative column alignment Forum: HTML Forum

CSS Layout - 3 Column Plus Forum: HTML Forum

Making two column layout work with IE Forum: CSS Forum

Need help with Alignment problem for two column layout

Re: Need help with Alignment problem for two column layout

Re: Need help with Alignment problem for two column layout

Re: Need help with Alignment problem for two column layout

Re: Need help with Alignment problem for two column layout

Re: Need help with Alignment problem for two column layout

Tags for this Thread

Cloudjiffy- PaaS for Developers