homepage Welcome to WebmasterWorld Guest from 54.166.113.249
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
problem with div set to 100% with padding
Sarah Atkinson

10+ Year Member



 
Msg#: 4055603 posted 12:57 am on Jan 7, 2010 (gmt 0)

I have run into this problem often but I just can remember the workaround for it.
I have a div set to 100% inside another div of fixed width. I then have padding of 40px on each side of the div but this makes the inter div break out of the container div by 80px;

 

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4055603 posted 12:37 pm on Jan 7, 2010 (gmt 0)

What browser Sarah?

Sounds like the IE box model issue - with widths + padding. IE renders them incorrectly. Either apply padding to another container, or use conditionals.

Got a HTML/CSS snippet we can see?

Sarah Atkinson

10+ Year Member



 
Msg#: 4055603 posted 1:56 pm on Jan 7, 2010 (gmt 0)

actually it's firefox.
I got it working by putting it in a container So then I end up with 3 nested divs first has like a width of 500px; second has a width of 100% and the third has the padding of 40px;
i though it was similar to the box model problem too with firefox?

CSS_Kidd

5+ Year Member



 
Msg#: 4055603 posted 2:58 pm on Jan 7, 2010 (gmt 0)

Unless the div has a display of block, the div will automatically have a 100% width (stretch to the limits of its container). So all you really need is a fixed width div and an internal div with the padding (don't declare a width). No need for the third container div. Unless I am missing something?

Note: Firefox will add the width of a div plus its padding. So if you have a 500px div with a padding of 40px on the left and right, Your div will more than likely be 580px.

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4055603 posted 7:16 pm on Jan 7, 2010 (gmt 0)

The width you set is always the width of the content. The padding, border and margins always go around that.

Legacy IE versions sometimes do it wrong, best to ignore them and not design anything while looking at it with IE.

Just not assigning 100% width would give the effect you seek as blocks take up all the available width in their parent by default.

CSS_Kidd

5+ Year Member



 
Msg#: 4055603 posted 7:29 pm on Jan 7, 2010 (gmt 0)

Every Single Time!

jameshopkins

5+ Year Member



 
Msg#: 4055603 posted 1:57 am on Jan 8, 2010 (gmt 0)

Just not assigning 100% width would give the effect you seek as blocks take up all the available width in their parent by default.

This will only happen if the block is in the normal flow. In any other situation, the box's computed width will change based on the shrink-to-fit algorithm.

FYI, the CSS3-UI module includes the 'box-sizing' property which gives the browser the ability to alter the box model, so that any 'padding' and/or 'border' values are computed _inside_ of a specified width.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved