|
CSS - Expandable Div's With Css
I was wondering... how can i make divs expandable so like when there is text that goes over the height limit.. now can i make the div move down abit.. along with the rest of the divs? I have never done this.. and im searching as i go.. so hopefully i can find some results.
html Code: Original - html Code <form action="memo.read.php" method="post"> <div class="memo_container"> <div class="memo_userinfo"> <span class="info"> <b />From:</b> <?php print $username; ?></span> <span class="userdata"><?php print $icq . $aim; ?></span> </div> <div class="memo_subject"><span class="span" valign="bottom"><i>Subject: <?php print "{$rtv_memo['subject']} - {$rtv_memo['date']}"; ?></i></span></div> <div class="memo_contents"><span class="message"><?php print $rtv_memo['message']; ?></span></div> <div class="memo_buttons" align="right"><input type="submit" name="delete" value="Delete"><input type="submit" name="reply" value="Reply"> </div> </div> </form>
<form action="memo.read.php" method="post">
<div class="memo_container">
<div class="memo_userinfo">
<span class="info"> <b />From:</b> <?php print $username; ?></span>
<span class="userdata"><?php print $icq . $aim; ?></span>
</div>
<div class="memo_subject"><span class="span" valign="bottom"><i>Subject: <?php print "{$rtv_memo['subject']} - {$rtv_memo['date']}"; ?></i></span></div>
<div class="memo_contents"><span class="message"><?php print $rtv_memo['message']; ?></span></div>
<div class="memo_buttons" align="right"><input type="submit" name="delete" value="Delete"><input type="submit" name="reply" value="Reply"> </div>
</div>
</form>
css Code: Original - css Code /* Starting Memo Div Classes */ div.memo_container { position: relative; margin-left: 20px; width: 580px; height: 432px; } div.memo_subject { position: absolute; border-top: 1px solid #cccccc; border-right: 1px solid #cccccc; left: 152px; width: 425px; height: 20px; background: #ffffff; } div.memo_subject .span { position: absolute; padding-left: 8px; margin-top: 8px; height: 10px; word-wrap: break-word; font-family: arial,helvetica; color: #00000c; font-size: 72%; } div.memo_userinfo { position: absolute; float: left; border: 1px solid #cccccc; width: 150px; height: 150px; word-wrap: break-word; white-space: wrap; background: #d8d9d7; } div.memo_userinfo .info { position: absolute; padding-left: 2px; margin-top: 8px; font-size: 88%; } div.memo_userinfo .userdata { position: absolute; top: 130px; padding-left: 2px; font-size: 88%; } div.memo_contents { position: absolute; float right; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; left: 150px; top: 20px; width: 427px; height: 130px; word-wrap: break-word; white-space: wrap; } div.memo_contents .message { position: absolute; padding-left: 10px; margin-top: 2px; } div.memo_buttons { position: absolute; top: 152px; width: 577px; height: 25px; border-right: 1px solid #cccccc; border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc; background: #ffffff; } div.memo_buttons input { height: 22px; margin-top: 2px; }
So far everything here works.. but just needed to know if it is possiable what i am asking. Similar TutorialsHello, i am having run into a problem with a div. And im not sure if this is even possible. I have a <div id="content"></div> which has all my pages content in it. and below that i have my footer <div id="footer"></div>. Well i need the "content" div's height to be at least 400px, and if there is a lot of text in the "content" div, i need it to stretch longer. But currently, when i have more text in the "content" div that is longer than 400 px, it goes ontop and over the "footer" div. because i have "content" set to overflow:visible. So is there any way to make the "content" div at least 400px height, and still stretch if there is more text in it? hmm i cant get this to work... i have the left side of the banner that needs to be expandable wich is a long picture.....and the right side is 10px wide. how can i get this 2 in a div wich get width by % and center aligned on the page? and also on a layer above other stuff |
|||||||