33 users online (0 members and 33 guests)  


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

  2. #2
    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
    732

    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.

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

  4. #4
    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!

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

  6. #6
    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
    732

    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.



Tags for this Thread