Welcome to WebmasterWorld Guest from 23.21.38.201

Forum Moderators: not2easy

problems with divs in FF

   
11:28 pm on Apr 12, 2010 (gmt 0)

5+ Year Member



Hi, im very new to using css to do any significant changes to the website so i might be missing something simple but ive been racking my head for ages and found no previous posts about it(they all included floats from what i could find) so fiqured i should ask for help here.

Effectively the problem is two-fold. The first is background color not displaying correctly in my navigation pane, and secondly is the header div is not being displayed centrally. They display fine in IE but seeing as IE is quite loose with the rules i know it doesnt mean much.

Code shortened to make it easier to read

HTML:
<body>
<div class="header">
</div>
<div class="leftPanel">
</div>
<div class="centerPanel">
</div>
<div class="rightPanel">
</div>
</body>

CSS:
.leftPanel
{
position: absolute;
top: 61px;
left: 10px;
width: 180px;
background: #ADDFFF;
}
.centerPanel
{
padding-left: 12px;
padding-right: 12px;
margin-right: 181px;
margin-left: 181px;
}
.rightPanel
{
position: absolute;
top: 61px;
right: 10px;
width: 180px;
}

.header
{
padding-left: 12px;
padding-right: 12px;
margin-right: 181px;
margin-left: 181px;
}

Thanks in advance
12:31 pm on Apr 16, 2010 (gmt 0)

5+ Year Member



when testing your code, the page didn't display for me at all :)

absolute positioning is not recommended as it can be displayed very differently in the different browsers and with different resolutions or window sizes.

i understand if you're "afraid" of floats at the beginning, i was too, but then i found a very easy explanation to it and suddenly understood.

The only thing you have to keep in mind with floats is to float:left any block that has to be placed side by side and only float:right the very last one. Also, make sure that you wrap it up with a wrapper div that has the same width (or more) than the sum of the floated divs. warapping is very useful as that way you can move your floated divs along the page as you like (ie centering them).

Let me give you a nice example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>

<style type="text/css">
<!--
body { margin: 0; padding: 0 }
#mainWrapper{ width: 1000px; margin: 0 auto; }
#divLeft { float:left; background-color: red; width: 200px; }
#divCenter { float: left; background-color: blue; width: 600px; }
#divRight { float: right; background-color: green; width: 200px; }
-->
</style>
</head>

<body>
<div id="mainWrapper">
<div id="divLeft">Left box</div>
<div id="divCenter">Some text</div>
<div id="divRight">Right box</div>
</div>
</body>
</html>


one more thing: if you want to place another block below the 3 columns, the only thing you have to do is use clear:both in the div below or simply add the following code:


<div style="clear:both"></div>


this will clear the floats and place your next block under the floated ones as normal (starting top left).

i'm not entirely sure why the background color doesn't display for you, but maybe the above will solve it.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month