HTML/CSS question

[zappaDPJ]

I'm having an issue with a website I'm coding in html/css and I wondered if anyone here might have an answer.

If you have a div container of a fixed width but no specified height and the html content is text, the text will define the height of the container. Is it possible to assign properties to an image so that it will have the same effect?

The problem I'm having is if there is not enough text in the container to push the height of the container below the bottom of an image I have to add a string of <br /> tags until it does. This seems very messy so I was wondering if there's a better way?

[Rik]

Paul's your man for this, Zap. I'll drop him a PM to ask him to take a look.

[psp83]

hi zappaDPJ,

it would be good if you could post the html and css to see if something is there that shouldnt be.

I'm guessing you have something like

Code Select Expand


<div class="abox">
<img src="someimage.jpg" alt="" />
<p>This is some text that goes in here</p>
</div>


in the style sheet try the following,

.abox { position: relative; width: 250px; }

if that dont work try adding height: auto into the style

if the div or anything inside the div is floated left or right try adding :

Code Select Expand

<div style="clear: both;"></div>

Under the text so it looks like this :

Code Select Expand


<div class="abox">
<img src="someimage.jpg" alt="" />
<p>This is some text that goes in here</p>
<div style="clear: both;"></div>
</div>



As i said, i could tell you more if i could see the code.

[Rik]

Thanks, Paul. 

[zappaDPJ]

Thanks guys, I really appreciate this,   to you both.

Here is the code, it's probably abysmal as I really don't have a clue most of the time  

Code Select Expand

<div id="left">
     <h1>Title</h1>
     <div class="box1">
       <div class="box2">
         <p><a href="some_image.jpg" target="_blank"><img class="imgLeft" src="some_image.jpg" width="336" height="210" alt="image" /></a>some text.</p>
       </div>
     </div>
  </div>

Code Select Expand

#left {
   float: left;
   width: 680px;
}

.box1 {
   margin: 0 0 20px 0;
    width: 680px;
   background: url(images/box1.gif) repeat-y;
}

.box2 {
   padding: 0 10px 20px 10px;
   background: url(images/box2.gif) no-repeat bottom;
}

#left h1 {
   background: #303030 url(images/h1_left.gif) no-repeat top;
}

.imgLeft {
   display: block;
   float: left;
   margin: 0 15px 5px 0;
}

I've included a screen shot of the image bounding box breaking into the bottom bar. To stop this I'd have to add line breaks to the end of the text.

Many thanks for your suggestions, I'll go try them out  

[attachment deleted by admin]

[Rik]

[psp83]

<h1>Title</h1>
<div id="left">
  <div class="box1">
   <div class="box2">
     <p><a href="some_image.jpg" target="_blank"><img class="imgLeft" src="some_image.jpg" width="336" height="210" alt="image" /></a>some text.</p>
     <div style="clear: both;"></div>
   </div>
  </div>
</div>

try adding the bit in bold

[zappaDPJ]

Brilliant! An instant fix, thank you so much, I knew there must be a better way but it was totally beyond me.

Thanks once again for taking to time to help, I really appreciate it 

[psp83]

no problem, when something is always floated you have to clear it after.

eg a 2 col layout

<div id="header"></div>

<div id="left" style="float: left; width: 150px;">
    <p>menu here</p>
</div>
<div id="middle" style="float: left; width: 550px;">
    <p>content here</p>
</div>

<div style="clear:both;"></div>

<div id="footer"></div>

Hope it helps for the future.

[Lance]

Paul

[zappaDPJ]

no problem, when something is always floated you have to clear it after.

Hope it helps for the future.

Very much so, it's the answer to a number of issues I've had with this particular site