Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Padding problem ... 1

Status
Not open for further replies.
Jonnn

Jonnn

Programmer
Nov 17, 2004
135
GB
I have this code...

Code: 
<html>
<head>
<style type="text/css">

div.container
{
width: 100%;
border: 1px dotted blue;
}

div.header
{
width: 99%;
background-color: gray;
border: 1px ridged black;
color: white;
font-family: verdana;
font-size: 22px;
margin-bottom: 0.3cm;
padding: 0.1cm;
}

div.leftbox
{
float: left;
width: 33%;
border-left: 1px solid gray;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
color: red;
font-family: verdana;
font-size: 12px;
padding: 1cm;
}

div.middlebox
{
width: 33%;
float: left;
border: 1px solid gray;
color: red;
font-family: verdana;
font-size: 12px;
padding: 0.5cm;
}

div.rightbox
{
width: 33%;
float: left;
border-right: 1px solid gray;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
color: red;
font-family: verdana;
font-size: 12px;
padding: 0.5cm;
}


</style>
</head>
<body>

<div class="container">

<div class="header">
Welcome to Jon's Bikes
</div>

<div class="leftbox">
Type MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType Mad
</div>

<div class="middlebox">
Type MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadTypeType MadType MadType MadType
</div>

<div class="rightbox">
Type MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType MadType Mad
</div>

</div>
</body>
</html>

When i change the padding for each div. It works fine in I.E. but in Firefox it makes the divs wider, therefore forcing the DIV to appear underneath other DIVS.

Is there a code i am missing here?

I am simply trying to achieve a 3 column structure which can all be at different heights...

Thanks for your time.
Jon

JavaScript Beginner at work :)
 
Sort by date Sort by votes
Firefox is right.

Some versions of Internet Explorer incorrectly include the padding in the width of an element.

The correct definition is that the padding is added to the width (and borders, margins) to get the total width of the element.

So if you have a div with a width of 400px and apply 20px padding to the left and right.

IE will see this as being 400px wide, but your "stuff" inside will only occupy 360 pixels.

Firefox et al will see the div as being 440px wide and your "stuff" inside will still occupy 400 pixels.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote
You learn something new every day. Thanks for your time.

Lets burn Internet Explorer :)

JavaScript Beginner at work :)
 
Upvote 0 Downvote
ok, another problem i have been on for hours trying to figure out...

i took all the padding away from every DIV.

I realised that the top DIV that is 99% in width, is not as wide as the 3 DIVS next to each other which all stand in a row at 33% width for each one.

I have also added a 2cm margin gap at the bottom of my margin on my header and a 2cm margin gap at the top of my footer. These both work in I.E but in Firefox only the bottom margin for my header works...and not the top margin for my footer.

Sorry to be a pain... :(

I will be going the library soon to get C.S.S book to learn :)

Appreciative of your time for me.
Jon

JavaScript Beginner at work :)
 
Upvote 0 Downvote
OK. Without looking at it too hard as I'm a bit busy at the moment.

Think about what you just said.

You are specifying widths as percentages.
Lets assume your total page width is 750 pixels.

99% of 750 pixels = 742.5 pixels
33% of 750 pixels = 247.5 pixels

How does a browser show 0.5 of a pixel. It will round the value, most likely up.

So our divs are actually
743 pixels and 248 pixels

3 * 248 = 744 pixels.

Now that might not be exactly what you are experiencing, but it illustrates how using percentages is going to cause problems.

In case that's not the problem. Have you got borders on your divs? These contribute to the width too. A 1px border on each side of a div adds 2px to it's overall width.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote
Can i just say, ive never know anything to be such a pain in the ass than trying to get your website to look the same in both I.E and FIREFOX? how the bloody hell do you guys do it? I just dont understand where am going wrong? I am coding normal and Firefox seems to be the one that takes the piss out of me...

:(

JavaScript Beginner at work :)
 
Upvote 0 Downvote
sorry... fixed it now... ... ... but I am still mad :)

JavaScript Beginner at work :)
 
Upvote 0 Downvote
To quote Apple, "Think different".

Alot of the time the reason people have so much trouble with CSS layouts and cross browser issues is that they think about the page in the "old" way.

If you can break out of the table/IE mindset then you will gradually find it easier and easier.

But to my mind, that is the key. Don't approach it like a table layout. Once the penny drops and you "get it" you'll really start to see why it's such a good and actually pretty easy way to work.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
691
PeDa
PeDa
Everton1Blue
  • Locked
  • Question
Google reCaptcha problem
Replies
4
Views
224
Everton1Blue
Everton1Blue
audiopro
  • Locked
  • Question
Problem with .htaccess
Replies
6
Views
177
ChrisHirst
ChrisHirst
PeDa
  • Locked
  • Question
HTML5 character encoding problem 1
Replies
2
Views
212
PeDa
PeDa
brk1221
  • Locked
  • Question
HTML for problem 2
Replies
8
Views
153
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top