Issue with positioning of content

**seannie** · Feb 21, 2013 05:29

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:

Code:

css
    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;
    }
    
html

<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>

**seannie** · Feb 21, 2013 07:40

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.

**ralph.m** · Feb 21, 2013 08:19

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

Code:

#main_col(
        margin:0;
        padding:0;
        width:620px;
        float:left;
    )

instead of

Code:

#main_col {
        margin:0;
        padding:0;
        width:620px;
        float:left;
    }

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

Code:

<!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>

User Tag List

Thread: Issue with positioning of content

Thread Tools

Display

Issue with positioning of content

Bookmarks

Bookmarks

Posting Permissions