CSS Forum

**Nathand** · 03-28-2008, 07:14 PM

I some nested divs that are set to 30% and 70% of the outer divs (body) width. The problem is I have a picture in the left nested div (the 30% one) that is about 25% of the body's width, so when I resize the browser window the right nested div (the 70% one) overlaps the picture.

Here are pictures of what I'm talking about:

As you can see the overlapping look really, really bad. Is there any way I can stop this from happening?

Thanks in advance,

Nathand

**wayfarer07** · 03-28-2008, 09:56 PM

May we see your code please?

**vangogh** · 03-28-2008, 10:38 PM

Nathan code would definitely help, but looking at your screen shots I would say your images is larger than the 30% of the browser width you're allowing. The image isn't going to resize so it forces the div to be wider than 30%.

At what width do the two divs begin to overlap?

**wayfarer07** · 10:57 PM

When I need an image to resize inside a scalable div, I do this:

HTML Code:

<head>
<style>
#liquid {
    width: 50%;
}

#liquid img {
    width: 100%;
}

</style>
</head>

<body>

<div id="liquid">
    <img src="wherever/whatever.png" alt="whatever" />
</div>

</body>

I link to styles instead of putting them in the head like that, but it is easier to show it all on one page like this.

**Nathand** · 03-29-2008, 10:45 AM

Sorry about not responding sooner.

Here's the code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head><title>ScrubPros.com - <!---DESC---></title></head>
<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<div style="position: relative; width: 100%; background-color: #EFEFEF; text-align: left; float:left;">

	<div style="position: relative; width:30%;  background-color: #CECECE; text-align: center; float: left;">
	<img src="4700ANLOmodel.JPG">
	<br>
	</div>
	<div style="position: relative; width: 70%; background-color: #AEAEAE; text-align: left; float: left;">
	
		<div style="position: relative; background-color: #FFAAAA; text-align: left; float: left;">
whupteedooo
		</div>
	 
		<div style="position: relative; background-color: #AAFFAA; text-align: left; float: left;">
		text text text text text text text text text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text text  text text text text text text text 
		text text text text text text <br>
		</div>
		
	</div>

</div>

</body>
</html>

vangogh - You're exactly right on what's happening.

I tried making the image scale itself, but the problem is someone with a really high resolution (like a laptop) will see a very pixelated image.

Is there any way to tell the divs to stop resizing when their content can't fit in them or something?

Thanks,

Nathand

**wayfarer07** · 03-29-2008, 11:12 AM

Code:

#liquid {
    max-width: 600px;
    min-width: 300px;
}

You get the idea.

This doesn't work in IE 6 and below, however.

**LadynRed** · 03-29-2008, 11:16 AM

In addition, you don't need all that relative positioning. If you don't want the div's overlapping the photo, you're going to have to apply a margin to keep them away from the photo at all times.

**Nathand** · 03-29-2008, 11:18 AM

wayfarer07 - That's exactly what I need, but since most people still use IE6 and below I can't use that.

LadynRed - Could you show me an example of what you mean? Do I apply the margin to the pic or the div?

Thanks,

Nathand

**LadynRed** · 03-29-2008, 11:22 AM

Well, since you're floating the divs, it would be best to put a right margin on the photo div as that will not trigger a float margin bug in IE6.

**Nathand** · 03-29-2008, 11:29 AM

I changed the photo's div to this:

Code:

    <div style="position: relative; width: 25%; background-color: #CECECE; text-align: center; float: left; margin-right: 5%;">
    <img src="4700ANLOmodel.JPG">
    <br>
    </div>

But the problem still occurs?

Nathan

**LadynRed** · 03-29-2008, 07:16 PM

Get RID of the relative positioning.

**Nathand** · 03-29-2008, 07:52 PM

Is there something else I'm doing wrong? I have this code now and it still doesn't work :-(

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head><title>ScrubPros.com - <!---DESC---></title></head>
<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<div style="width: 100%; background-color: #EFEFEF; text-align: left; float:left;">

    <div style="width: 25%; background-color: #CECECE; text-align: center; float: left; margin-right: 5%;">
    <img src="4700ANLOmodel.JPG">
    <br>
    </div>

    <div style="width: 70%; background-color: #AEAEAE; text-align: left; float: left;">
    
        <div style="background-color: #FFAAAA; text-align: left; float: left;">
whupteedooo
        </div>
     
        <div style="background-color: #AAFFAA; text-align: left; float: left;">
        text text text text text text text text text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text text  text text text text text text text 
        text text text text text text <br>
        </div>
        
    </div>

</div>

</body>
</html>

**vangogh** · 03-29-2008, 09:31 PM

Nathan you can use a little Javascript to get the max-width for IE.

HTML Code:

width:expression( 
    document.body.clientWidth > (500/12) * 
    parseInt(document.body.currentStyle.fontSize) ? "30em" : "auto");
}

You'll have to play with the numbers a little to get the width you want. The code above comes from this page if you want to read more about it.

I'm using the same javascript on my site at the moment.

Another option to consider is having the left column be a fixed width and then letting the right column fill the space. I'm just guessing, but I would think the left column doesn't change widths as much given it contains images.

**Nathand** · 04-01-2008, 10:29 PM

Thanks for the replies.

I never thought about having the image's div fixed width vangogh. I think that would work well for me, I'll give it a try.

Thanks,

Nathand

**vectorialpx** · 11:31 AM

put a fixed width at the div and overflow:auto; [if you need scrollbars] or overflow:hidden; if you don't

**vangogh** · 04-02-2008, 07:24 PM

Glad to help Nathan.

Usually if I'm trying to develop a fluid site I'll still make several columns fixed width and then let one or two key elements expand and contract with the browser window. Much easier to control your overall layout that way.