Block won't contain two other blocks

You need to add overflow:hidden; to #promoboxcontainer since you floated the two boxes inside.

- r

Hi

Try adding overflow:hidden to #promoboxcontainer.

edit: oops beaten to it!

search for 'clearing floats', 'containing floats', or 'clearfix' for more explanation. what you encountered is correct behavior, btw.

Many thanks for your help, but it doesn't seem to work. I'm using AceHTML, and have tried it in Firefox and IE.

It does work in Firefox. IE needs for #promoboxcontainer to also have layout. Giving the box a dimension, declaring it inline-block, and several other things will do that. try

#promoboxcontainer {
_height: 1px;
overflow: hidden;
margin-right:180px;
margin-left:180px;
border: 3px solid #aa00aa;
} 

or

#promoboxcontainer {
display: inline-block; /*triggers hasLayout*/
display: block; /*resets display w/o resetting hasLayout -- tnx cssangel*/
overflow: hidden;
margin-right:180px;
margin-left:180px;
border: 3px solid #aa00aa;
} 

or

#promoboxcontainer {
zoom: 1;  /*IE only, but sets hasLayout*/
overflow: hidden;
margin-right:180px;
margin-left:180px;
border: 3px solid #aa00aa;
} 

or ...

See http://garyblue.port5.com/webdev/floatdemo.html

cheers,

gary

Many thanks for your help Gary. Do you know why the border of promoboxcontainer isn't displaying? I don't need it for the final version of my site, but I would like to be able to see it while I'm designing so I can see where each block is.

I think I've fixed it now, please ignore the previous sentences. Firefox wasn't reloading the .css file (it seems to do this when it feels like it, not every time I ask it to reload a page), so I was looking at the 'old' version of the page, even though it was supposed to be the new one!
Thanks for all your help.

I'm sorry but I'm still having problems with this in Firefox.
Now the centre column isn't filling up the available space, if I take out the 'margin-right' and 'margin-left' commands it's okay, but I can't work out why it was working okay when they were in there to begin with!

http://www.donkeyote.pwp.blueyonder.co.uk/3drom/threecolumns.html

#promoboxcontainer {
display: inline-block;
display: block;
overflow: hidden;

margin-left: 165px;
margin-right: 165px;

border: 3px solid #aa00aa;
}

I can't understand why promoboxcontainer is no longer defaulting to 100% of the screen width, but now appears to be using only the available space between the leftcolumn and rightcolumn, to determine what 100% should be.

Also, when I set #promoboxright to the following:
.promoboxright {
float: right;
width: 48%;
margin: 0 0 0 3px;
border: 3px solid #084186;
}

the left hand 3px margin doesn't stay a constant size when I resize Firefox's window, the distance between promoboxright and promoboxleft is variable and gradually reduces to nothing - shouldn't this stay as 3px until promoboxright falls under promoboxleft?
(Promoboxleft is the left hand column of four products, promoboxright is the right hand).

Your html/css is way too over-thought for me to really figure out. Removing the margins seems to work out well, but that's not fully tested. Why does every third character have to have its own class? OK, overstated, but really?

cheers,

gary

cheers,

gary

Hi Gary, could you give me some examples of where I've used too many classes?

<div class="promoboxleft">

<!-- PROMOTION START -->

<div class="floatpromo">

<div class="floatpromoline">

<a href="projector.html"><img alt="PROJECTOR" SRC="http://www.donkeyote.pwp.blueyonder.co.uk/3drom/images/cmw-103small.jpg"></a>

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

<div class="h2">
£14.99
</div>

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

<div class="info"><A href="projector.html"><SPAN>information</span></A></div>

</div>

<div class="spacer2">
</div>
<div class="h20red">
LCD TV Wall Mount
</div>
<div class="spacer2">
</div>
<div class="h13blue">
Suitable for any LCD screen up to 32"
<br>
For VESA mounts: 50x50mm, 75x75mm, 100x100mm
<br>
Holds up to 22.7kg (50lbs)
<br>
Flush mounting
<br>
Adjustable tilt, 5° up and 20° down

<br>
Weight: 0.5kg
</div>

</div>

Thanks for the reply, but how would I create the same page without using that many classes?
They all apply to different parts of the contents of the box.

div.h2?

div.info?

You don't need classes on every element to target them.

Sorry to sound a bit dumb here, but how do I use the elements h2 or info without using class? (I'm still learning...)

Don't worry, CSS is a difficult thing to learn.

Let's take each little product box.

I see an image, a price, an info bubble, a dividing line, the product name, and a description. I'd get rid of the info bubble altogether, it's not obvious what it does.

Don't use things like class="h2" - use the actual tag <h2>. The info bubble doesn't need a class.

I'd probably rethink that layout myself; it's a bit cramped and hard to read.

Thanks for your help, I'm going to change the info bubble to a button (like the left hand column) that says 'info', and another one to say 'buy'. I will work on the layout a little more too.