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=http://www.webdeveloper.com/forum/archive/index.php/"black_silicon.jpg"></div>
<div class="Picture">
<div class="Caption">Shorter caption - no problem.</div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"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.
~thanimalAbsolutely positioned things are taken out of the flow, so they don't affect the position of the following items. You might want to try relative postioning, or floats.Remove the absolute positioning.
Edit: Ben beat me.Originally posted by Jona
Edit: Ben beat me. Yes. With a stick. That's why you don't sass me.Thanks for the responses! Relative positioning seems like a step in the right direction. Now if I can just get my photo/caption divs on one line instead of all down the page...
~thanimalOriginally posted by thanimal
Thanks for the responses! Relative positioning seems like a step in the right direction. Now if I can just get my photo/caption divs on one line instead of all down the page...
Give it a width and use white-space: nowrap.Thanks for the reply Jona. I don't think the wording of my last post was entirely clear. The problem I'm having is that the two divs are stacked on top of each other (I want them side by side - as in the attached screenshot).
~thanimal<div style="width: 500px;">
<div style="float: left; width: 200px;">
<p>Hi, what's up?</p>
</div>
<div style="float: right; width: 290px;">
<p>Yo! Not much!</p>
</div>
</div>Floating was the way to go! Some slight modifications on your suggestion and I'm up and running.
Happy to help.
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=http://www.webdeveloper.com/forum/archive/index.php/"black_silicon.jpg"></div>
<div class="Picture">
<div class="Caption">Shorter caption - no problem.</div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"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.
~thanimalAbsolutely positioned things are taken out of the flow, so they don't affect the position of the following items. You might want to try relative postioning, or floats.Remove the absolute positioning.
Edit: Ben beat me.Originally posted by Jona
Edit: Ben beat me. Yes. With a stick. That's why you don't sass me.Thanks for the responses! Relative positioning seems like a step in the right direction. Now if I can just get my photo/caption divs on one line instead of all down the page...
~thanimalOriginally posted by thanimal
Thanks for the responses! Relative positioning seems like a step in the right direction. Now if I can just get my photo/caption divs on one line instead of all down the page...
Give it a width and use white-space: nowrap.Thanks for the reply Jona. I don't think the wording of my last post was entirely clear. The problem I'm having is that the two divs are stacked on top of each other (I want them side by side - as in the attached screenshot).
~thanimal<div style="width: 500px;">
<div style="float: left; width: 200px;">
<p>Hi, what's up?</p>
</div>
<div style="float: right; width: 290px;">
<p>Yo! Not much!</p>
</div>
</div>Floating was the way to go! Some slight modifications on your suggestion and I'm up and running.
Happy to help.