Annoying right column/banner alignment issue

This is my first post on this forum, and I’m new to CSS in general, so if my question has been answered already or seems amateur, I apologize in advance. (However I have searched this site looking for the answer, without any luck, before posting this question). Basically my question is in regard to the “Holy grail” three column layout, and the “3 columns all fluid” layout from the glish site. I notice on the far right side of the screen, where the right column and the banner should line up, the banner seems to be a pixel further to the right than the right column. I really noticed this when I made the banner and the columns fill up 100% of the screen on the “all fluid” layout; the background color still shows up to the right of the right column. Could this just be a display problem with my browser? It’s just annoying me, and I would like to know how to make it line up exactly. I have looked through my code but maybe I have overlooked something, so I will include it as well. Thanks for any responses.

new CSS.css:

body {
background:orange;
margin:0px;
padding:0px;

}
html {
margin:0px;
padding:0px;
border: none;

}
#banner {
width:100%;
height:115px;
float:top;
border:1px solid #000;
}
#mainleft {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
border:1px solid #000;

}

#maincenter {
width:34%;
float:left;
background:#fff;
padding-bottom:10px;
border:1px solid #000;

}

#mainright {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
border:1px solid #000;

}
p,h1,pre {
margin:0px 10px 10px 10px;

}
h1 {
font-size:14px;
padding-top:10px;

}
#banner h1 { margin:0px; padding:0px}

3 column layout.html:

<html >

<div id="banner"><p>textextextextext</p></div>

<div id="mainleft"><h1>mainleft</h1>

<div id="maincenter">
<h1>maincenter</h1>

<div id="mainright"><h1>mainright</h1>

<p>textext.</p></div>

</body>
</html>

Annoying right column/banner alignment issue

mwlewis

skube

mwlewis

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week