Positioning problems

  Colinhp 13:25 03 Jul 2008

I have a div 'navigation' area floated to the left of the page, positioned relative, with hyperlinks to areas of my site.
Floated to the right of this navigation area is the div 'content'.
Directly under the content is a div 'bottom' also floated right. The 'content' and the 'bottom' are the same width.

I want to put a div 'associates' to sit directly under the navigation area (same width) that will include images. I have tried this with all types of 'positioning' and 'floating', yet every time this is viewed in the browser (IE6 and 7, Firefox and Opera)it 'moves' up and underneath the navigation area.

I have positioned the div 'associates' in the html code before the navigation div and also between this and the content and it 'moves' as described above. If I position it after the 'content' it hugs the bottom of the page and has a large gap between it and the navigation area.

If I simply add the required text and images to the navigation area, any hyperlinks I then add to the images take on the same style as the navigation links which is not what I want either.

I am using MS Expression Web software.
Please can anyone help?

  Kemistri 16:16 03 Jul 2008

Just put them in parent divs, position those relatively, then position the child divs within them as desired. For instance, you could place #navigation and #content in one div and #associates and #bottom in another. Remember to get the order of each child div (in the markup) semantically correct to match your floats.

E&OE, as my mind's more on PHP today.

  Colinhp 17:21 03 Jul 2008

Hello Kimistri,

Thank you for your response. I've still got a div that moves upwards behind the navigation div.

I have created a 'sidebar' div - positioned relative and floated left and in it have the 'navigation' and 'associate' divs (require these one above the other). These two have no positioning or float properties.

I have also created a 'mainbar' div - positioned relative and floated right and in it have three divs; 'tabs', 'content' and 'tabs1' (one above the other) with no positioning or float properties.

When viewed in a browser the 'associate' div still slides up and underneath the 'navigation' div.
This is the code for the relevant divs and navigation.

#mainbar {
position: relative;
width: 534px;
float: right;
#sidebar {
position: relative;
width: 191px;
float: left;
#associate {
width: 188px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 3px;
#navigation a {
padding: 4px;
color: #FFFFFF;
text-decoration: none;
display: block;
border-bottom: 1px dotted #FFFFFF;
background-color: #003399;
#navigation a:hover {
border: 1px solid #003399;
color: #000000;
text-decoration: underline;
background-color: #D7D7D7;
#navigation a:active {
padding: 4px;
color: #FFFF00;
text-decoration: underline;
display: block;
border-bottom: 1px dotted #FFFFFF;
background-color: #003399;
#tabs {
font-size: small;
text-decoration: none;
text-align: left;
width: 520px;
padding: 2px 5px 2px 5px;
margin: 5px 2px 5px 2px;
color: #00287D;
#tabs1 {
font-size: small;
text-decoration: none;
text-align: left;
width: 520px;
padding: 2px 5px 2px 5px;
margin: 5px 2px 5px 2px;
color: #00287D;
#content {
padding: 5px;
margin: 2px 2px 5px 2px;
width: 520px;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #003399;

  Kemistri 17:24 03 Jul 2008

That ream of CSS only gives half the picture at best. Can you post a link to your test location?

  Colinhp 17:30 03 Jul 2008

This is the site homepage - click here.
I'm trying to place a div beneath the navigation area.

  Kemistri 17:55 03 Jul 2008

Well, that layout was totally not what I was expecting based on your description. Which shows the importance of providing links from the start.

Before you go any further, there is a bit of tidying that you probably should do to make it easier to work with and more robust. Firstly, add comments next to closing divs to make them easily identifiable -- you will know at a glance if any have been misplaced. Next, wrap #navigation in a new parent div and place it below #content -- remember what I wrote about getting floated divs semantically correct? -- and then place your problematic div below #navigation in that same parent div. This separates them from #content. I'm not sure where you're going with #tabs 1: as it's the same width as #content, you may benefit from wrapping them together or making #tabs 1 a child of #content. You will need to experiment to some degree because I cannot be 100% certain about what I think you're trying to achieve. The divs at the bottom need some work as well: they are busting out from #container and would be better if #footer was a parent div. You're not making full use of parent/child div relationships. Hovering the CSS viewer over #container shows a height dec: you shouldn't need a height dec for that div if your other code is correctly arranged and parent height decs will often break when text size is adjusted or set by a browser.

