How to prevent image overlapping DIV tag

[barnettgs]

It's a problem when there is few texts. Any solution to this?

Also is it possible to make DIV box filling browser windows 100% height?

Thanks in advance

[timgolding]

What do you mean?

[Graft-Creative]

Originally Posted by barnettgs

It's a problem when there is few texts. Any solution to this?

Also is it possible to make DIV box filling browser windows 100% height?

Thanks in advance

Would have to see the code to even begin to understand what your first question means.

However, your second question is easy enough to to.

In your CSS, add min-height: 100% to the div in question.

Now the div still won't be 100% high, because it needs an antecendent element with a declared height - to be 100% of...

So, to achieve 100% height in the browser viewport, you'll need to make both the html and body elements 100% high also:

html, body {
        height: 100%;
}

Then you'll need to tell the div in question to have a minimum height of 100%...

div#mydiv {
       min-height: 100%;
}

But there's stil a problem: IE versions 5- 6 don't understand min-height and will ignore it. However IE 5 - 6 treaght the 'height' property as it were min-height.

so the next step would be to feed IE 5 -6 soem specific rules that none of the other browsers out there will read, best way is to use conditional comments, like so:

Make a css document called, let's say: iehacks...

and add this rule to it:

div#mydiv {
       min-height: 100%;
}

Then link to the iehacks.css file by placing the following code (known as a conditional comment) in the < head > of your html document.

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/iehacks.css" />
<![endif]-->

Hope that helps? I think I got it right, as I've been working on a 100% height web layout today

If I got anything wrong, it's because I've been working on a 100% height layout all day

Kind regards, and good luck,

Gary

[barnettgs]

Thanks, I will look at 100% height later as I need to sort out image issue on DIV.

For example, if I type texts into DIV box, it would be stretched as more text filled in. It is not the same with image in DIV box without texts, instead most part of image is outside colored DIV box.

If not, I will put in link soon for you to see.

[almostlucid]

I'm working on a similar problem.

I've implemented what you've said, but my page will still not extend to it's full length. Any ideas?

http://test.rhombusdesign.com

[barnettgs]

Ok, here's the link: http://www.udsc.org.uk/template2.php

You can see the logo on bottom of footer, how to stop this?

[gusblake]

Hmmm, I've come across this problem before:

1. add display:block to your image
2. put an invisible div underneath it, like this:

<img src=blah.gif><div style="clear:both;width:100%;height:1px;overflow:hidden"></div>

either/both of the above should sort it out, unless I'm not understanding it properly

[barnettgs]

Are you sure? I'm sure there must be a simpler way to deal with this.

[ahallicks]

Originally Posted by barnettgs

Thanks, I will look at 100% height later as I need to sort out image issue on DIV.

For example, if I type texts into DIV box, it would be stretched as more text filled in. It is not the same with image in DIV box without texts, instead most part of image is outside colored DIV box.

If not, I will put in link soon for you to see.

Simple one here, if you want an image as tyour background and your image to stretch with the text use three images. The first image should be the top of the box, or div you want the text in. The the second should be the content section of the div where the text is going to go. And then the third should be the bottom part or end of the box. For example;

#boxtop {
background-image: url(blah.jpg);
width: 100px;
height: 10px;
}

#boxcontent {
background-image: url(blah.jpg);
width: 100px;
height: auto; (makes the image stretch to the text height)
}

#boxbottom {
background-image: url(blah.jpg);
width: 100px;
height: 10px;
}

And your HTML

<div id="boxtop"></div>
<div id="boxcontent">
Type as much text here as you want
</div>
<div id="boxbottom"></div>

Simple

An example, got to http://www.ahallicks.co.uk/music.php and looks at the source, where the text is describing the vids there is this type of style used. Hope that helps for that?

Edit: Just noticed that for that image you haven't used pixels for the height and width, they just have a number. If you want it resized try using 100px?

[barnettgs]

Thanks but I have found a way. I have added colour background (same colour as footer) to body tag and white background to div #wrap (that holds header, content and footer in one). It worked great for me, with no complicated coding anyway!

However, a new problem appeared! See the page: http://www.udsc.org.uk/contactus.php It looks fine on Mozilla Firefox but the content of contact us is missing in IE 6!?

I think it's more to do with the width but can not find the source of problem!

[barnettgs]

Ok, this is odd. This is a problem with Internet Explorer 6.

If the main content is longer than side menu, it's fine. But if the content is shorter (like contact us page) than menu then it won't display!

Is there a workaround for this? Thanks