Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Div's Collapsing when adding a border
Old 01-13-2008, 12:19 AM Div's Collapsing when adding a border
Experienced Talker

Posts: 30
Name: Adam
Trades: 0
Hello, so this is a problem I have every time I do this type of CSS layout. I know I could just download a pre-designed layout and avoid this problem all together, but I would rather know what the solution is.

So i have a header, left navigation, and right content area basic layout. I have the left navigation and right content area inside of a container div, with a 20px right hand margin on the left hand navigation.

The layout is fine until I add a border around the left navigation, and right content area. When I add the border, the right content area appears below the left navigation. I have put together 2 examples to show my problem. I'm thinking its one small dumb little tag im missing to make this all work.


Example With NO Border (Works Perfect)
http://itsnetservices.com/andy/index2.html

CSS Code
Code:
body {
background-color : #f2f2f2;
}
.table {
border-width : 1px 1px 1px 1px;
border-spacing : 0;
border-style : solid solid solid solid;
border-color : #646464 #646464 #646464 #646464;
background-color : #ffffff;
}
a:link, a:visited {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
color : #000000;
text-decoration : none;
}
a:hover {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
color : #000000;
text-decoration : none;
}
.header {
background-image : url(images/bg_header.jpg);
background-repeat : no-repeat;
width : 860px;
height : 115px;
margin-left : auto;
margin-right : auto;
margin-bottom : 20px;
}
.container {
width : 860px;
margin-left : auto;
margin-right : auto;
}
.navigation {
width : 177px;
margin-left : 0;
margin-right : 20px;
float : left;
background-color : #ffffff;
}
.content {
width : 663px;
margin-left : 0;
margin-right : 0;
float : left;
background-color : #ffffff;
}
Example With A Border (Falls Apart)
http://itsnetservices.com/andy/index3.html

CSS Code
Code:
body {
background-color : #f2f2f2;
}
.table {
border-width : 1px 1px 1px 1px;
border-spacing : 0;
border-style : solid solid solid solid;
border-color : #646464 #646464 #646464 #646464;
background-color : #ffffff;
}
a:link, a:visited {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
color : #000000;
text-decoration : none;
}
a:hover {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
color : #000000;
text-decoration : none;
}
.header {
background-image : url(images/bg_header.jpg);
background-repeat : no-repeat;
width : 860px;
height : 115px;
margin-left : auto;
margin-right : auto;
margin-bottom : 20px;
}
.container {
width : 860px;
margin-left : auto;
margin-right : auto;
}
.navigation {
width : 177px;
margin-left : 0;
margin-right : 20px;
float : left;
background-color : #ffffff;
border-width : 1px;
border-style : solid;
border-color : #646464;
}
.content {
width : 663px;
margin-left : 0;
margin-right : 0;
float : left;
background-color : #ffffff;
border-width : 1px;
border-style : solid;
border-color : #646464;
}
Thanks in advance.
-Adam
itsnetservices is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 01-13-2008, 01:52 AM Re: Div's Collapsing when adding a border
JeremyMiller's Avatar
WT Moderator

Posts: 1,712
Name: Jeremy Miller
Location: Las Vegas, NV
Trades: 0
It's a matter of spacing. When I changed the navigation margin to 16px it stayed aligned. Remember that the border is counted in the overall width.
__________________
Jeremy Miller

Please login or register to view this content. Registration is FREE
JeremyMiller is offline
Reply With Quote
View Public Profile Visit JeremyMiller's homepage!
 
Old 01-13-2008, 01:56 AM Re: Div's Collapsing when adding a border
Skilled Talker

Posts: 52
Name: Dustin
Trades: 0
Beat me to it Jeremy. Yeah I am guessing the 1px border is accounting for 4 of the 20 px, so when you set the margin to 20px, it makes the content section go 4px too far to the right, which would make it overlap the side of the container section, so it just moves the whole thing to the next line.

Here's what I changed:

.navigation {
width : 177px;
margin-left : 0;
margin-right : 0;
float : left;
background-color : #ffffff;
border: 1px solid #646464;
}
.content {
width : 663px;
margin-left : 16px;
margin-right : 0;
float : left;
background-color : #ffffff;
border: 1px solid #646464;
}
__________________

Please login or register to view this content. Registration is FREE
TributeK is offline
Reply With Quote
View Public Profile
 
Old 01-13-2008, 02:17 AM Re: Div's Collapsing when adding a border
Experienced Talker

Posts: 30
Name: Adam
Trades: 0
Yup, you guys are both right. I knew it was something small and dumb. I actually figured it out a little after I posted. Well I fixed it at least. I still wasn't sure what the problem was, but now that you told me, it was so obvious.

Another PEBKAC error I believe.

Thanks for the help guys.

itsnetservices is offline
Reply With Quote
View Public Profile
 
Old 01-13-2008, 01:32 PM Re: Div's Collapsing when adding a border
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Quote:
When I add the border, the right content area appears below the left navigation
Classic float drop problem, and I see you've gotten the answers you needed to fix it. You should review the box model, especially the way IE 6 and below does NOT follow the standards.

LOL your error message -- when I worked on the helpdesk, we used to call it the 'chair to keyboard interface problem'
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 01-13-2008, 02:48 PM Re: Div's Collapsing when adding a border
Experienced Talker

Posts: 30
Name: Adam
Trades: 0
Hehe. Ya we all hate the IE6 don't we?

I always forget that the borders get applied on the outside of the box, rather than the inside. Too much dam time in front of photoshop and placing my borders on the inside has me thinking the same way.

A partner of mine used to work at Earthlink as a tech, and when he would get calls from people who were doing something totally stupid, he would tell them its a common id10t (aka Idiot) error. Haha.

Here are another couple funny error messages for you guys to hopefully get a laugh out of.









itsnetservices is offline
Reply With Quote
View Public Profile
 
Old 01-15-2008, 12:22 PM Re: Div's Collapsing when adding a border
wayfarer07's Avatar
Poo on You

Latest Blog Post:
Introducing WowWindow
Posts: 3,987
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
the borders are adding extra width to the divs, 1 pixel each. Removing 2 pixels from the width of each div (content and navigation) will solve your problem. In the future, I recommend leaving a little extra space and floating one of them left, and the other right. Using up all of the available space is just asking for trouble when floating divs, especially with IE6.
__________________
I build web things. I work for the startup
Please login or register to view this content. Registration is FREE
.
wayfarer07 is online now
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
Reply     « Reply to Div's Collapsing when adding a border
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.29504 seconds with 12 queries