I hope that all makes sense: it was a bit of stream-of-conciousness writing.

  Colinhp 16:17 04 Jul 2008

Thanks for the advice.
The one thing missing from the book I used as a self-help to Expression web was about parent divs and child divs!
I've redone all the pages from the website and taken all your ideas and hopefully straightened it out a bit better!

#associate works fine now I understand a bit better about floating etc.!

When viewing in Firefox and Opera the bottom #footer still breaks out of the #container and I have no idea why.
Container instructions are:
#container {
border: 1px solid #003399;
background-position: left top;
margin: 5px Auto 0px Auto;
width: 740px;
background-image: url('Images/q3pd_logo.png');
background-repeat: no-repeat;
background-color: #FFFFFF;
Once again a big thank you for your help.

  Kemistri 19:32 04 Jul 2008

This is something that I wanted to cover yesterday, but omitted in my haste. You should be able to fix the footer layout by making use of the parent/child relationship again and using relative positioning. Standard practice for building a footer is to place any sub-sections within the #footer div, or whatever name you choose for it. Your #linkbar is both the problem and sort of the answer! It's not floated (in fact, it has no position dec, which will cause it to default to position:relative) and that means that it's happily staying within the #container div. The #copyright and #foot divs can be placed together with the #linkbar in a new parent div, with that div being given relative positioning to keep it in the flow. Be sure to get the markup in the right order, as before. Then tweak the decs for those three divs as needed. And here's a quick tip: look up the "clear" declaration, which you need to know when using floats. Hope that helps. Footers can be a bit tricky and there is more than one way of approaching them.

  Colinhp 15:12 08 Jul 2008

Hiya Kemistri, thank you for your thoughts and comments.

The following hopefully explains what I'm trying to achieve with the footer area of my webpages.

I want the #container (blue border and white background) to have the #footer inside it at all times. I do not want anything to drop outside the #container. When viewed in IExplorer 5, 6 and 7 it all looks great!

I want the #container to increase in height if the text inside it increases (which it does in IE).

The problem I have is when the site is viewed in both Opera and Firefox, the #footer 'moves' down the page and sits on top of the bottom border of the #container, no matter how large or small the divs above #footer become.

The parent #footer layout is 'clear:both' to keep below all the parent divs above it in #container.
Inside #footer is child #linkbar which has no position dec as it is the same width as of #footer and I want it to be above the last two child divs in #footer.
The remaining two child divs are below #linkbar and have layouts 'float:left' and 'float:right' respectively, both with fixed widths as I want a slight gap between these two divs.

#footer and its children currently have no position declarations.

How do I get the #footer (and its children) to stay in the #container when viewed by Opera or Firefox?

  Kemistri 02:08 09 Jul 2008

I often get my best inspiration at 2 am! I just downloaded your files, spent a few moments tweaking it and sorting out the position decs and parent/child order and it's all fixed. I'll e-mail the files to you via the mail address on your website (you should have them by the time you read this). Talking of e-mail addresses, it's a really bad idea to have a mailto link or even a plain text machine-readable address anywhere in a website! So your next step should be to learn how to build a simple contact form and send its contents to a secure PHP script! Post again if you'd like some advice with that. One other thing, which I didn't spend any time looking at, is that your main menu suffers from "jiggle" when hovered over. There will no doubt be some variation in your CSS under the hover pseudo-class, either in padding, margin, height, or text styling.

  Kemistri 02:09 09 Jul 2008

Forgot to add that I haven't tested it in IE6 or Safari: just IE7, FF2, and Opera.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Galaxy Note 8 vs iPhone X

The secrets of creating gory VFX

How to update iOS on iPhone or iPad

WhatsApp : comment lire vos messages sans que l’expéditeur le sache