Strange Positioning of Divs

**Joe3000** · 02-16-2008, 07:43 PM

I have two divs on my page that are giving me greif.

One with the style 'bottom' applied to it and the other with 'top-right'.

The 'top-right' is ok in Firefox but in IE I would like it flush against the side of the div it is in. It is high lighted in yellow on this page in the top right corne:
http://www.jfwebdesign.co.uk/photog/work.php

The CSS is as follows:

Code:

.top-right {
    margin: 0px;
    padding-right: 3px;
    background-color: yellow;
    float: right;
    text-align: right;
    width: 14%;
}

The second offending div has the style called 'bottom'. It is coloured red so you can see it. On two pages it is at the top and on the third it is further down, I would like it at the bottom outside of all the other divs/containers.

Here is it style:

Code:

.bottom {
    margin: 0px;
    padding: 0px;
    background-color: red;
    border: 0px solid #999999;
    height: 20px;
    width: 100%;
}

If you look at the html you will see it is outside of the other divs but it is being placed inside them.

Can anyone help?

Thanks.

**blue-dreamer** · 02-16-2008, 09:19 PM

The first thing to do is add a valid DOCTYPE to your page - do this and troubleshooting will be a lot easier!

**melnikoff** · 02-17-2008, 03:21 AM

Put this to the very first line of your HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

**Joe3000** · 02-17-2008, 06:24 AM

Thanks. Pages now start like this:

HTML Code:

<?php include('rotator.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

**Joe3000** · 02-17-2008, 06:27 AM

Which has fixed the top-right div issue.

There is no button to edit threads in Firefox.

**chrishirst** · 02-17-2008, 06:40 AM

Quote:

There is no button to edit threads in Firefox.

Bottom right of post alongside the "quote" button, but you do have a limited time where you can edit your own posts, should be longer than 3 minutes though.

**Joe3000** · 02-17-2008, 06:47 AM

I don't even have the option to quote or do a new post. I can only post in the Quick Reply box.

**Gilligan** · 02-17-2008, 07:27 AM

Why is this line in the code?

Code:

.bottom {
    margin: 0px;
    padding: 0px;
    background-color: red;
    border: 0px solid #999999;
    height: 20px;
    width: 100%;
}

Your basically saying you want NO border to have a color of #999999.

**Joe3000** · 02-17-2008, 07:45 AM

Because when I am changing the sizes of divs to adjust the layout I like to be able to turn on the border easily by changing the zero to a one.

This helps me see the size, shape and position of the div if the background color has not been set.

Without this I would have to guess what size and position the div actually is. Guessing can be time consuming and can lead to problems further down the line.

**Joe3000** · 02-21-2008, 05:46 PM

Right, I've added the doctype and its still not working.

The DIV with the red background should be at the very bottom of the page, under the large DIV.

This is the HTML placing it on the page:

HTML Code:

  <!-- InstanceEndEditable --></div>
<div class="bottom">bottom</div>
</body>

You can see it is the last DIV on the page.

Yes I am using Dreamweaver templates.

Here is the CSS for the bottom class:

Code:

.bottom {
 margin: 0px;
 padding: 0px;
 background-color: red;
 border: 0px solid #999999;
 height: 20px;
 width: 100%;
}

It appres in different places on different pages.

'bottom' DIV at the top of the page:
http://www.jfwebdesign.co.uk/photog/

'bottom' DIV almost at the bottom of the page:
http://www.jfwebdesign.co.uk/photog/about.php
'bottom' DIV at the top of the page:
http://www.jfwebdesign.co.uk/photog/work.php

'bottom' DIV at the top of the page:
http://www.jfwebdesign.co.uk/photog/contact.php

Here is a link to the CSS file:
http://www.jfwebdesign.co.uk/photog/styles.css

Can anyone explain why?

Many thanks.

**LadynRed** · 02-21-2008, 09:07 PM

Get rid of the position:absolute on the CONTENT div and the bottom div should go where you want it - below "content". As it is, you have taken 'content' completely out of the document flow, so the bottom div goes to the top - ignoring "content' completely - which is what happens when you use positioning that way.

After you get rid of the position:absolute on .content, set the margin on .content to margin: 0 auto; to center it.

**Amirmullick3** · 02-21-2008, 09:15 PM

The first thing to do is add a valid DOCTYPE to your page - do this and troubleshooting will be a lot easier!

**Joe3000** · 02-22-2008, 04:50 AM

Quote:

Originally Posted by LadynRed

Get rid of the position:absolute on the CONTENT div and the bottom div should go where you want it - below "content". As it is, you have taken 'content' completely out of the document flow, so the bottom div goes to the top - ignoring "content' completely - which is what happens when you use positioning that way.

After you get rid of the position:absolute on .content, set the margin on .content to margin: 0 auto; to center it.

Thank you very much. It now appears to working fine.

Just the bottom DIV on the 'about' page is positioned inside the content DIV.

**LadynRed** · 02-22-2008, 10:04 AM

Quote:

Just the bottom DIV on the 'about' page is positioned inside the content DIV.

Sounds like you might be missing the a closing </div> for content.

This validation warning confirms it:
line 17 column 1 - Warning: missing </div>

**Joe3000** · 02-22-2008, 10:19 AM

Excellent.

Thank you very much.

**Joe3000** · 02-22-2008, 02:48 PM

I can't get the container div to contain the text-col divs.

I want all the other divs apart from bottom to go inside it.

Any ideas?

Thanks.

**LadynRed** · 02-22-2008, 08:09 PM

You have to clear the floats of those floated columns. The clear:both on the footer isn't doing it.

Add this to your CSS:

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Add this <br class="brclear" /> after the closing </div> of the 3 column area.

**Joe3000** · 02-23-2008, 08:15 AM

Thanks. Worked perfectly.

**LadynRed** · 02-23-2008, 10:40 AM

Excellent