PDA

View Full Version : Expandable divs



electrickeye
23 Jun 2009, 01:03 PM
I'm trying to create a div that will size its self to fit the content in it. But I'm not making it a square div, it's going to have rounded edges. So I'm thinking I need to make 3 divs, the middle one being square, and being the one that can expand. then there would be one on top and one on bottom that would give the illusion of a singe, round-edged container. The only problem is that I can't figure out how to position the two divs to make them flush with the middle one. Any ideas? how do most designers do expanding divs like this?

Wickham
23 Jun 2009, 01:19 PM
Divs normally go onto a new line, so if you code three divs, they should be on top of one another. Make sure they have no top or bottom margins or padding.

<div id="top">&nbsp;</div>
<div id="middle"><p>Content here</p></div>
<div id="bottom">&nbsp;</div>

CSS something like:-
#top, #middle, #bottom { margin: 0; padding: 0; }
#top { background-image: url(top.jpg); width: ??px; height: ??px; }
#middle { width: ??px; }
#bottom { background-image: url(bottom.jpg); width: ??px; height: ??px; }

This assumes that the top.jpg and bottom.jpg have a fixed width and rounded corners (one is normally the other saved upside down).

Quite often a containing div is created around all three divs so that the containing div can be accurately positioned and hold together the inner divs.