Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Thanked 0 Times in 0 Posts

    Unhappy CSS 3 column content dropping error ie6

    i have never done a css fluid website before and because of this i have encountered problems which i cant resolve.

    Problem is that on http://sellitswapit.com/ when viewed in ie6 browser (less than 1024 pixels width) the content of the middle column drops to the height/level of where right column ends.

    if any one has any idea of why this is occuring please let me know, as I have racked my brains and cant work it out.

    any suggestions appreciated.


  • #2
    Senior Coder
    Join Date
    Nov 2003
    Minneapolis, MN
    Thanked 65 Times in 56 Posts
    Since I'm on a Mac it's a little harder for me to troubleshoot code on IE. But at first glance I'd say the method you are using—floating the left and right columns, not floating the middle and giving it full remaining width—can be very tricky to pull off cross-browser.

    What I would do is use absolute positioning…absolutely position the left and right columns to each side; position the center column in the middle and give it enough margin to clear them.

    Having said that, though, it looks like the reason things are dropping is because of the container holding the featured ads in place (#featured_contents). The images have more space in between than in other browsers. The first thing I would try is adding this:

    .sample_product {
    	background-color: #FFFFFF;
    	border: 1px solid #CCCCCC;
    	width: 120px;
    	padding: 9px;
    	float: left;
    	margin-right: 3px;
    	margin-left: 3px;
    	color: #0B74F4;
            /* IE 6 */
            display: inline-block;
    If that doesn't do it then at least you know where the trouble is coming from.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts