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

CSS Forum

Float Right ; Box spills to the left hand side

10+ Year Member

Msg#: 798 posted 5:27 pm on Mar 27, 2003 (gmt 0)

Ok I have a simple relative box with two flanking sides, the center box has repeating boxs down the middle with pictures in some of them floating too the left with the clear; fix to hold its side,
but when i chnge it so it floats to the right, the box spills too the left hand edge in ie6, but not in opera.
any ideas.

some code:
.column-wrap { position: relative; background-color: #6c9; padding-top:1px;z-index:1;}
.column-1 { position: absolute; left: 0px; top: 11px; width: 200px; background-color: #fc0; z-index:3;}
.column-2 { position:relative; margin-left: 200px; margin-right: 300px; margin-top: 10px; background-color: #f90; z-index:3;}
.column-3 { position: absolute; right: 0px; top: 11px; width: 300px; background-color: #ff6600; z-index:3;}
.block { position: relative ;background-color: #555; padding:5px;border:1px solid #ccc;}
img {border: 0; }
float: right;
position: relative;
height: 280px;
padding: 1px 10px 1px 1px;

and the site script :

<div class="column-2-wrapper">
<div class="column-2">
<h2>Column Two</h2>
<div class="block"><p>Filler</p></div>
<div class="block"><img src="images/pictures/mawda3.jpg" class="imglft" align="right"><p>Filler1</p>
&nbsp;<div style="clear: both;"></div></div>
<div class="block"><p>Filler</p></div>
<div class="block"><p>Filler</p></div>



WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 798 posted 7:40 am on Mar 31, 2003 (gmt 0)

Hmmm... not sure. Anyone?



WebmasterWorld Senior Member blobfisk us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 798 posted 12:37 pm on Mar 31, 2003 (gmt 0)

I'm not to sure on this one either! Have you tried a display:block on the img.imglft? Also, could the align="right" in the html code be throwing IE out a little? You could try removing that and see if it makes any difference...


WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 798 posted 2:03 pm on Mar 31, 2003 (gmt 0)

Hi it's a strange one.. had a quick look and found that putting a width on the .imglft class (auto did it) seemed to correct this , but it was a quick look and not tested crossbrowser

I seem to remember there is a float: right bug in IE...
can't remember where I found it, or even if it's the same bug..but I'll post it later if I find the link

<added>the bug link [positioniseverything.net]</added>

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