SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Issue with positioning of content

    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>

  2. #2
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •