SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast Locker's Avatar
    Join Date
    May 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overlap by 5px when floating right.

    Take a look at this.

    The following CSS has been used:

    Code:
    body {
    	background-color: #074E78;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    }
    
    #wrapper {
    	width: 750px;
    	margin: auto;
    	border: 1px solid #FFFFFF;
    }
    
    #header {
    	background-color: #990000;
    	height: 100px;
    }
    
    #nav {
    	background-color: #009900;
    	border-top: 1px solid #FFFFFF;
    	border-bottom: 1px solid #FFFFFF;
    	height: 20px;
    }
    
    #content {
    	background-color: #29395f;
    	height: 300px;
    }
    
    #left {
    	float: left;
    	position: relative;
    	top: 5px;
    	width: 510px;
    }
    
    #right {
    	float: right;
    	position: relative;
    	top: 5px;
    	width: 210px;
    }
    
    .boxhead {
    	background-color: #990000;
    	border: 1px solid #000000;
    	padding: 2px;
    	font-size: 12px;
    	color: #FFFFFF;
    	font-weight: bold;
    	width: 100%;
    }
    
    #footer {
    	background-color: #172353;
    	border-top: 1px solid #FFFFFF;
    	padding: 2px;
    	font-size: 10px;
    	color: #FFFFFF;
    	vertical-align: middle;
    }
    I'm clueless as to why on the right hand side there is a 5px overlap. Any ideas?

    Regards,
    Mark

  2. #2
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, check out the Box Model As you can see, Padding adds onto the width, so does the border, so you have 6 extra px's on each one, take that away from the width and it should be fixed .

  3. #3
    SitePoint Enthusiast Locker's Avatar
    Join Date
    May 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, that's confusing me a little. What exactly do I need to do, based on the CSS code I've got at the moment.

    Regards,
    Mark

  4. #4
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    body {
    	background-color: #074E78;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    }
    
    #wrapper {
    	width: 750px;
    	margin: auto;
    	border: 1px solid #FFFFFF;
    }
    
    #header {
    	background-color: #990000;
    	height: 100px;
    }
    
    #nav {
    	background-color: #009900;
    	border-top: 1px solid #FFFFFF;
    	border-bottom: 1px solid #FFFFFF;
    	height: 20px;
    }
    
    #content {
    	background-color: #29395f;
    	height: 300px;
    }
    
    #left {
    	float: left;
    	position: relative;
    	top: 5px;
    	width: 506px;
    }
    
    #right {
    	float: right;
    	position: relative;
    	top: 5px;
    	width: 206px;
    }
    
    #boxhead {
    	background-color: #990000;
    	border: 1px solid #000000;
    	font-size: 12px;
    	color: #FFFFFF;
    	font-weight: bold;
    	width: 100%;
    }
    
    #footer {
    	background-color: #172353;
    	border-top: 1px solid #FFFFFF;
    	padding: 2px;
    	font-size: 10px;
    	color: #FFFFFF;
    	vertical-align: middle;
    }
    You need to take away how much padding there is from the width ie if the padding: 4px; and the width: 12px; without the padding it needs to be width: 8px; with the padding.

  5. #5
    SitePoint Enthusiast Locker's Avatar
    Join Date
    May 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha, brill

    One more question, if you look now I've set #content to pad 5px. However, the left hand side is slightly more padded than the right it seems?

    Regards,
    Mark

  6. #6
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Neither are padded for me in Firefox.


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
  •