<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <div id="inner_header"> </div> </div> <div id="body"> <div id="inner_body"> </div> </div> <div id="footer"> <div id="inner_footer"> </div> </div> </body> </html>
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset,form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { text-decoration:none;margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;outline: none; } #header{ height:200px; background:url('../images/bg.jpg') repeat-x; } #inner_header,#inner_body,#inner_footer{ border:1px solid #000; width:1000px; margin:auto; height:100px; } #body{ margin:100px 0; height:200px; background:url('../images/bg.jpg') repeat-x; } #footer{ height:200px; background:url('../images/bg.jpg') repeat-x;
Które mają mieć tło na całą szerokość strony, każdy z nich ma wewnętrzny kontener który jest wyśrodkowany.
Wszystko wygląda dobrze dopóki przeglądarka nie zostanie zwężona aż pojawi się pasek przewijania w poziomie, wtedy po prawej stronie obrazki z tła są ucinane, jak sobie z tym poradzić?
Przykład online: http://przyklady.com
Czy jest jakaś inna możliwość niż ustawienie trzymającym kontenerom min-width?