172 users online (1 members and 171 guests)  

> > > > Need help with Alignment problem for two column layout

  Results 1 to 6 of 6

Related

  1. CSS two column problem    Forum: CSS Forum
    Replies: 5
  2. Layout alignment problem    Forum: CSS Forum
    Replies: 16
  3. nested table relative column alignment    Forum: HTML Forum
    Replies: 2
  4. CSS Layout - 3 Column Plus    Forum: HTML Forum
    Replies: 3
  5. Making two column layout work with IE    Forum: CSS Forum
    Replies: 6
  1. 04-16-2007, 07:54 PM #1
    designkitt
    designkitt is offline
    designkitt's Avatar
    New User
    Status
    Offline
    Join Date
    Sep 2006
    Posts
    8

    Need help with Alignment problem for two column layout

    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;
}
    Last edited by DeadMeatGF; 04-17-2007 at 06:33 AM. Reason: Added Code tags
    Reply With Quote Reply With Quote
  2. 04-18-2007, 09:05 AM #2
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733

    Re: Need help with Alignment problem for two column layout

    Hi there designkitt

    unfortunately your link...
    http://www.kittelbergerdesign/JBarber/testpage.htm
    ...does not work.
    Reply With Quote Reply With Quote
  3. 04-18-2007, 01:56 PM #3
    designkitt
    designkitt is offline
    designkitt's Avatar
    New User
    Status
    Offline
    Join Date
    Sep 2006
    Posts
    8

    Re: Need help with Alignment problem for two column layout

    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.
    Last edited by designkitt; 04-18-2007 at 01:59 PM.
    Reply With Quote Reply With Quote
  4. 04-20-2007, 08:57 PM #4
    designkitt
    designkitt is offline
    designkitt's Avatar
    New User
    Status
    Offline
    Join Date
    Sep 2006
    Posts
    8

    Re: Need help with Alignment problem for two column layout

    Problem solved... thank you anyway!
    Reply With Quote Reply With Quote
  5. 09-04-2007, 01:14 AM #5
    pakistanboy
    pakistanboy is offline
    pakistanboy's Avatar
    Disabled
    Status
    Offline
    Join Date
    Sep 2007
    Posts
    5

    Re: Need help with Alignment problem for two column layout

    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
    Last edited by HTML; 09-07-2007 at 08:21 AM. Reason: sig removed
    Reply With Quote Reply With Quote
  6. 09-04-2007, 02:00 AM #6
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733

    Re: Need help with Alignment problem for two column layout

    Hi there pakistanboy,

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


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread