...

View Full Version : Float problem



asder
05-14-2008, 10:20 AM
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
http://data.fuskbugg.se/skalman01/-firefox.jpg

IE
http://data.fuskbugg.se/skalman01/ie.jpg

Here is the 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>




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;
}

jhaycutexp
05-14-2008, 11:25 AM
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... :rolleyes::thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum