A lot of the designs I am working on just now require that the page be centred, i use margin:0 auto; width: 955;
Each main section has a div with a bottom border, which in this layout would be 955 in width in the centre of the screen.
I want the actual borders to be the full width of the page however.
What is the best way to do this, cleanly? I have been doing it the same way as StackOverflow uses for the footer but if I have 3 borders on a page that seems messy?
If you're wanting to have several sections that are broken up with borders that span the full width, your better bet is to structure the page as follows:
<body>
<div id="container" style="width: 100%;">
<div style="width:100%;border-top:1px solid black;">
<div style="width:955px; margin:0 auto;">
Section 1 Content
</div>
</div>
<div style="width:100%;border-top:1px solid black;">
<div style="width:955px; margin:0 auto;">
Section 2 Content
</div>
</div>
<div style="width:100%;border-top:1px solid black;">
<div style="width:955px; margin:0 auto;">
Section 3 Content
</div>
</div>
</div>
<div id="footer" style="border-top: 1px solid black;">
Footer Content
</div>
</body>
To make your life even easier, I highly recommend replacing the inline styles with class names and using an external style sheet. That way you can give each section the same class name and write the styles only once.