Forum Moderators: not2easy
This is the first post on this forum, i usually post on php! Anyway, i have a query, my main wrapper div is set to 780px wide on auto margin to center it. I have a 'content' div under a header div within the wrapper, the header - when padding is applied does not overflow from the container ie breaking the border - but the content div (under the header) does.
The only way i have solved it upto yet is by fiddling with the width % and adjusting the padding to compensate :-(
And as the content within the div will be dynamic - i cant adjust the widths/padding everytime someone updates a page!
Hopefully, there is a css instruction that i have missed that stops the overlap happening.
Thank you
Matthew
You shouldn't have to adjust anything even with the dynamic content. However your post is a little vague
The header is probably not overflowing the container even with padding etc. because it and nothing inside it has a specific width applied therefore it defaults to 100% which is 100% of your 780px wide container.
The width of any element in CSS is calculated by adding the content width (width: value;} padding and border so if your content area actually has a specific width set on it it could be that,
You shouldn't really mix % widths with px padding as it will never be accurate, can you not let the content div default the same as the header? or is there perhaps a floated sidebar involved too?
anyway.. if you haven't got it fixed yet perhaps you could provide us with your Skeleton code and the CSS for those elements.
Since i posted i worked out where i had gone wrong, i had set a fixed width for the div i was working on, and when padding applied it forced the div over the container (or at least i think thats what it did) But when i assigned 'auto' to the width attribute, the div realigned correctly and the bottm was forced downwards as there is no height attribute set.
Sorry for being vague, and thanks for the help!
I am brand new to css/div's etc and am more used to tables.
Cheers,
matthew
