homepage Welcome to WebmasterWorld Guest from 54.198.94.76
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
problems with divs in FF
devett




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

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

 

webeno




msg:4116849
 12:31 pm on Apr 16, 2010 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved