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: something 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">             &nbsp;         </div>         <div id="content">             &nbsp;             <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

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -