Help for Newbie with alignment of divs across all browers

[jofield]

Hi

I'm used to coding in HTML but I've just created a new website on WordPress (I've attempted to make my own theme!!) and am having a little alignment issue with the CSS across different browsers.

It views perfectly on FireFox on the Mac, but when viewed in IE on Windows the main content box and the sidebar box overlap in the middle. On Firefox for Windows the boxes are miles apart, and on an OS device they majorly overlap. Isn't there something else I can do to make it look at least remotely similar across all browsers?

Web page is http://jamieflynnbase.com/blog/

CSS I currently have is as follows:

a/*
Theme Name: sandboxkid
Theme URI: http://www.plaintxt.org/themes/sandbox
Description: Child Theme for Sandbox
Author: JoJoField
Author URI: http://www.jojofield.com
Template: sandbox
Version: 0.1
*/
 
@import url("/sandbox/style.css");

html, body {

        background: url(/images/background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

height: 100%;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 13px;
    color: #FFCC33; 
    line-height:1.4em; /* 16*1.4=18 */
}

h1, h2, h3 {
	font-weight: normal;
	color: #FFCC33;
}

a:link {
	color: #FFCC33;
}

a:hover {
	text-decoration: none;
	color: #FFFFFF;
}

a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

div#container {
float:left;
margin:0 -490px 0 0;
width:100%;
}

div#content {
float: left;
width: 490px;
min-height: 100%;
background-color:rgba(0,45,80,0.8);
margin: 0 0 0 170px;
border: 30px solid rgb(0,45,80);
    border: 30px solid rgba(0,45,80,0.8);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
border-radius:25px;
}
* html #container {
height: 100%;
}

div#containernosidebar {
float:left;
margin:0 -490px 0 0;
width:100%;
}

div#contentnosidebar {
float: left;
width: 860px;
min-height: 100%;
background-color:rgba(0,45,80,0.8);
margin: 0 0 0 170px;
border: 30px solid rgb(0,45,80);
    border: 30px solid rgba(0,45,80,0.8);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
border-radius:25px;
}
* html #container {
height: 100%;
}

div.sidebar {
float:right;
overflow:hidden;
width:225px;
min-height: 100%;
background-color:rgba(0,45,80,0.8);
margin: 0 175px 0 30px;
text-align: center;
border: 30px solid rgb(0,45,80);
    border: 30px solid rgba(0,45,80,0.8);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
border-radius:25px;
}
* html #container {
height: 100%;
}


div#footer {
clear:both;
width:100%;
height:100%
font-size: 12px;
color: #FFFFFF; 
}

[TylerB]

It views perfectly in IE for me. What version of IE are you using?
EDIT: Works in Firefox too.

And are your links on the right supposed to be very un-aligned?

Sorry for the size, I just did it real quick.

[jofield]

Hi TylerB
It was IE9 I was looking at it in and the main content box and the sidebar are overlapping, and it's even worse on my iPhone

[TylerB]

Very weird, I too was viewing it in IE9. Try using percentages for the widths and margins.

[jofield]

How very strange! Okay I'll try giving percentages a go and see what happens! Thanks TylerB!

Also, can you see on the screengrab you took that below the top menu bar and left aligned there is a transparent box that has a slight border to it? This only displays in IE and not in FireFox and I cannot work out what it is to get rid of it It then seems to prevent selection of the items at the bottom of the longer dropdown items from the menu.

Do you have any idea what this is and how I can remove it please?

Thanks

[jofield]

Ok I've managed to remove the weird header and have sorted some of the alignment issues I was having but am now trying to get to grips with using percentages instead of padding so that I don't have the overlapping issues in some versions of IE and on OS devices.

I've been doing a lot of googling and just wanted to check I'm on the right wavelength here:

To have two floating boxes as I do currently I will need to set up 5 columns in my page. Columns 1, 3 an 5 just containing empty space or a transparent gif or something similar and columns 2 and 4 containing my content. Would that be correct or is there a far simpler way that I'm missing?

Many thanks