[RESOLVED] positioning problem with divs

[steamPunk]

Hi

I'm having a problem with some divs not positioning themselves how i would like them to

have a look at this page in FireFox - this is how it should look
http://www.hugoscott.com/image-archiver/index.htm

the salmon-coloured background is just to highlight the problem when you look at it in IE7 (i haven't dared open it in IE6 yet)

what am I doing wrong for it not to show up properly in IE7 ?

there isn't a lot of css yet so I'll post it on here to make things easier :
html, body, div, span, p, a, ul, ol, li, table, tr, th ,td, form, input, textarea, img, h1, h2, h3, h4, h5 {
margin:0;
padding:0;
}

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background-color: #fff;
background-image:url(img/body-bg-small.gif);
background-repeat:repeat-x;
}

#frame{
position:relative;
padding-right:200px;
margin: 50px 3% 0px 3%;
background-color:#FFCC99;
}


#menu{
position:absolute;
width:170px;
top:0px;
right:0px;
}

#float-layer{
width:170px;
top:0px;
right:0px;
}



li{
list-style-type:none;
}

a {
text-decoration: none;
font-weight: bold;
color: #666;
outline: none;
}
a:visited {
color: #666;
}
a:active {
color: #666;
}
a:hover {
color: #000;
text-decoration: underline;
}

strong, b {
font-weight: bold;
}


p {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}


.content-block{
width:140px;
height:230px;
margin:10px;
border-bottom:#999999 solid 1px;
float:right;
text-align: left;
padding:0px;
border-left:0px;
border-right:0px;
}

.content-block img{
border:#999999 solid 0px;
}

.img-holder{
position:relative;
width:140px;
height:140px;
text-align: center;
}

.img-title{
color:#8C1E32;
font-weight:bold;
margin-top:5px;
margin-bottom:2px;
}

.img-photog{
margin-bottom:2px;
}



thanks

[WebJoel]

html, body, div, span, p, a, ul, ol, li, table, tr, th ,td, form, input, textarea, img, h1, h2, h3, h4, h5 {
margin:0;
padding:0;
}Is cumbersome & unnecessarily long.

Remove this and just say:

* {margin:0;
padding:0;
}which means EXACTLY the same thing. "universal selector"

:)

[steamPunk]

I didn't even know that existed

thanks

... any idea about the other problem ?

[WebJoel]

(returned from supper..)

<div id="frame" style="overflow:hidden;"> seems to solve it. There must 'floated' items in "#frame".

[steamPunk]

you're spot on, there

but why does "overflow:hidden" sort out a problem that doesn't seem to have anything to do with overflow ? I'm mystified ..... (or is this just an IE quirk ?)

[WebJoel]

"float" takes the element out-of-the-document-flow so it exerts no 'pressure' on the parent container to expand around it. "overflow:hidden;" indicates that child-content is in need of 'enclosure' so the container/parent expands to hold the child-float.
"overflow:hidden;" also makes unfloated-content (content that is still 'in-the-document-flow' and thus, exerts 'pressure' on the parent element) that is wider or taller than the parent to be, well, hidden. I don't quite grasp the concept of this dichotomy either, but know when to use this and for what result.