css - Auto expanding side column -
i building webpage , has div tag called content has css property of min-height: 200px; want put in div tag height of 100%, however, not work. want automatically grow looks nice when content gets larger. unsure how this.
any appreciated, want xhtml strict , css3 compatible.
trying this:
-they gray side bar, wanted do, added in paint, rest have done css3.
i understood issue height: 100% here how using css:
here is:
<html> <head> <style type="text/css"> body{ background-color: #cbf; } #wrap { border-radius: 20px; margin: 10px auto; overflow: hidden; width: 900px; } #head { text-align: center; background-color: red; height: 100px; overflow: hidden; } #main { float: left; background-color: gray; min-height: 200px; } #sidebar { width:200px; float: left; background-color: gray; } #content { float:left; background-color: white; min-height: 200px; width: 700px; } </style> <title> example </title> </head> <body> <div id="wrap"> <div id="head"> <h1>example site name</h1> </div> <div id="main"> <div id="sidebar"> </div> <div id="content"> <p> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> ***</br></br></br> </p> </div> </div> </div> </body> </html>
you can alternatively create sidebar with
#wrap { background: url('bg.png') repeat-y white; }
bg.png needs 1 pixel high image has same width siderbar. using css height 100% not work in case.
hope helps.
Comments
Post a Comment