Expandable Div's with css

Dev Shed Forums Sponsor:

April 10th, 2006, 10:30 PM

xlordt

Only the strong survives!!.

Dev Shed God 1st Plane (5500 - 5999 posts)

Join Date: Feb 2003

Location: A World of wonders.

Posts: 5,573

Folding Points: 111202 Folding Title: Super Ultimate Folder - Level 1

Time spent in forums: 1 Month 11 h 9 m 33 sec
Reputation Power: 406

Send a message via Google Talk to xlordt

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">&nbsp;<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">&nbsp;</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.

April 11th, 2006, 12:23 AM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,831

Time spent in forums: 6 Months 1 Day 19 h 19 m 2 sec
Reputation Power: 4192

Sounds like you want to use min-height.

Only elements related to <table>s have a valign attribute.
It's best to avoid using the align attribute on <div>s; use CSS instead.

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

April 11th, 2006, 12:32 AM

xlordt

Only the strong survives!!.

Join Date: Feb 2003

Location: A World of wonders.

Posts: 5,573

Time spent in forums: 1 Month 11 h 9 m 33 sec
Reputation Power: 406

Quote:

Originally Posted by Kravvitz

Sounds like you want to use min-height.

Only elements related to <table>s have a valign attribute.
It's best to avoid using the align attribute on <div>s; use CSS instead.

I tried using css to align the buttons to the right.. but for some reason it didnt work.. unless i did something wrong i used vertical-align: right, but i will give it a shoot again....

April 11th, 2006, 07:44 AM

icantthinkofone

Contributing User

Join Date: Mar 2006

Posts: 427

Time spent in forums: 3 Days 50 m 22 sec
Warnings Level: 10
Number of bans: 1
Reputation Power: 42

There is no vertical-align:right. You use that to vertically align things.

Quote:

That's not right. Get rid of the slash in the first <b>

April 11th, 2006, 10:22 AM

xlordt

Only the strong survives!!.

Join Date: Feb 2003

Location: A World of wonders.

Posts: 5,573

Time spent in forums: 1 Month 11 h 9 m 33 sec
Reputation Power: 406

Quote:

Originally Posted by icantthinkofone

There is no vertical-align:right. You use that to vertically align things. That's not right. Get rid of the slash in the first <b>

No that's correct I'm planing on implementing XHTML on this.. but first i need to get it right

April 11th, 2006, 04:47 PM

wolfcry911

Contributing User

Join Date: Mar 2006

Location: MA

Posts: 170

Time spent in forums: 2 Days 5 m 49 sec
Reputation Power: 23

no, it's not correct. xhtml only needs a closing slash on single tag elements (hr, br, meta, link, img) - but you shouldn't be using a presentational tag to begin with!

to answer your question - do nothing. Use static positioning and default div behavior which will expand to contain it's in flow children. Lose the relative and absolute positioning and learn to work with the document flow.

April 11th, 2006, 07:49 PM

xlordt

Only the strong survives!!.

Join Date: Feb 2003

Location: A World of wonders.

Posts: 5,573

Time spent in forums: 1 Month 11 h 9 m 33 sec
Reputation Power: 406

hmm i though i added <br /> not <b /> umm.. ok.. that is my mistake.. on my script its.. <br /> not <b />, weird.. but.. anyways.. i dont use div's im learning to use them now... but anyways.. your saying that i should just make it static width and height? if so.. then no i need it expandable.. there has to be a way of doing it... if i can't find an answer here.. then i guess i will keep trying and post back when I have it.. else.. when what exactly do you mean?

Last edited by xlordt : April 11th, 2006 at 07:54 PM.

April 11th, 2006, 10:07 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,831

Time spent in forums: 6 Months 1 Day 19 h 19 m 2 sec
Reputation Power: 4192

Don't use absolute positioning. Just use margins and floats and give the elements min-height instead of height.

April 11th, 2006, 10:48 PM

xlordt

Only the strong survives!!.

Join Date: Feb 2003

Location: A World of wonders.

Posts: 5,573

Time spent in forums: 1 Month 11 h 9 m 33 sec
Reputation Power: 406

Quote:

Originally Posted by Kravvitz

Don't use absolute positioning. Just use margins and floats and give the elements min-height instead of height.

Ok, i will try that.

#10

April 12th, 2006, 12:43 AM

xlordt

Only the strong survives!!.

Join Date: Feb 2003

Location: A World of wonders.

Posts: 5,573

Time spent in forums: 1 Month 11 h 9 m 33 sec
Reputation Power: 406

Quote:

Originally Posted by Kravvitz

Don't use absolute positioning. Just use margins and floats and give the elements min-height instead of height.

Ok i see what you mean now... but i think i didn't explain my self correctly what i exactly want.. sorry for this... let me try again.... here is what I'm trying to achieve..

Now Lets say.. i have a left, right, bottom div inside a div's container.... now if the left div was to go over its max min-height there for it shall move down correct? ( Ya thanx for that min-height

) now.. what if i wanted the right div to move down as well.. also as you can see here the bottom div should be able to move down as well. Now that is what I'm trying to do.. Forgive my lack of explanation as I'm really frustrated and sick ( high fever, yet i cant keep in bed

#11

April 12th, 2006, 01:46 AM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,831

Time spent in forums: 6 Months 1 Day 19 h 19 m 2 sec
Reputation Power: 4192

You'll need to clear the floats. I suggest you put the bottom div inside the container and give it clear:both.

You may want to use one of these two techniques as well:
http://www.alistapart.com/articles/fauxcolumns/
http://www.positioniseverything.net...out/equalheight

In other situations where an element isn't already there where you need floats to be cleared, I recommend clearing options 1 and 2 listed on this page.
More information:
http://garyblue.port5.com/webdev/floatdemo.html
http://www.quirksmode.org/css/clearing.html

Expandable Div's with css

Developer Shed Advertisers and Affiliates