Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Float problem

  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Float problem

    Im designing a site for a school project and im only allowed to use html and css (NOT JavaScript). But i have a problem when i try to float 3 divs to the same row. One of the divs is width: 100%; so that div pops down to the row below. It works fine in Firefox, all the three divs is on the same level, but not in IE.

    This is how it looks like...

    Firefox


    IE


    Here is the code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Ladder</title>
    		<link rel="stylesheet" href="css/style.css" type="text/css"></link>
    	</head>
    	
    	<body>
    	<div id="left">
    	</div>
    	<div id="middle">
    		
    		<div id="logo">
    			<img src="images/logo.png">
    		</div>
    		<p>
    		<div id="login">
    		
    			<div class="windowtop">
    				<div class="topleft">&nbsp;</div>
    				<div class="topright">&nbsp;</div>
    				<div class="top">&nbsp;</div>
    			</div>
    			<div class="windowmiddle">
    				<div class="left">&nbsp;</div>
    				<div class="right">&nbsp;</div>
    				<div class="main">&nbsp;</div>
    			</div>
    			<div class="windowbottom">
    				<div class="bottomleft">&nbsp;</div>
    				<div class="bottomright">&nbsp;</div>
    				<div class="bottom">&nbsp;</div>
    			</div>
    			
    		</div>
    	<p>
    		<div id="content">
    		
    			<div class="windowtop">
    				<div class="topleft">&nbsp;</div>
    				<div class="topright">&nbsp;</div>
    				<div class="top">&nbsp;</div>
    			</div>
    			<div class="windowmiddle">
    				<div class="left">&nbsp;</div>
    				<div class="right">&nbsp;</div>
    				<div class="main">&nbsp;</div>
    			</div>
    			<div class="windowbottom">
    				<div class="bottomleft">&nbsp;</div>
    				<div class="bottomright">&nbsp;</div>
    				<div class="bottom">&nbsp;</div>
    			</div>
    			
    		</div>
    		
    	</div>
    	
    	<div id="rightborder">
    	&nbsp;
    	</div>
    	</body>
    </html>
    Code:
    html, body {
    font-family: Verdana, Tahoma, Arial, sans-serif;
    padding: 0px;
    margin: 0px;
    height: 100%;
    }
    
    #middle {
    padding-left: 20px;
    padding-right: 0px;
    width: 800px;
    height: 100%;
    float: left;
    }
    
    #logo {
    height: 200px;
    }
    
    #rightborder {
    background-image: url(../images/border.png);
    height: 100%;
    width: 200px;
    float: left;
    }
    
    #content {
    width: 780px;
    height: 330px;
    }
    
    #login{
    width: 500px;
    height:50px;
    }
    
    .topleft{
    background-image: url('../images/topleft.gif');
    background-repeat: no-repeat;
    width: 16px;
    height: 13px;
    float: left;
    }
    
    .left{
    background-image: url('../images/left.gif');
    background-repeat: repeat-y;
    background-color: #E0E0E0;
    width: 16px;
    height: 100%;
    float: left;
    }
    
    .bottomleft{
    background-image: url('../images/bottomleft.gif');
    background-repeat: no-repeat;
    width: 18px;
    float: left;
    }
    
    .top{
    background-image: url('../images/top.gif');
    background-repeat: repeat-x;
    width: 100%;
    height: 13px;
    }
    
    .main{
    background-color: #E0E0E0;
    width: 100%;
    height: 100%;
    }
    
    .bottom{
    background-image: url('../images/bottom.gif');
    background-repeat: repeat-x;
    width: 100%;
    }
    
    .topright{
    background-image: url('../images/topright.gif');
    background-repeat: no-repeat;
    width: 20px;
    height: 13px;
    float: right;
    }
    
    .right{
    background-image: url('../images/right.gif');
    background-repeat: repeat-y;
    background-color: #E0E0E0;
    background-position: right;
    height: 100%;
    width: 20px;
    float: right;
    }
    
    .bottomright{
    background-image: url('../images/bottomright.gif');
    background-repeat: no-repeat;
    width: 19px;
    float: right;
    }

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    set the margins and padding to zero...

    *{margin:0;
    padding:0;
    }

    i'm just curious.. why are you setting the width:100% to the middle part of the topleft and topright? just erase those...

    youve set the size of this login which is...
    #login{
    width: 500px;
    height:50px;--> remove this.. if you want a dynamic height..
    }

    just do the math homie...

    <div id="login">

    <div class="windowtop">
    <div class="topleft">&nbsp;</div>
    <div class="topright">&nbsp;</div>
    <div class="top">&nbsp;</div>
    </div>
    <div class="clear"></div>--> this is to make sure that the next div which is window middle starts at the bottom of window top...

    i'll just do the top okay? you do the rest...

    .topleft{float:left;
    width: 16px;
    height: 13px;
    background:url(..image);
    }
    .top{float:left;
    background:url(..image);
    width: 468px;
    height: 13px;
    }
    .topright{float:left;
    background:url(..image);
    width: 16px;
    height: 13px;
    }

    .clear {clear:both}
    this should do the trick... i think...


  •  

    Posting Permissions

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