css - DIV tags changing size depending on content -


i'm in process of playing html , css. have following @ moment:

/*reset margins & padding*/ body, h1, h2, h3, h4, h5, h6, p, div, ul, li {     margin: 0;     padding: 0; }  body {     background: #cccccc;     font-family: sans-serif;     color: #000; }  #divwrapper {     width: 90%;     margin: 0 auto; }  #divheader {     width: 100%;     background: #cc0000;     text-align: center;      /* margins */     margin-top: 20px;     margin-bottom: 0px;      /* radius */     border-radius: 5px; }  #divmenustrip {     width: 100%;     background: #646464;     text-align: center;      /* margins */     margin-top: 10px;      /* padding */     padding-left: 5px;     padding-right: 5px;       /* radius */     border-radius: 5px; }  #divcontent {     width: 100%;     background: #ffffff;      /* margins */     margin-top: 10px;      /* padding */     padding: 8px;      /* radius */     border-radius: 5px; }

and...

    <!doctype html>  <html>     <head>         <link rel="stylesheet" type="text/css" href="./styles/main.css">     </head>      <body>         <div id="divwrapper">                  <div id="divheader"><img src="./images/headers/header-1.jpg" /></div>                 <div id="divmenustrip">this menu displayed</div>                    <div id="divcontent">this content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed. content displayed.  </div>         </div>     </body> </html>

when load html page in web browser appears though depending on amount of content within div tags text affecting div tag's size.

can shed light why is? thanks!!!

this how divs behave default. if want show height, have specify with

height:xxpx;

the reason behind content these days dynamic i.e changes lot, time. cumbersome change height manually every time content changes.


Comments

Post a Comment