thanimal
10-26-2004, 03:19 PM
Hi all,
I'm fairly new to CSS, so hopefully this question has a simple answer. I'm trying to create table-free layout to display photos with captions in the midst of my document body. The problem I'm running into is that particularly long captions end up overlapping with the text of the document. Since the captions are pulled from a database, I don't know ahead of time how long each will be. Right now I have a series of nested divs: each caption is in a div, these divs are each within a second layer div that holds the image and the caption div. A third layer div holds all the second layer divs.
Here's the relevant HTML:
<body>
<div id="DocBody">
<div class="BodyText">
<p>
Random text.
</p>
</div>
<div id="PictureBox">
<div class="Picture">
<div class="Caption">Super long caption that ends up overlapping with the following body text because it's just so darn long!</div>
<img src="black_silicon.jpg"></div>
<div class="Picture">
<div class="Caption">Shorter caption - no problem.</div>
<img src="blacksilicon.jpg"></div>
</div>
<div class="BodyText">
<p>
Random text.
</p>
</div>
</div>
</body>
Here's the relevant CSS:
.Caption
{
position: absolute;
display: block;
margin-top: 110px;
text-align: center;
width: 150px;
}
.Picture
{
display: inline;
margin: 5px;
width: 170px;
}
#PictureBox
{
width: 340px;
padding-top: 20px;
padding-bottom: 40px;
padding-left: 10px;
padding-right: 10px;
background-color: #FFFFFF;
overflow: hide;
}
What am I missing here? Many thanks in advance for any help you can give.
~thanimal
I'm fairly new to CSS, so hopefully this question has a simple answer. I'm trying to create table-free layout to display photos with captions in the midst of my document body. The problem I'm running into is that particularly long captions end up overlapping with the text of the document. Since the captions are pulled from a database, I don't know ahead of time how long each will be. Right now I have a series of nested divs: each caption is in a div, these divs are each within a second layer div that holds the image and the caption div. A third layer div holds all the second layer divs.
Here's the relevant HTML:
<body>
<div id="DocBody">
<div class="BodyText">
<p>
Random text.
</p>
</div>
<div id="PictureBox">
<div class="Picture">
<div class="Caption">Super long caption that ends up overlapping with the following body text because it's just so darn long!</div>
<img src="black_silicon.jpg"></div>
<div class="Picture">
<div class="Caption">Shorter caption - no problem.</div>
<img src="blacksilicon.jpg"></div>
</div>
<div class="BodyText">
<p>
Random text.
</p>
</div>
</div>
</body>
Here's the relevant CSS:
.Caption
{
position: absolute;
display: block;
margin-top: 110px;
text-align: center;
width: 150px;
}
.Picture
{
display: inline;
margin: 5px;
width: 170px;
}
#PictureBox
{
width: 340px;
padding-top: 20px;
padding-bottom: 40px;
padding-left: 10px;
padding-right: 10px;
background-color: #FFFFFF;
overflow: hide;
}
What am I missing here? Many thanks in advance for any help you can give.
~thanimal