Float issues

  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

I restructured my site into a two column layout for most of the pages and I am still running into this weird float anomaly that only seems to poke through on IE6. I have the left div floated to the left and the right div has a margin that is exact (right now2 px greater than) as the left div. In IE6 the index page is all kinds of warped with the top two divs, as well as with the main content layout of most of my other pages. In short, the right div is being pushed below the left in IE6, but in firefox/opera/safari - all is as planned.... If I need to post more specific info let me know otherwise could you give me some common reasons for this?

Thanks ahead :)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Code: [ Select ]
#topRightIndex {
    background-image: url(../Images/BackgroundCSS/TopRightBack.jpg);
    background-repeat: no-repeat;
    padding: 0px;
    height: 200px;
    width: 495px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 405px;
}
  1. #topRightIndex {
  2.     background-image: url(../Images/BackgroundCSS/TopRightBack.jpg);
  3.     background-repeat: no-repeat;
  4.     padding: 0px;
  5.     height: 200px;
  6.     width: 495px;
  7.     margin-top: 0px;
  8.     margin-right: 0px;
  9.     margin-bottom: 0px;
  10.     margin-left: 405px;
  11. }


I think you should change the selector above to...

Code: [ Select ]
#topRightIndex {
    background-image: url(../Images/BackgroundCSS/TopRightBack.jpg);
    background-repeat: no-repeat;
    padding: 0px;
    height: 200px;
    width: 495px;
    margin:0;
    float:left;

}
  1. #topRightIndex {
  2.     background-image: url(../Images/BackgroundCSS/TopRightBack.jpg);
  3.     background-repeat: no-repeat;
  4.     padding: 0px;
  5.     height: 200px;
  6.     width: 495px;
  7.     margin:0;
  8.     float:left;
  9. }


If it still wants to wrap, set overflow:hidden;
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

Floating both divs left ended up with some unwanted graphical problems - namely the background pic was pressed tightly up against the left one, and I was going for the spaced look. I tried floating it right and it still didn't seem lined up with the edge of the container. However, when I set the overflow to hidden on the right div it worked like a charm. I haven't been able to confirm this on IE6 yet, but IE7 is fine. Thanks for your help digtalMedia. :)

I need to read up on CSS, I use Dreamweaver and I have come to realize from other excellent CSS designed sites, that dreamweaver doesn't have the entire range of CSS coding in it's CSS panel. I honestly never even knew what overflow was for - thought it had something to do with AP divs...:oops:
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

I did some more tests on my work computer, but it doesn't update the browser cache (because of tracking purposes), and I am still seeing the right column div on my music page layout being pushed down. :(

I am still amazed at the great designs out there - exponentially more complex than my simple two column layout - and yet so beautifully correct....
  • paul_l81
  • Beginner
  • Beginner
  • paul_l81
  • Posts: 41

Post 3+ Months Ago

This is my thoughts..

The right div would only get pushed down if the left & right div's width together is greater than the width of the base container.

I suggest, removing the width statement from

Code: [ Select ]
#container {
    width: 900px;
    margin-right: auto;
    margin-left: auto;
}
  1. #container {
  2.     width: 900px;
  3.     margin-right: auto;
  4.     margin-left: auto;
  5. }


and see what happens. I don't have IE6 installed on my PC, so I cant say for sure. Let me know how u get on.
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

Paul, if I were to do that it would negate the point of using the container the way I am using it. I could make the container a wee-bit larger, but then it would mess up the whole - Block look of the header/navigation bar and the content area. I wanted everything to run nice and smooth. The thing is that none of the div elements extend, even with their margins, past the container's width. That's why I am confused the most. IE7 seems to be good, and firefox, opera and safari always displayed correctly. IE6 - I am on a mac, so I can't test it ATM. I feel like the overflow helped IE7 and 6 "should" follow suite...yeah right :)
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I always like to refer to this thread when having issues with widths etc ...

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 38 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.