7 replies [Last post]
BenCh1
Offline
newbie
Last seen: 16 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-08-14
Posts: 7
Points: 0

Hello!

I have a page with a CSS layout. There is a #content div of a fixed width that sits in the middle of the screen. Inside that is another div, called #nav with a fixed width, which floats to the right of anything in the #content div.

If the paragraphs (etc) in the #content div take up more height than those in the #nav div, there's no problem.

But if there isn't much content in the #content div, the #nav div pokes out of the bottom of the #content div, which i don't want. I want the #content div to stretch downwards so it holds the #nav div. Is that at all clear?

Could anyone help please? I have cut down my code to a bare minimum and pasted it below.

XHTML:

<div id="content">
 <div id="nav">
  <p>bla bla bla bla</p>
 </div>

<p>bla bla bla bla</p>

</div>

CSS:

#Content
{
margin: 0 auto; /*puts the #content div in the middle of the screen */
width: 700px;
}

#Nav
{
margin: 10px;
width: 200px;
float: right;
}

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

See enclosing float

See enclosing float elements.

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.

BenCh1
Offline
newbie
Last seen: 16 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-08-14
Posts: 7
Points: 0

Half way there...

Thanks for that.
It's very helpful on IE but has caused a problem in FireFox. Whilst both browsers enclose the child (#Nav) div perfectly, FireFox has moved the parent (#Content) div, and everything it contains (including the child div) several hundred pixels to the right of the page!

Any ideas why that could be?
Better still, how to stop it?

Thanks again

BenCh1
Offline
newbie
Last seen: 16 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-08-14
Posts: 7
Points: 0

Ah but...

On reflection, it didn't actually change IE at all because IE was doing all along what I wanted. It's FireFox that is not displaying it how I'd like.

I realise IE is "wrong", but for me it's actually doing what I want. How can I lay out the page so both browsers display my information like IE is doing?

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

Please give us a link to the

Please give us a link to the page. What you have posted would not do that, following suggestions from my demo.

<div id="content">
 <div id="nav">
  <p>bla bla bla bla</p>
 </div>

<p>bla bla bla bla</p>

</div>
===========
#Content {
    margin: 0 auto;   
    width: 700px;
    overflow: hidden;
    }

#Nav {
    margin: 10px;
    width: 200px;
    float: right;
    }

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.

BenCh1
Offline
newbie
Last seen: 16 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-08-14
Posts: 7
Points: 0

Certainly

That would be great if you could take a look at it for me, please.

I've uploaded the page to this location:

http://www.alforddocs.co.uk/experimental/

I haven't uploaded any of the pictures, just to save time, but if you'd find studying it easier if I bunged the pictures on the web as well then just let me know.

You'll not need me to tell you this but to save you a little time, the stylesheet is at

http://www.alforddocs.co.uk/experimental/screen.css

Thanks again for your help

Ben

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

You didn't enclose the menu

You didn't enclose the menu floats.

#AccountsOptions {  
    overflow: hidden; /* the right way*/
    display: inline-block; /*IE hack pt 1*/
    margin: 0;
    list-style: none;
    padding: 15px 0 15px 0;
    color: #000;
    font-family: Verdana, Tahoma, Arial, Sans-Serif;
    font-size: 0.8em;
    }

#AccountsOptions {
    display: block; /*IE hack pt 2*/
    }

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.

BenCh1
Offline
newbie
Last seen: 16 years 2 weeks ago
Timezone: GMT+1
Joined: 2006-08-14
Posts: 7
Points: 0

Fantastic

It took me a while to get it but thanks to you, it now works fine. Smile