Question

im trying to line up two divs next to each other. i managed to hack the CSS for firefox and chrome but having problems with internet explorer. I have looked on here and google found a few but still having problems.

heres the website

http://colmandesigns.123abc.co.nz/dev/brittens/index.html

heres my css

http://codepad.org/Wohvhj3h

any help would be great

thanks

Answer 1

Your problem is linked with the way you space the elements. To align the elements using this structure you’ll have to delete all <br> tags which separates the anchors with images (inside ‘staffimages’) and use CSS margins.

    <div class="staffimages">
    <a href="#">
    <img src="images/staff.jpg" width="50" height="50" alt="Johnny" border="0">
    </a>
    <br> -- delete this
    <br> -- also delete this (and so on)

Also, I recommend you don’t use browser specific CSS hacks unless there is no other way to solve the issues.

Below you can see a CSS snippet to use with your HTML file.

    @charset "utf-8";
    /* CSS Document */
    
    body                            {margin: 0 auto;}
    
    .container                        {margin:0 auto; width:1000px; height:950px; background-image:url(images/container.png);}
    
    #head_back {
    position: absolute;
    left: 0px;
    top: 16px;
    width:700px;
    right:700px;
    height: 126px;
    z-index: -1;
    background-image:url(images/bgbg.png);
    }
    
    /* HEADER */
    
    .header                            {width:982px; height:370px; margin-left:9px; background-image:url(images/header.jpg);}
    .navibg                            {background-image:url(images/navibg.png); width: 983px; height:56px;}
    .logo                            {margin-top:-40px;}
    
    /* CONTENT TITLES */
    
    #welcome                        {width:89px; height:22px; padding-left:50px; padding-top:30px; float:left;}
    #services                        {width:89px; height:22px; margin-left:-90px; padding-top:250px; float:left;}
    #contactus                        {width:89px; height:22px; padding-left:50px; padding-top:30px; float:left;}
    #makinglifeeasy                    {width:89px; height:22px; padding-left:30px; padding-top:30px; float:left;}
    .seperator                        {width:300px; float:right; padding-top:30px; padding-right:90px;}
    #team { position: relative; margin-top: 30px; height: 19px; width: 78px; float: right; margin-right: -105px; }
    
    /* NAVIGATION */
    
    .navi                            {float:right; padding-right:50px; padding-top:3px;}
    
    /* CONTENT */
    
    .welcomecolumn                    {width:500px; height:auto; float:left; padding-left:6px; padding-top:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; text-align:justify; color:#505050; line-height:150%;}
    .servicescolumn                    {width:500px; height:auto; float:left; padding-left:6px; padding-top:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; text-align:justify; color:#505050; line-height:150%;}
    
    .list1                            {float:left; margin-left:-20px;}
    .list2                            {float:right; padding-right:200px;}
    
    /* FOOTER */
    
    .footer                            {background-image:url(images/footer.png); width:982px; height:65px; margin-left:9px; margin-top:460px;  color:#505050}
    .footernavi                        {font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; float:right; padding-right:60px; padding-top:27px;}
    .footernavidetails                {font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; float:left; padding-left:308px; padding-top:27px; color:#FFFFFF; }
    .footertext                        {padding-left:40px; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; padding-top:110px; padding-bottom:5px; color:#aeaeae; text-align:center}
    
    /* TEAM */
    
    .staffimages {
        height:auto;
        float:left;
        margin-left:12px;
        margin-top:15px;
    }
    
    .staffimages a {
        display: inline-block;
        margin-bottom: 20px;
    }
    
    .stafftext1, .stafftext2, .stafftext3, .stafftext4, .stafftext5 {
        width:150px;
        float:left;
        margin-left:80px;
        color:#505050;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
        text-align:justify;
        position:absolute;
    }
    
    .stafftext1    {
        top:30px;
    }
    
    .stafftext2    {
        top:100px;
    }
    
    .stafftext3    {
        top:170px;
    }
    
    .stafftext4    {
        top:242px;
    }
    
    .stafftext5 {
        top:311px;
    }
    
    /* READ MORE */
    
    #readmore, #readmore2, #readmore3, #readmore4, #readmore5 {
        width: 100px;
        height: auto;
        float: right;
        position: absolute;
        margin-left: 80px;
    }
    
    #readmore {
        top: 66px;
    }
    
    #readmore2 {
        top: 135px;
    }
    
    #readmore3 {
        top: 204px;
    }
    
    #readmore4 {
        top: 275px;
    }
    
    #readmore5 {
        top: 345px;
    }
        
        .contactdetails
            {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; width:400px; padding-left:8px; line-height:40%; color:#626262}
            
        .main    {color:#626262}
        
        /* GOOGLE */
    
    .google                    {
        width:300px;
        height:305px;
        float:left;
        margin-left:8px;
        margin-top:12px;
        margin-bottom:20px;}    
    /* LINKS */
    
    a.colman:link { color:#aeaeae; text-decoration:none}      /* unvisited link */
    a.colman:visited { color:#aeaeae; text-decoration:none}  /* visited link */
    a.colman:hover {color:#0c3976; text-decoration:none}  /* mouse over link */
    a.colman:active { color:#aeaeae; text-decoration:none}  /* selected link */
    
    a.footerlinks:link { color:#FFFFFF;}      /* unvisited link */
    a.footerlinks:visited { color:#FFFFFF;}  /* visited link */
    a.footerlinks:hover {color:#FFFFFF;}  /* mouse over link */
    a.footerlines:active { color:#FFFFFF;}  /* selected link */