PDA

View Full Version : CSS alignment problem with two column layout



designkitt
Apr 17th, 2007, 01:47 AM
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:
<!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:

/* 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;



}

Excavator
Apr 17th, 2007, 02:59 AM
Try making your CSS look like this:

.textbox {
background-color: #e7e7e7;
width: 300px;
height: 75px;
float: left;
padding: 10px;
margin: 100px 0 0 0;



}

==========================================

Or, with a few more changes, you may like this:
markup:

<!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 class="leftcol">
<img src="7378emainst.jpg" alt="7378 East Main St Lima" width="350" height="250" class="floatLeft" />
<div class="textbox">
<p><strong>xxxxxxxxxxxxxxxxxxxxxxxx</strong></p>
<p class="subheading">xxxx ccc ccc cc
<br />
vvvvvvvv</p>
</div>
</div>

<div class="leftcol">
<img src="1839rochesterst.jpg" width="350" height="250" alt="1839 Rochester St" class="floatLeft" />
<div class="textbox">
<p><strong>xxxxxxxxxxxxxxxxxxxxxxxx</strong></p>
<p class="subheading">xxxx ccc ccc cc
<br />vvvvvvvv</p>
</div>

</body>
</html>
and CSS:

/* 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;
}
#wrapper{
width: 750px;
margin: 0 auto;
background-image:url(images/sky.jpg);
}
#banner {
height: 134px;
width: 750px;
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
}
#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;}



h2 {
font-size:18px;
font-family: times;
color: #333;
font-variant: small-caps;
letter-spacing: 4px;
line-height: 200%;

}
.leftcol {
width: 750px;
overflow: hidden;
margin: 20px 0 0 0;

}
.textbox {
background-color: #e7e7e7;
width: 300px;
height: 75px;
margin-left: 370px;
}
.floatLeft {
float: left;
}
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;



}

designkitt
Apr 17th, 2007, 11:50 AM
Thank you for the quick reply. Your suggestion for the text box works great! I will probably have to create a different class for each one though, or else they will not align correctly.

I forgot to mention that I have way to much space in IE below the banner and I cannot get the banner to center (there is space to the left), but it looks fine in firefox. Do you have any idea how to correct this??

Excavator
Apr 17th, 2007, 03:13 PM
.leftcol {
width: 750px;
overflow: hidden;
margin: 20px 0 0 0;

}
Play with that margin to adjust space under #banner. If you don't want any space at all just take that whole margin: ...; out.

\edit... Shorthand for margin/padding goes like this:

margin: top right bottom left; ...edit/

===============
For centering your banner, I can only guess since I don't have the image. This is where a link to your test site would be nice. Try this though:

#banner {
height: 134px;
width: 750px;
background: url(images/banner.jpg) no-repeat center;
}

designkitt
Apr 17th, 2007, 07:04 PM
I really appreciate all your help. I added the center to the banner but it only dropped it down about an inch, still space on the right.

I tried taking the margin away from the rightcol and leftcol and added your overflow code but that didn't seem to bring those columns up at all. Any other ideas for either problem.

Here are the urls:
http://kittelbergerdesign.com/JBarber/testpage.html
http://kittelbergerdesign.com/JBarber/testpage.css

Thanks.

Excavator
Apr 17th, 2007, 07:29 PM
Thanks for the link, makes all the difference in the world!
Your positioning your nav using lineheight... and that's what's giving you the big space under your header.
The DOM inspector in FireFox, and the edit CSS in the WebDevelopersToolbar, is what I used to work on this. Makes it pretty easy to see what's happening.

I quoted the CSS I change here and tried to comment on what I did:

/* CSS Document */

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: none;
}
body {
background-color: #333;
}
#wrapper{
width: 750px;
margin: 0 auto;
background-image:url(images/sky.jpg);
overflow: hidden; /*added this to clear your floats, also removed .clearit*/
}
#banner {
height: 134px;
width: 750px;
background-image:
url('images/banner.jpg'); /*got rid of some unnecessary stuff*/
border-top: 1px solid; /*added this to fix the colapsing margins I created when I margined your nav down*/
}
#navigation {
padding: 0 1px 1px 5px;
margin: 115px 5px 5px 10px; /*used margins to position your nav instead of line-height*/
font: bold 11.25px arial, sans-serif;
}
#navigation li {
list-style: none;
margin: 2px;
float:right; /*float right is good enough, don't need display inline*/
}
#navigation li a:visited {color: #000000;}
#navigation li a {padding: 0.5em 1em 0.5em 0.75em;
text-decoration: none;}


Hope that helps!


...oh yeah, read about collapsing margins here. (http://www.complexspiral.com/publications/uncollapsing-margins/)

designkitt
Apr 19th, 2007, 01:14 AM
Well, I made the changes and still have a problem in IE, & firefox on my mac. Haven't checked IE on a pc yet but can only imagine there is a problem. The text and text box seem to be following the image and I need it to the right of the image.

Here are the links:
http://kittelbergerdesign.com/JBarber/testpage4.html
http://kittelbergerdesign.com/JBarber/testpage4.css



Should I be placing this text and text box in a right column perhaps? I tried this and already and it works great on my mac browsers but on my pc in IE the text follows below and to the right.
Here are these links:
http://kittelbergerdesign.com/JBarber/testpage2.html
http://kittelbergerdesign.com/JBarber/testpage2.css

Maybe my doc type is wrong.

Thanks so much for all your suggestions!

Excavator
Apr 19th, 2007, 02:21 AM
Hmm, the only difference I can see is a missing </div>. The validator finds it too. (http://validator.w3.org/check?verbose=1&uri=http://kittelbergerdesign.com/JBarber/testpage4.html)

Look at this working code again and see if you can find any other differences:
<!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 class="leftcol">
<img src="7378emainst.jpg" alt="7378 East Main St Lima" width="350" height="260" class="floatLeft" />
<div class="textbox">
<p><strong>xxxxxxxxxxxxxxxxxxxxxxxx</strong></p>
<p class="subheading">xxxx ccc ccc cc
<br />
vvvvvvvv</p>
</div>
</div>

<div class="leftcol">
<img src="1839rochesterst.jpg" width="350" height="250" alt="1839 Rochester St" class="floatLeft" />
<div class="textbox">
<p><strong>xxxxxxxxxxxxxxxxxxxxxxxx</strong></p>
<p class="subheading">xxxx ccc ccc cc
<br />vvvvvvvv</p>
</div>

</body>
</html>

designkitt
Apr 19th, 2007, 02:58 PM
I did add the missing </div>.

It line ups great in on my PC IE6. Basically, this is a one column layout, correct?

I now know what caused the problem with the text box alignment. It happened when I added a second class to the image tag.

ex.)
<img class="stylename" src="images/7378emainst.jpg" alt="7378 East Main St Lima" width="350" height="250" class="floatLeft" />

If this is not acceptable, how else could I add borders to these images?

Excavator
Apr 19th, 2007, 06:16 PM
<img class="stylename" src="images/7378emainst.jpg" alt="7378 East Main St Lima" width="350" height="250" class="floatLeft" />

If this is not acceptable, how else could I add borders to these images?


I would have to look at this again, I don't remember it... but this might help - when applying 2 classes the correct syntax would be:

<img src="images/7378emainst.jpg" alt="7378 East Main St Lima" width="350" height="250" class="floatLeft stylename" />

Then, as long as you add your border width and adjust any containers accordingly, you shouldn't have any problem.

designkitt
Apr 21st, 2007, 03:02 AM
Thank you so much for responding to my post. So glad to say,my problem is solved.