DIV inside DIV - lining up for Firefox 1

[ElviraDaP]

This is driving me insane!

I've got this home page (

http://www.swcc.beds.sch.uk)

which I have been smartening up as my skills and knowledge increase, but now I want to rebuild it the approved css way and where I'm up to so far is at

http://www.swcc.beds.sch.uk/filesintransit/Learning/SWCCExperiment/index.htm

- I've put temporary coloured borders round the DIVs so I can see where they all are.

All is going swimmingly until I get to the bottom row, where I cannot get Firefox to line up all the logos with the little note (LogoText) inviting visitors to click on them!

They line up with each other OK, and with the link to the 'Acknowledgements' page; and I can get them lined up with the LogoText without any bother in IE. But as soon as I put any kind of position style in anywhere within the footer DIV (black border), Firefox just causes whichever DIV it refers to to fall out of its parent DIV.

I've tried putting the logos and the text loose within 'footer', I've tried putting them into separate DIVs (as at present) and I've tried putting the LogoText DIV (grey border)inside the Logo DIV (pink border)but all to no avail.

I wondered about using a display:inline but I haven't used that before and I'm not sure if I'm doing it right, because stuff just rockets about all over the page at random when I try that!

Can anybody help?
The relevant bit of the stylesheet goes

#footer{
width: 95%;
clear: both;
border: thin dotted #000000;
margin: 0px;
}

#logos{
width: 65%;
border: thin dotted #CC33FF;
}

#logoText{
width: 176px;
border: thin dotted #CCCCCC;
}

Thanks very much.

Jenny
(School Web Manager)

 

[Vragabond]

Take a look at floats.

 

[ElviraDaP]

Thanks, but that's what I tried first! And that works fine for the 3 green-bordered columns in the middle..

But no matter how I put it, every instruction I can think of for telling that particular block of text where to go takes it out of its enclosing DIV in Firefox.

Jenny

 

[Foamcow]

What do you want the text to line up with? I just floated it and it kind of lined up.

If you are trying to absolutely position something you should note that positioned elements are positioned in relation to the first parent element that has a position declaration.

If you put a position:relative on the footer then you can set absolute positions on the elements within it.

However, I echo... use floats and avoid absolute positioning.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[monksnake]

However, I echo... use floats and avoid absolute positioning.

I echo this too.

<.

 

[Foamcow]

I reiterate that echo

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[ElviraDaP]

Gosh, the acoustics in here aren't half funny - I keep hearing all these echoes ...

Thanks for trying to help, but I realise now that after two days of fiddling about trying to get this to work, I'd slightly lost sight of exactly what the problem is. Sorry about that, I'll try and explain a bit more coherently.

It's not so much that they won't line up at all - it's that they won't line up and stay inside their enclosing DIVs. It's OK in IE, but in Firefox, the moment I try to tell them anything about where I want them, they just fall out of their black-bordered DIV (footer) and even the red-bordered one (page-container).

The only reason this matters at the moment is because I've got my background image in page-container and having all the footer stuff falling out means they're not properly positioned against my elegant white circle. You can see what I mean if you compare

http://www.swcc.beds.sch.uk/filesintransit/Learning/SWCCExperiment/index.htm

with

http://www.swcc.beds.sch.uk/filesintransit/Learning/SWCCExperiment/indexX.htm

The first one has #logos and #logoText as follows:

#logos{
width: 65%;
border: thin dotted #CC33FF;
float: left;
padding-left: 50px;
padding-right: 50px;

}

#logoText{
float: right;
width: 100px;
padding-right: 50px;
border: thin dotted #CCCCCC;
}

and the second is identical except the float: has been removed.

So what is going on? Is there some problem about how many DIVs you can have inside each other?

I expect I can fix the immediate visual problem just by putting the background image into .body, but that leaves me none the wiser about why it doesn't work this way.

I will happily buy a pint of Bovril for any kind soul that can help

 

[Foamcow]

i don't have time to go back and look at it again but it sounds like you have floated elements within a non floated container.

Floated elements are taken out of the document flow and, as such, will not impact on the size of their container.

A solution is to float the container too.

#container { float:left; }
#insidething1, #insidething2 { float:left; }


<div id="container">
  <div id="insidething1">
    blah
  </div>

   <div id="insidething2">
    blah
  </div>
</div>

Another might be to add a 'clearer' - an element that is set to clear:left, right or both. I sometimes use an <hr> for this with a special class applied, like so.

#insidething1, #insidething2 { float:left; }
.clearer { clear:both; visibility:hidden; }

<div id="container">
  <div id="insidething1">
    blah
  </div>

   <div id="insidething2">
    blah
  </div>
  
  <hr class="clearer" />
</div>

Go with the first option if you can as this will avoid any extraneous markup.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[Foamcow]

Actually, what I said there about floated elements being removed from the document flow is incorrect. I blame a combination of the clocks going forward an hour and a horrible cold/bug thing I have.

They are, of course still part of the flow but they still will not effect the dimensions of their containing element.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.