IDNetters Forums

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?

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

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


<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 :

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

Under the text so it looks like this :


<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.

Thanks, Paul.  :thumb:

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

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

<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>


#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  :thumb:

[attachment deleted by admin]

:ithank:

Quote
<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

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  :thumb:

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.

:karmic: Paul :)

Quote from: psp83 on Nov 18, 2009, 16:47:03
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  :thnks: