html - Grid 960 take up entire width with resize -
i having trouble getting 960.gs take entire width of browser. want grid 100% on resize, if scroll out text appear smaller , take less lines grid still take 100% of width.
there question here when using grid 960, can still have 100% width header section? , answer set top part 100%. added code has no effect, neither setting body's width 100% , divs, ect. doing wrong? here code:
<!doctype html> <html> <head> <title>my fragment</title> <meta charset="utf-8" /> <!-- symbols rendered --> <meta name="value" /> <!-- not need close --> <link rel="stylesheet" href="css/960_12_col.css"> <style> body { background:green; } div { background: white; } .grid_4 { height: 100px; } </style> </head> <body> <div class="header" style="width:100%;"></div> <div class="mainwrapper container_12"> <div class="grid_4" style="background:red">sdfds</div> <div class="grid_4" style="background:blue">sdfs</div> <div class="grid_4" style="background:yellow">sdfs</div> <div class="clear">sdfds</div> </div> </body> </html>
but gives me following result:
i want see no green space on left side of red column , right side of yellow column not case. how rid of space either side?
(please note new css , html , have been following learn html in 30 days, , whatever else find online.)
first of - <div class="header" style="width:100%;"></div>
not wrapping container.
second: add width: 100%
mainwrapper
class instead of .header
, know there hardcoded widths in 960 grid system, columns .grid_4
still width: 300px
.
try grid system fluid layouts, e.g.: http://www.designinfluences.com/fluid960gs/
Comments
Post a Comment