/    Sign up×
Community /Pin to ProfileBookmark

Setting div width using percent and padding with percent = IE explodes

Copy linkTweet thisAlerts:
Aug 03.2009

Hi all,

Would love to know if anyone else has encountered this. It appears to be happening on all IEs (6/7/8) and I must not be googling the right phrase because I’m finding no solutions.

I have a fluid layout that I have to stick to. I hate percentages. However, it must be done. I have several divs on the page that I have set to a certain %. This is fine.

However, if I then try to set padding using a % as well, IE throws a huge fit on all versions. It blows the div up to a massive size. I’ve tried to set the width much lower than the max space available, thinking I might be overextending the available width, but no luck. Position relative, display inline, floats, are not helping.

I’m a bit stumped 😮 Any ideas?

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@nickelleonAug 03.2009 — I would need to see html/css to provide a more accurate solution, but..

Let's say you have a parent div with a width of 800px. And inside this div, you have 2 divs floated left, each with a width of 40% and padding of 5%, they should float together nicely (dont forget to clear them). This would make the width of each div 400px (320px width + 40px padding on all sides).

Percentage widths are relative to the parents width. If the parent div was 1000px, 40% of 1000 is 400px and 5% of 1000 is 50px.
Copy linkTweet thisAlerts:
@peachskittleauthorAug 03.2009 — Can't, unfortunately, behind company firewall.

I understand what you are saying here, and I tried to make sure that there was no way I was using more real estate than I have available, which is why, my original div was 94% with 2% padding left and right, which would bring it up to 98 (which still technically leaves me with more free space. When testing to try and figure out what was going on, I changed this div to 80%, with 1% padding.

With just the 80% width, the div is fine. But as soon as I add the 1% padding, it explodes to this monster of a box, with the content somewhere in the scrolling pit of white space. I mean, it makes the div 20 times the width of my screen.
×

Success!

Help @peachskittle spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...