PDA

View Full Version : Is there a way to control panel height?



rfresh
Jan 16th, 2009, 05:34 PM
I'm trying to place multiple panels side by side to create a sort of horizontal bar effort as Header columns for the data that will go below them. The first panel column holds a checkbox object and the next one holds just text. The two panels have different heights - is there a way to make their panel heights the same?

Thanks...



<style type="text/css">
#test3 {
color: Black ; /* font color */
text-align: left;
padding: 0px;
background-color: #99CCFF; /* panel color */
border-top: 1px solid #C0FFFF;
border-left: 1px solid #C0FFFF;
border-right: 1px solid #0000FF;
border-bottom: 1px solid #0000FF;
}</style>





<Body>
<span ID="test3"><INPUT TYPE="checkbox" NAME="">Delete </span><span ID="test3"> Customer Name </span>
</Body>

abduraooft
Jan 16th, 2009, 05:38 PM
<span> is an inline element, and by default we can't apply width/height to them. However, we could change it's display property via CSS to make it behave like a block level element. Try adding

display:block; for your #test3

rfresh
Jan 16th, 2009, 06:27 PM
I made that change and that did make the two panel heights the same...however, they are stacked one on top of the other instead of being side by side. Behaving like div's instead of span's.

Maybe I'm trying to use borders in the wrong way? I'm trying to create horizontal header columns (panels) that look something like this:

[Date][Name][Phone][Description]

I know I can do this using tables but I'm trying to not use tables and do it only using css.

I've attached an image of a GUI showing the kind of "panels" (borders) I'm trying to create.

abduraooft
Jan 17th, 2009, 07:54 AM
Your case looks ,ore like a tabular data, so I think a table is the best choice for you.

I made that change and that did make the two panel heights the same...however, they are stacked one on top of the other instead of being side by side. Behaving like div's instead of span's. Applying a float:left; instead of display:block; would solve it.

rfresh
Jan 17th, 2009, 07:13 PM
float: left worked - thanks...