We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 4429
    • 429 Posts
    New thread, different CSS issue.

    I have a page with three main columns:

    Left column is the text, middle column is an image and the right column contain three boxes. These are latest news, faqs and sponsors. Within these three boxes there is an image.

    The problem is that I cannot figure out how to style and align these boxes to display correctly.

    Here is an image of the rightcolum (the site is local) - you can see some of the header, footer and navigation, but ignore those.



    Here is my code relating to the boxes and columns.

    /******* MAIN CONTENT **********/
    #content {
    background: url(../images/mainbackground.jpg) repeat-y;
    line-height : 18px;
    width : 460px;
    height: 325px;
    margin : 0px 0px 0px 0px;
    float: left;
    }
    
    #mainphoto {
    line-height : 18px;
    width : 307px;
    height: 325px;
    margin : 0px 193px 0px 456px;
    }
    
    
    /*********BOXES***************/
    
    
    #boxcontainer {
    float : right;
    width : 191px;
    height; 325px
    margin : 2px 0px 2px 0px;
    }
    
    
    
    
    
    #latestnews {
    width : 191px;
    height : 105px;
    background : url(../images/latestnews.jpg);
    margin : 0px 0 0px 0px;
    
    }
    
    #faqs {
    width : 191px;
    height : 105px;
    background : url(../images/faqs.jpg);
    margin : 4px 0px 0px 0px;
    }
    
    
    #sponsors {
    width : 191px;
    height : 105px;
    background : url(../images/sponsors.jpg);
    margin : 4px 0px 0px 0px;
    }
    
    /********** BOX STYLES ********/
    #latestnews h2 {
    margin : 0;
    padding: 5px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-weight : 550;
    font-size : 10px;
    color : #ffffff;
    }
    
    #latestnews p {
    margin : 0px;
    padding: 0px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-weight : 400;
    font-size : 10px;
    color : #ffffff;
    }
    
    #latestnews a {
    margin : 0px;
    padding : 5px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-weight : 550;
    font-size : 11px;
    color : #ffffff;
    text-decoration : underline;
    }
    
    #latestnews img {
    	margin: 0px;
    	padding: 10px 8px 0px 10px;
    	float: right;
    
    }
    
    
    
    
    
    
    #sponsors h2 {
    margin : 0px;
    padding: 5px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-weight : 550;
    font-size : 10px;
    color : #ffffff;
    }
    
    #sponsors p {
    margin : 0px;
    padding: 5px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-weight : 400;
    font-size : 10px;
    color : #ffffff;
    clear: right;
    }
    
    #sponsors a {
    margin : 0px;
    padding : 5px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-weight : 550;
    font-size : 11px;
    color : #ffffff;
    text-decoration : underline;
    }
    
    #sponsors img {
    	margin-top: -40px;
    	padding: -10px 8px 0px 10px;
    	float: right;
    
    }
    #faqs h2 {
    margin : 0px;
    padding: 5px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-weight : 550;
    font-size : 10px;
    color : #ffffff;
    }
    
    #faqs p {
    margin : 0px;
    padding: 5px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-weight : 400;
    font-size : 10px;
    color : #ffffff;
    }
    
    #faqs a {
    margin : 0px;
    padding : 5px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-weight : 550;
    font-size : 11px;
    color : #ffffff;
    text-decoration : underline;
    }
    
    #faq img {
    	margin: 0px;
    	padding: 10px 8px 0px 10px;
    	float: right;
    
    }
    


    Any ideas on sorting this one?
      • 15152
      • 360 Posts
      It’s always easier when I can see the page. From what I can tell you need to put the image within the beginning of the paragraph tag and float: right (which you have). Don’t use any padding, use a left margin of like 10px.
        There are no boring projects. Only boring executions. ~ Etzkorn
        www.impress-design.com
        • 33997
        • 150 Posts
        If you could at least put up the HTML, it would be a lot easier to debug...
          "Great spirits have always encountered violent opposition from mediocre minds." -Albert Einstein
          • 1343 ☆ A M B ☆
          • 2,213 Posts
          Quote from: goonz at Mar 16, 2009, 05:38 PM

          If you could at least put up the HTML, it would be a lot easier to debug...

          That or share a link to the site so we can take a look and do a little more active debuging.

            Patrick | Server Wrangler
            About Me: Website | Tweets |  MODX Hosting
            • 4429
            • 429 Posts
            the website is now at http://www.presspointproofing.co.uk/uttingswebsite

            The original idea of an image in each box has been scapped for the time being.
              • 1343 ☆ A M B ☆
              • 2,213 Posts
              Hello,

              You may want to fix the current validation errors with your site. Once you have things validated if you restore the images we can try to debug the problem.

              AMDbuilder
                Patrick | Server Wrangler
                About Me: Website | Tweets |  MODX Hosting