homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

bottom border of div bleeds across page
despite having a CSS colum of content beside it!

5+ Year Member

Msg#: 3635087 posted 3:20 pm on Apr 25, 2008 (gmt 0)

I have a two colum layout - simplified HTML and CSS shown below.
(Navigation and footer DIV's not shown, they do not affect the issue)
On the left (lhs_content) column there are four (only two shown here for bevity) DIV's with borders. The right (rhs_sidebar) column has four or five images (two shown for clarity). In IE6 (randomly) the bottom borders of some or all of the DIV's bleed all the way across the page, but not the content or background. Due to compatibility issues with 100's of other historic pages on the site the DTD is not specified, so is rendering in quirks mode.


#lhs_content { position: relative;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 9px;
padding-left: 0px;
margin-right: 230px;
border-right: 1px solid #0033cc }

#rhs_sidebar { position: relative;
width: 210px;
padding-top: 10px;
padding-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
margin-left: 10px;
float: right }

.banner { width: 210px;
padding-top: 0px;
padding-bottom: 10px }

#newlatest { width: 552px;
border: 1px solid #CC0033;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #FFEEEE }

#newhome (identical to #newlatest, just different colours)


<div id="rhs_sidebar">

<div class="banner"><a href="file1.html">
<img src="banner1.jpg"
alt="banner 1 text" width="210" height="70"></a></div>

<div class="banner"><a href="file2.html">
<img src="banner2.jpg"
alt="banner 2 text" width="210" height="70"></a></div>


<div id="lhs_content">

<div id="newlatest">
<h2>Latest News</h2>
<li><a href="news1.html">News 1 Headline</a></li>
<li><a href="news2.html">News 2 Headling</a></li>
<p><a href="latest.html">More Latest News...</a></p>

<div id="newhome">
<h2>Home News</h2>
<li><a href="home1.html">Home 1 Headline</a></li>
<li><a href="home2.html">Home 2 Headling</a></li>
<p><a href="latest.html">More Home Items...</a></p>




WebmasterWorld Senior Member 10+ Year Member

Msg#: 3635087 posted 7:01 pm on Apr 25, 2008 (gmt 0)

Just a quick look makes me thinks it is because you do not have a set width for #lhs_content, unless I am missing something else.

Just a side note, you can shortcut your margin and padding designations:

padding: 0 0 3px 4px; /* top, right, bottom, left */
margin: 0 4px 5px 0;

I just picked these numbers out of the air.



5+ Year Member

Msg#: 3635087 posted 8:30 pm on Apr 25, 2008 (gmt 0)

Thanks Marshall, that is bizarre! I had a very similar layout before and no problem at all with bleeding borders! I deliberately didn't specify a width for LHS, 'cos it had a margin to stop it overlapping the RHS - and there can be issues with mis-rendering pixel-perfect layouts.
I usually do shortcut the margins, padding, etc, but when still in development I keep them seperate so I can find them more easily!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved