15 replies [Last post]
3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Hi, I've been having a problem getting one of my blocks to contain two other blocks.
You can view the HTML at
http://www.donkeyote.pwp.blueyonder.co.uk/3drom/threecolumns.html

and the CSS at
http://www.donkeyote.pwp.blueyonder.co.uk/3drom/index.css

The element I am having a problem with is promoboxcontainer.
I have made the border purple so you can see it - it should contain the two boxes below it, in the centre of the page, but no matter what I've tried, even though the contained blocks act as if they are contained by promoboxcontainer, they aren't inside it.

I'm sure it's something obvious, but can anybody see what's wrong?
If I add a 'height' property to promoboxcontainer, I can make the box surround the blocks it contains, but I shouldn't have to do this, should I? (I want the block to expand and contract with the contained blocks).

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 13 years 10 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Block won't contain two other blocks

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

- r

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 3 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Block won't contain two other blocks

Hi

Try adding overflow:hidden to #promoboxcontainer.

edit: oops beaten to it!

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Block won't contain two other blocks

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

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Block won't contain two other blocks

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Block won't contain two other blocks

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Block won't contain two other blocks

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.

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Block won't contain two other blocks

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Block won't contain two other blocks

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Block won't contain two other blocks

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

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Block won't contain two other blocks

Quote:

<div id="promoboxcontainer">

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

Verschwindende wrote:
  • CSS doesn't make pies

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Block won't contain two other blocks

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.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Block won't contain two other blocks

div.h2?

div.info?

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

Verschwindende wrote:
  • CSS doesn't make pies

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Block won't contain two other blocks

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Block won't contain two other blocks

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.

Verschwindende wrote:
  • CSS doesn't make pies

3drom
Offline
Enthusiast
Last seen: 16 years 17 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Block won't contain two other blocks

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.