SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Location
    London
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FF 3rd column height issue

    Hi

    I am coding a new design and this is what I have so far: http://www.ukdrn.org/new/index_new.html

    It looks fine in IE7 but in FF the right hand column is longer than the content and overflows into the background colour.

    Any advice on how to fix this would be greatly appreciated.

    Here is my CSS

    Code:
    /*tags*/
    body{
    	margin:0;
    	padding:0;
    	font-family:Tahoma;
    	background-color:#AD926B;
    	text-align:center;
    	font-size:62.5%; /* Explain @ www.clagnut.com/blog/348/ */
    }
    img {
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    }
    img a:link, a:visited{
    	text-decoration:none;
    }
    h1 {
    	color: #766143;
    	font-size: 1.9em;
    	font-weight: normal;
    }
    h2{
    	color: #993300;
    	font-size:1.7em;
    	font-weight: normal;
    }
    h3{
    	color: #666666;
    	font-size:1.25em ;
    	font-weight: normal;
    }
    blockquote {
    	color: #766143;
    	font-weight: bold;
    }
    form{
    	display:inline;
    }
    
    /*div ids*/
    #container{
    	text-align:left;
    	width:950px;
    	margin-right:auto;
    	margin-left:auto;
    	background-color:#FFFFFF;
    	margin-top: 30px;
    	padding-bottom: 20px;
    }
    #header{
    	height:187;
    	margin-bottom: 10px;
    }
    #content{
    	margin:0 225px;
    	width:490px;
    	font-size: 1.2em;
    	color: #333333;
    }
    #sidebar_left{
    	float:left;
    	width:200px;
    	top:187px;
    	left:30px;
    	margin-left: 10px;
    	background-image: url(../images/nav_border.gif);
    	background-repeat: repeat-y;
    	background-position: right;
    	padding-right: 20px;
    }
    #sidebar_left #links p {
    	font-weight: normal;
    	font-size: 1.2em;
    	color: #333333;
    }
    #sidebar_left #links {
    	border: 1px solid #CCCCCC;
    	background-color: #EFE1C0;
    	padding-right: 5px;
    	padding-bottom: 5px;
    	padding-left: 5px;
    }
    #sidebar_left #leftnav a {
    	color: #333333;
    	text-decoration: none;
    }
    #sidebar_left #leftnav a:hover{
    	color: #cc0000;
    	text-decoration: none;
    	font-weight: bold;
    }
    #sidebar_left #leftnav li {
    	font-family: Tahoma;
    	font-family: Tahoma;
    	padding-top: 5px;
    	padding-bottom: 5px;
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #999999;
    	padding-left: 0px;
    	font-weight: 500;
    	font-size: 1.55em;
    }
    #sidebar_left #leftnav ul {
    	list-style-image: none;
    	list-style-type: none;
    	margin-left: 0px;
    	padding-left: 0px;
    }
    #sidebar_left #links h3 {
    	font-size: 1.6em;
    	font-weight: bold;
    }
    #sidebar_left #links h4 {
    	font-size: 1.4em;
    	font-weight: bold;
    	color: #666666;
    }
    #sidebar_left #links li {
    	list-style-type: none;
    	padding-bottom: 20px;
    	font-size: 1.2em;
    }
    #sidebar_left #links ul {
    	padding-left: 0px;
    }
    #sidebar_right{
    	float:right;
    	width:200px;
    	top:187px;
    	right:30px;
    	margin-right: 10px;
    	font-size: 1.2em;
    	background-image: url(../images/nav_border.gif);
    	background-repeat: repeat-y;
    	background-position: left;
    	padding-left:20px;
    }
    #sidebar_right img {
    	float: left;
    }
    #sidebar_right h2 {
    	color: #FFFFFF;
    	background-color: #cc0000;
    }
    #sidebar_right p {
    	padding-left: 10px;
    }
    #sidebar_right li {
    	list-style-type: none;
    	padding-bottom: 20px;
    }
    #sidebar_right ul {
    	padding-left: 10px;
    	margin-left: 0px;
    }
    #footer{
    	clear:both;
    	padding: 20px 35px;
    }#footer ul {
    	list-style-image: none;
    	list-style-type: none;
    	text-align: right;
    	width: 300px;
    	float: right;
    	margin-top: 0px;
    }
    #footer ul li {
    	display: inline;
    	text-align: right;
    	border-right-width: thin;
    	border-right-style: solid;
    	border-right-color: #FFFFFF;
    	padding-left: 10px;
    	padding-right: 10px;
    	font-size: 1.1em;
    }
    #footer p {
    	color: #FFFFFF;
    	font-size: 1.1em;
    	float: left;
    	margin-top: 0px;
    }
    #footer a {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    #container #topnav {
    	margin-right: 10px;
    	margin-left: 10px;
    	font-size: 1.6em;
    }
    #container #topnav ul {
    	list-style-image: none;
    	list-style-type: none;
    	padding-top: 10px;
    	padding-bottom: 10px;
    	padding-left: 0px;
    	margin-top: 0px;
    	margin-bottom: 5px;
    }
    #container #topnav li {
    	font-weight: normal;
    	display: inline;
    	padding-right: 15px;
    }
    #container #topnav li a {
    	color: #FFFFFF;
    	text-decoration: none;
    	padding-right: 10px;
    	padding-left: 10px;
    }
    #container #header #topnav a:hover {
    	font-weight: bold;
    }
    #search {
    	float: right;
    	margin: 0px;
    }
    #controls {
    	margin-bottom: 20px;
    	border-top-width: medium;
    	border-top-style: solid;
    	border-top-color: #cc0000;
    	padding-bottom: 30px;
    	border-right-width: 1px;
    	border-bottom-width: 1px;
    	border-left-width: 1px;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-right-color: #CCCCCC;
    	border-bottom-color: #CCCCCC;
    	border-left-color: #CCCCCC;
    }
    #controls p {
    	color: #cc0000;
    	margin: 0px;
    	padding: 10px 10px 0px;
    	font-weight: bold;
    }
    #controls li {
    	display: inline;
    }
    #controls ul {
    	margin-top: 5px;
    }
    #intro{
    	padding-bottom: 30px;
    	padding-right: 10px;
    	padding-left: 10px;
    	background-image: url(../images/drop_shadow.gif);
    	background-repeat: no-repeat;
    	background-position: bottom;
    	margin-right: 5px;
    	margin-left: 5px;
    	border-top-width: medium;
    	border-top-style: solid;
    	border-top-color: #cc0000;
    	margin-top: 0px;
    	padding-top: 0px;
    }
    #intro h1 {
    	margin-top: 5px;
    }
    
    #intro_shadow{
    	background-image: url(../images/shadow_side.gif);
    	background-repeat: repeat-y;
    }
    
    /*classes*/
    .section {
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #999999;
    	padding-bottom: 5px;
    }
    .sidebar_icon {
    	float: left;
    }
    .sideheader {
    	background-color: #cc0000;
    	padding-right: 5px;
    	padding-bottom: 5px;
    	padding-left: 5px;
    	height: 55px;
    }
    .btn {
    	background-color: #AD926B;
    	color: #FFFFFF;
    	font-weight: bold;
    }
    .register {
    	color: #FFFFFF;
    	background-color: #cc0000;
    	font-weight: bold;
    }
    .curvebox{
    	padding:5px;
    	background-color:#cc0000;
    	color:#ffffff;
    }
    .curvebox img {
    	padding-right: 10px;
    	padding-left: 5px;
    	margin-bottom: 0px;
    	padding-top: 0px;
    	padding-bottom: 0px;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Have you cleared the floated content

    Floats are removed from the flow and are not contained by their parents. If youwant a parent to encompass its floated children you need to use a clearing mechanism.

    A quick fix is to use overflow other than visible to auto clear floats.

    Code:
    #container{
        text-align:left;
        width:950px;
        margin-right:auto;
        margin-left:auto;
        background-color:#FFFFFF;
        margin-top: 30px;
        padding-bottom: 20px;
    overflow:hidden
    }
    This can have consequences in some situations so read the faq on floats for more ways of clearing floats

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The #container needs to clear the floats inside.

    There are three methods:

    Clear by overflow:
    Code:
    #container{
    	text-align:left;
    	width:950px;
    	margin-right:auto;
    	margin-left:auto;
    	background-color:#FFFFFF;
    	margin-top: 30px;
    	padding-bottom: 20px;
    	overflow: hidden; /* hidden or auto or scroll, default is visible */
    }
    Clear with a clearfix class:

    Code:
    .clearfix:after {
      display: block;
      clear: both;
      height: 0;
      content: ".";
      visibility: hidden;
    }
    
    <div id="container" class="clearfix"></div>
    Put a clearing element last inside the #container:

    Code:
    ...
    <br style="clear:both" />
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Location
    London
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks both, i have not come across this before. I have used the 'overflow' option and it appears to do the trick, but i will read up on the faqs.

    Many thanks for your help :-)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As I mentioned above this is the default behavior of floats and if you are using floats then you need to understand this in detail. There is another good article here that explains how this works.


Bookmarks

Posting Permissions

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