Page 1 of 1

a couple quick css questions ...

Posted: Sat Jan 17, 2004 11:56 am
by zick
i've checked my css book and i've played around with a couple of things, and i haven't resolved my problems ... so i thought i'd post my code here and see if anyone could prove how dumb i am. so who's up for the, um, challenge?

i'm trying to accomplish the following:

Code: Select all

<tr>
 <td height="126" width="126">
  <div style="border:solid 1px black; padding:1px"><!-- full box -->
   <div style="background-color:#cccccc; text-align:right">title</div>
   <div style="background-color:#999999; height:???">info<br><img src="whatever.png"></div>
  </div>
  </td></tr>
i want the darker div (999999) to stretch to the bottom of the box and fill it totally ... i tried putting "auto" & "100%" in the "???" ... i also would like both the text and image to fall to the bottom of the box.

kinda like the attachment below:



is this possible? thanx for some feedback?

Posted: Sat Jan 17, 2004 12:10 pm
by uberpolak
Your vertical alignment thing is kinda tricky, I don't know how you'd do that, but try adding "display: block;" to your style tag in the div that you want to stretch out.

Posted: Sat Jan 17, 2004 12:13 pm
by basdog22
try an absolute positioning too or you can set the height to 105% or above.

it works with the %% trick

Posted: Fri Feb 06, 2004 8:52 am
by no_memories
Remember to declare your document type and character encoding is very important also. The code could possibly be clean up a bit, but this should work.

Hope this helps. :)

Code: Select all

<html>

<head>
<title>Box</title>
<style>

p &#123;
text-align: justify;
padding: 0px;
margin: 0px 0px 20px 0px;
&#125;

#container &#123;
position: relative;
top: 20px;
left: 20px;
width: 200px;
height: 100%;
color: #000;
background: #999;
border: 1px solid #000;
overflow: hidden;
&#125;

#box1 &#123;
text-align:right;
color: #000;
background: #ccc;
width: 100%;
&#125;

#box1 div span &#123;
font-weight: bold;
padding: 0px;
margin: 0px;
&#125;

#box2 &#123;
height: auto;
&#125;

.pad &#123;
padding: 10px;
&#125;

#bs &#123;/* For Display Only */
position: relative;
top:0px;
left: 20px;
width: 30px;
height: 30px;
text-align: center;
&#125;

</style>
</head>

<body>

<div id="container"><!-- full box -->

<div id="box1">
<div class="pad"><span>Articles</span></div>
</div>

<div class="pad">
<div id="box2">
<p>
i've checked my css book and i've played around with a couple of things, and i haven't resolved my problems ...
so i thought i'd post my code here and see if anyone could prove how dumb i am. so who's up for the, um, challenge?
i'm trying to accomplish the following:
</p>

<p>
i want the darker div (999999) to stretch to the bottom of the box and fill it totally ...
</p>
</div>
</div>

</div>

<div id="bs">&nbsp;</div>

</body>

</html>

Posted: Fri Feb 06, 2004 8:54 am
by no_memories
in the bottom .bs class <div>, just encode a space ( & nbsp ; ) without the spaces.