Problems with alignment two column in IE [Archive]

View Full Version : Problems with alignment two column in IE

designkitt

04-17-2007, 01:36 PM

Hello,
I have created a two column layout and for some reason after the banner div it drops down too far (too much space) before the columns begin. I have tried alot of different things but cannot get this to work in IE. I also am having problems with the banner not centering. It leaves space on the right. I set the width the same as the wrapper border set to 0. Please help!

Thank you in advance!

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 {
border: 0;
background-color: #333;

}

#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;
margin: 0;
padding: 0;
border: 0;

}

#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;}

#container{
width: 750px;
border:0;
margin:0;
padding:0;
float: left;
}

.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;
margin-right: 0;
margin-bottom: 0;

}

#rightcol {

float: right;
padding: 0;
width: 340px;
margin-right: 10px;
margin-top: 80px;
margin-left: 0;
margin-bottom:0;

}

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

}

.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;

}

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 class="clearit"></div>

<div id="leftcol">

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

<br/>
<br/>
<img src="images/1839rochesterst.jpg" width="350" height="250" alt="1839 Rochester St" class="floatleft" />

</div>

<div id="rightcol">

<div class="textbox">

<p>
<strong>xxxxxxxxxxxxxxxxxxxxxxxx

</strong></p>

<p class="subheading">

xxxx ccc ccc cc<br />
vvvvvvvv</p>

</div>

<div class="textbox">

<p>
<strong>xxxxxxxxxxxxxxxxxxxxxxxx

</strong></p>

<p class="subheading">

xxxx ccc ccc cc<br />
vvvvvvvv</p>

</div>

<div class="clearit"></div>

</div>

</body>
</html>

Veronica

04-17-2007, 03:15 PM

A couple of things.
First, I changed navigation to a div, and put the ul inside that.
Then in the css for the navigation div, I adjusted the line-height to 2 instead of 22, and changed the margin to 10.
Then, I added another div around the left and right column.
And finally, added a closing tag to the wrapper div.
It seems to line up OK, tho you may need to make some adjustments for your pictures. Try just copying and pasting everything below into an html document to see.

<!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>
<style>
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}

body {
border: 0;
background-color: #fff;

}

#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;
margin: 0;
padding: 0;
border: 0;

}

#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: 10px; display: inline; float:right; line-height: 2em;}
#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;}

#container{
width: 750px;
border:0;
margin:0;
padding:0;
float: left;
}

.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;
margin-right: 0;
margin-bottom: 0;

}

#rightcol {

float: right;
padding: 0;
width: 340px;
margin-right: 10px;
margin-top: 80px;
margin-left: 0;
margin-bottom:0;

}

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

}

.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;

}

</style>

</head>

<body>

<div id="wrapper">

<div id="banner">

<DIV id="navigation"><UL>
<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="clearit"></div>

<DIV>
<div id="leftcol">

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

<br/>
<br/>
<img src="images/1839rochesterst.jpg" width="350" height="250" alt="1839 Rochester St" class="floatleft" />

</div>

<div id="rightcol">

<div class="textbox">

<p>
<strong>xxxxxxxxxxxxxxxxxxxxxxxx

</strong></p>

<p class="subheading">

xxxx ccc ccc cc<br />
vvvvvvvv</p>

</div>

<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>

</div>
</body>
</html>

designkitt

04-17-2007, 11:05 PM

Veronica, the alignment is much better... thank you so much. I ended up loosing the background image in firefox I had in the wrapper div... not sure why? Any thoughts?

Veronica

04-18-2007, 02:18 AM

Not sure. Can you upload it and send the URL so I can look in both FF and IE?

designkitt

04-18-2007, 11:11 AM

Here are the urls:

http://kittelbergerdesign.com/JBarber/testpage2.html
http://kittelbergerdesign.com/JBarber/testpage2.css

I tried validating in w3c and it didn't like the <body> tag with the type of doc I specified. I wonder if this is why the background image is missing in firefox & safari since its specified in the body properties of my css. I checked the page out in IE5.5 on my mac and it looks fine but haven't checked the page on a pc yet.

thanks.... again!

designkitt

04-18-2007, 12:00 PM

I added a div that was missing and removed another one. The background image now appears in firefox and safari and IE5.5 on my mac. Unfortunately, I still have an alignment problem in IE6 on my PC. :confused:

This is so flustrating. Please help!

Veronica

04-19-2007, 12:32 AM

Sorry - long day at work, but I'll look at it tonight. (BTW - nice houses!)

Veronica

04-19-2007, 03:52 AM

I think you might need more room in the left column for the pictures. Making the left margin a bit smaller should do it. Try changing the left-margin to 10 instead of 20:

#leftcol {
float: left;
width: 380px;
margin-top: 20px;
padding: 0;
margin-left: 10px;
margin-right: 0;
margin-bottom: 0;
}

Also, make sure you add height and width tags to the images. You might also want to change the margin-left for the right column.

#rightcol {
float: right;
padding: 0;
width: 340px;
margin-right: 10px;
margin-top: 100px;
margin-left: 0;
}

designkitt

04-19-2007, 11:10 PM

I can relate to long days.:(

I made the column changes you suggested and played around with it for quite some time today. The text in the right column starts out okay but then as it cascades down the spacing gets messed up. I tried playing around with the text box size, padding, using a transparent gif, and break tags but nothing seems to fix this. I need the text to correspond to the house and align horizontally approx. in the the middle of the home. Hope this makes sense. Do you think this can be done and if so what other approach do I need to take?

They are nice homes... especially the first and last one.

Here are the links once again:

http://kittelbergerdesign.com/JBarber/testpage2.html
http://kittelbergerdesign.com/JBarber/testpage2.css

Veronica

04-20-2007, 01:10 AM

Actually, if you want the houses and the text to align, it might be better to use a different design (sorry!)
Your banner div and links would stay as they are
Then under that would be a div for the first house. This would be subdivided into 2 divs, one for the picture, one for the text. Then a div to clear and repeat.

<body>
<div id="wrapper">
<div id="banner">
<div id="navigation"><ul>
<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>

<div id="house1">
<div class="leftcol">
<img class="stylename" src="images/31main.jpg" width="350" height="250" alt="31 Main Street" />
</div>
<div class="rightcol">
this is a great house
</div>
</div>

<div class="clearit"></div>

<div id="house2">
<div class="leftcol">
<img class="stylename" src="images/31main.jpg" width="350" height="250" alt="31 Main Street" />
</div>
<div class="rightcol">
this is another great house
</div>
</div>

<div class="clearit"></div>

</div>

</body>
</html>

You could still use your leftcol and rightcol styles, just change them to classes.

.leftcol {
float: left;
width: 380px;
margin-top: 20px;
padding: 0;
margin-left: 10px;
margin-right: 0;
margin-bottom: 0;
}
.rightcol {
float: right;
padding: 0;
width: 340px;
margin-right: 10px;
margin-top: 100px;
margin-left: 0;
}

designkitt

04-21-2007, 01:52 AM

Veronica thank you so much!

Your suggestions were great, the page works perfectly.:D

Lucky for me you saw my post.

Veronica

04-22-2007, 12:31 AM

Glad it's all working.

designkitt

04-23-2007, 01:01 AM

Veronica, I thought my post several days ago went through, but I guess not.

Thank you so much for all your help. Your suggestions worked great!:D

designkitt

04-23-2007, 01:02 AM

I guess it did go through, I just saw it after I submitted again. That's what you get when you stare at a computer screen for hours on end.