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 {
text-align: justify;
padding: 0px;
margin: 0px 0px 20px 0px;
}
#container {
position: relative;
top: 20px;
left: 20px;
width: 200px;
height: 100%;
color: #000;
background: #999;
border: 1px solid #000;
overflow: hidden;
}
#box1 {
text-align:right;
color: #000;
background: #ccc;
width: 100%;
}
#box1 div span {
font-weight: bold;
padding: 0px;
margin: 0px;
}
#box2 {
height: auto;
}
.pad {
padding: 10px;
}
#bs {/* For Display Only */
position: relative;
top:0px;
left: 20px;
width: 30px;
height: 30px;
text-align: center;
}
</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"> </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.