Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

IE position bug?

Options
  • 30-08-2005 6:04pm
    #1
    exactiv
    Closed Accounts Posts: 546 ✭✭✭


    Hi. I'm trying to figure out why IE is rendering my site incorrectly. I have four DIVs, each one has a set width, and both of the left DIVs are set to float left. The idea is for a four section layout. It works fine in Firefox & Opera, but IE keeps rendering each container below the other... I can't see why... Is it a bug in IE?

    Any help would be very much appreciated.
    Here's the url: http://www.windpoweredireland.com/concept/

    The code for each:

    index.php
    [PHP]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml&quot; lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="config/concept.css" type="text/css" />
    <title>Concept</title>
    </head>

    <body>

    <!--start main container -->
    <div id="holdme">

    <!-- start upper left nav container -->
    <div id="upperleft">test left</div>
    <!-- end upper left nav container -->

    <!-- start upper right photo container -->
    <div id="upperright">test right</div>
    <!-- end upper right photo container -->

    <!-- now we need to clear the float -->
    <div style="clear:both;"></div>
    <!-- *** -->

    <!-- start lower left nav container -->
    <div id="lowerleft">test left</div>
    <!-- end lower left nav container -->

    <!-- start lower right photo container -->
    <div id="lowerright">test right</div>
    <!-- end lower right photo container -->


    </div>
    <!--end main container -->

    </body>
    </html>
    [/PHP]


    concept.css     
    /* CSS Document */

/************************************************
**** DESIGN BY: 							 **** 
****            www.windpoweredireland.com	 **** 
**** START DATE: 30/08/2005					 **** 
************************************************/

body {
	background-color:rgb(238,238,238);
	margin: 0px;
	padding: 0px;
	text-align:center;
	}

/* Main Container */
#holdme {
	width:780px;
	border:1px solid pink;
	margin:10px auto;
	text-align:left;
	line-height: 120%;
	}

/* Content Containers */
#upperleft {
	width:240px;
	float:left;
	background-color:#666;
	}

#upperright {
	width:540px;
	margin-left:240px;
	background-color:#FFF;
	}

#lowerleft {
	width:360px;
	float:left;
	background-color:blue;
	}

#lowerright {
	width:420px;
	margin-left:360px;
	background-color:red;
	}


Comments

  • Options
    #2
    Serbian
    Registered Users Posts: 2,157 ✭✭✭Serbian


    This is how I would have done it:

    [php]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    #holdme {
    width:780px;
    border:1px solid pink;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    }

    .minHeight {
    height: 1px;
    }

    .prop {
    float:right;
    width:0px;
    }

    .clear {
    clear: both;
    height: 0px;
    overflow: hidden;
    }

    #upperleft,
    #upperright,
    #lowerleft,
    #lowerright {
    float: left;
    text-align: left;
    }

    #upperleft {
    width: 240px;
    background-color: #666;
    }

    #upperright {
    width:540px;
    background-color: #FFF;
    }

    #lowerleft {
    width:360px;
    background-color: blue;
    }

    #lowerright {
    width: 420px;
    background-color: red;
    }

    -->
    </style>
    </head>

    <body>

    <div id="holdme">
    <div class="prop minHeight"></div>
    <div id="upperleft">test upleft</div>
    <div id="upperright">test upright</div>
    <div id="lowerleft">test lowerleft</div>
    <div id="lowerright">test lowerright</div>
    <div class="clear"></div>
    </div>

    </body>
    </html>[/php]

    Seems to work in IE6 and Mozilla. Haven't tested it elsewhere.


  • Options
    #3
    exactiv
    Closed Accounts Posts: 546 ✭✭✭exactiv


    that works perfectly. nice one ;)

    How does it work is my next question?

    What is the function of: [html] .minHeight {
    height: 1px;
    }

    .prop {
    float:right;
    width:0px; [/html]


Advertisement