Issue with positioning of content

HTML & CSS
1

I’m trying to create a simple template to work off. The right column and the lower bottom content aren’t positioning where I want. Also the wrapper isn’t aligning centrally but that’s only a minor issue.

Below is the code:

[U]css[/U]
    body{
        margin:auto;
        padding:0;
    }
    #wrapper{
        width:960px;
        float:left;

    }
    #main_col(
        margin:0;
        padding:0;
        width:620px;
        float:left;
    )
    #right_col{
        float:right;
        margin:0;
        padding:0;
        width:240px;

    }
    .main_section{
        margin:0;
        padding:0;
        width:310px;
        float:left;
    }
    #lower_content_1{
        clear:left;
    }
    #lower_content_2{
        clear:all;
    }
    .section{
        margin:0;
        padding:0;
        width:155px;
        float:left;
    }
    #footer{
        margin:0;
        padding:0;
        width:960px;
        float:left;

    }

    img{
        border:0;
        margin:0;
        padding:0;
    }

[U]html[/U]

<div id = "wrapper">

    <div id = "nav">
        <img src="http://placehold.it/960x50">
    </div>

    <div id = "main_col">

        <div id = "main_pic">
            <img src="http://placehold.it/620x150">
        </div>

        <div id="lower_content_1">

            <div class = "main_section">
                <img src="http://placehold.it/310x100">
            </div>

            <div class = "main_section">
                <img src="http://placehold.it/310x100">
            </div>

        </div>

        <div id = "lower_content_2">


            <div class = "section">
                <img src="http://placehold.it/155x70">
            </div>

            <div class = "section">
                <img src="http://placehold.it/155x70">
            </div>

            <div class = "section">
                <img src="http://placehold.it/155x70">
            </div>

            <div class = "section">
                <img src="http://placehold.it/155x70">
            </div>

        </div>

    </div>

    <div id = "right_col">
        <img src="http://placehold.it/240x150">
    </div>

    <div id = "footer">
        <img src="http://placehold.it/960x50">
    </div>



</div>
2

I should have also mentioned, in case it was unclear, that I wanted the right col to shift right to be aligned right beside the main image. The 4 small sections should align under the 2 main sections and are enclosed with the main col div

Any help would be great.

3

You have a minor typo in your CSS that is causing most of the trouble—

#main_col[COLOR="#FF0000"]([/COLOR]
        margin:0;
        padding:0;
        width:620px;
        float:left;
    [COLOR="#FF0000"])[/COLOR]

instead of

#main_col [COLOR="#0000CD"]{[/COLOR]
        margin:0;
        padding:0;
        width:620px;
        float:left;
    [COLOR="#0000CD"]}[/COLOR]

I’ve made a few other tweaks, such as unfloating the wrapper and giving it margin: 0 auto to center it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
body{
        margin:0;
        padding:0;
    }
    #wrapper{
        width:960px;
        margin: 0 auto;
        overflow: hidden;
        
    }
    #main_col{
        margin:0;
        padding:0;
        width:620px;
        float:left;
    }
    #right_col{
        float:right;
        margin:0;
        padding:0;
        width:240px;
        
    }
    .main_section{
        margin:0;
        padding:0;
        width:310px;
        float:left;
    }
    #lower_content_1{
        clear:left;
    }
    #lower_content_2{
        clear:all;
    }
    .section{
        margin:0;
        padding:0;
        width:155px;
        float:left;
    }
    #footer{
        margin:0;
        padding:0;
        width:960px;
        float:left;
        
    }
    
    img{
        border:0;
        margin:0;
        padding:0;
    }
</style>
	
</head>
<body>

<div id = "wrapper">
       
    <div id = "nav">
        <img src="http://placehold.it/960x50">
    </div>
    
    <div id = "main_col">
        
        <div id = "main_pic">
            <img src="http://placehold.it/620x150">
        </div>
        
        <div id="lower_content_1">
            
            <div class = "main_section">
                <img src="http://placehold.it/310x100">
            </div>
            
            <div class = "main_section">
                <img src="http://placehold.it/310x100">
            </div>
            
        </div>
        
        <div id = "lower_content_2">
            
            
            <div class = "section">
                <img src="http://placehold.it/155x70">
            </div>
            
            <div class = "section">
                <img src="http://placehold.it/155x70">
            </div>
            
            <div class = "section">
                <img src="http://placehold.it/155x70">
            </div>
            
            <div class = "section">
                <img src="http://placehold.it/155x70">
            </div>
            
        </div>
        
    </div>
    
    <div id = "right_col">
        <img src="http://placehold.it/240x150">
    </div>
    
    <div id = "footer">
        <img src="http://placehold.it/960x50">
    </div>
       
       
       
</div>

</body>
</html>