CSS Layout - Problem

  • Moses08
  • Graduate
  • Graduate
  • Moses08
  • Posts: 196

Post 3+ Months Ago

Hi,

I'm having trouble with a new layout I'm designing.

Check it out at: http://madden.ath.cx/

The problem is on the bar that says: Madden Managers: Your Madden 2005 League. See how the grey background doesn't completely fill the box? How can I make it fill the entire box?

Here is my CSS file:

Code: [ Select ]

body
{
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: Verdana, sans-serif;
font-size: 10pt;
margin: 0px;
}

#headerbox
{
height: 100px;
border-width: 1px;
border-color: #000000;
border-style: solid;
}

#mainbox
{
margin: 5px;
}

#navigation
{
width: 150px;
float: left;
}

#maincontent
{
}

div.title
{
background: #CCCCCC;
border-width: 1px;
border-color: #000000;
border-style: solid;
}

div.content
{
border-top-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-color: #000000;
border-style: solid;
}
  1. body
  2. {
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box;
  5. font-family: Verdana, sans-serif;
  6. font-size: 10pt;
  7. margin: 0px;
  8. }
  9. #headerbox
  10. {
  11. height: 100px;
  12. border-width: 1px;
  13. border-color: #000000;
  14. border-style: solid;
  15. }
  16. #mainbox
  17. {
  18. margin: 5px;
  19. }
  20. #navigation
  21. {
  22. width: 150px;
  23. float: left;
  24. }
  25. #maincontent
  26. {
  27. }
  28. div.title
  29. {
  30. background: #CCCCCC;
  31. border-width: 1px;
  32. border-color: #000000;
  33. border-style: solid;
  34. }
  35. div.content
  36. {
  37. border-top-width: 0px;
  38. border-left-width: 1px;
  39. border-right-width: 1px;
  40. border-bottom-width: 1px;
  41. border-color: #000000;
  42. border-style: solid;
  43. }


Thanks in advance. :)
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23460
  • Loc: Woodbridge VA

Post 3+ Months Ago

Not sure what you're seeing. I looked in IE and Firefox and it fills the box on both.
  • Rat
  • Guru
  • Guru
  • User avatar
  • Posts: 1190
  • Loc: desk

Post 3+ Months Ago

I dont see a problem either. Both boxes are completely filled in.
  • Moses08
  • Graduate
  • Graduate
  • Moses08
  • Posts: 196

Post 3+ Months Ago

Doh...turned out to be a weird glare thing with my monitor. Sorry for wasting your time! :P

Anyway, I've run into another problem. In Mozilla, the padding of the box that says "Blah Blah Blah" isn't working properly. It seems to work fine in IE, but in Mozzila it won't pad. Any ideas?
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

took me a few minutes but I got it sussed:

the #maincontent div is overlapping the #navigation div. Add this css rule to your stylesheet:

Code: [ Select ]
#maincontent
{
border-left:10px solid red;
}
  1. #maincontent
  2. {
  3. border-left:10px solid red;
  4. }


And you will see that all is not as it appears. You are going to have to add a left-margin to the main content div, as detailed on the following 2 fluid layout examples:

http://www.glish.com/css/7.asp
http://www.caffeinefuelled.net/layouts/fluid/3_col.php

Neither example use the float to create the layout. I would advise you NEVER to float unless you really have to (ie you NEED a full-width footer). CSS floating has more bugs than anything, and you tend to just spend all day hacking to get it working on the various versions of IE. So never use it unless you have to.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 23 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.