html - Need help to stretch div element -
i've made sketch of website header , footer stretches infinity navigation box , content box (middle part) stuck on same size. hence if start stretching browser starts looking bad.
question: how can make middle part stretching accordingly?
<div id="main"> <div id="header"> <h1><b>website header</b></h1> </div> <div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">forums</a></li> <li><a href="#">members</a></li> <li><a href="#">contact us</a></li> </ul> </div> <div id="submain"> <div id="chat"> <h3>chat box</h3> </div> <div id="content"> <h1>content goes here</h1> </div> <div id="subright"> <div id="members"> <h4>member area</h4> </div> <div id="recent"> <h4>recent activity</h4> </div> </div> </div> <div id="footer"> <b>some footer, 2013</b> </div> </div> my css file:
html { height: 100%; width: 100%; } body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; font-family: verdana, arial, helvetica, sans-serif; font-size: 13px; line-height: 15px; background: #66ff66; } img { border: none; } { color: #8d0d19; } a:hover { color: #1a446c; } #header { height: 150px; margin: 10px; padding: 5px; text-align: left; background: #1a446c; color: #d4e6f4; } #header h1 { padding: 1em; margin: 0; } #nav { text-align:center; /*word-spacing:240px;*/ float: center; height: 100%; min-width: 1200px; margin: 0 auto; padding: 1px 0em; color: #d4e6f4; background: none; } #nav { color: #d4e6f4; text-decoration: none; } #nav li a:hover { background: #383; } #nav ul li { list-style-type: none; display: inline; } #nav li { display: block; float: left; padding: 5px 98px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #submain { height: 600px; width:1080px; margin: 30px; padding: 0px 0em; background: #3366ff; } #chat { float: left; text-align:center; width: 150px; height: 100%; margin: 0px; padding: 0px 2em; color: #d4e6f4; background: #8d0d19; } #content { float: left; width: 600px; height: 100%; margin: 0; padding: 0 1em; color: #d4e6f4; background: #330033; } #subright { height: 600px; margin: 0px; padding: 0px 0em; background: #3366ff; } #members { float: right; width: 200px; height: 20%; margin: 0; padding: 0 2em; color: #d4e6f4; background: #8d0d19; } #recent { float: right; width: 200px; height: 80%; margin: 0; padding: 0 2em; color: #d4e6f4; background: #336600; } #footer { clear: both; height: 2em; margin: 10px; padding: 1em; text-align: center; background: #1a446c; color: #d4e6f4; }
the reason not streching becuase didn't apply styles parent container, in case <div id="main"></div>.
you need add, 100% width #main div, float left , set overflow hidden height stretches fit content inside.
html, body { height: 100%; width: 100%; } body { margin: 0; padding: 0; border: 0; font-family: verdana, arial, helvetica, sans-serif; font-size: 13px; line-height: 15px; background: #66ff66; } img { border: none; } { color: #8d0d19; } a:hover { color: #1a446c; } #main { width:100%; overflow:hidden; float:left; background:red; } #header { height: 150px; margin: 10px; padding: 5px; text-align: left; background: #1a446c; color: #d4e6f4; } #header h1 { padding: 1em; margin: 0; } #nav { text-align:center; /*word-spacing:240px;*/ float: center; height: 100%; min-width: 1200px; margin: 0 auto; padding: 1px 0em; color: #d4e6f4; background: none; } #nav { color: #d4e6f4; text-decoration: none; } #nav li a:hover { background: #383; } #nav ul li { list-style-type: none; display: inline; }
Comments
Post a Comment