1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Css positioning question

Discussion in 'HTML, Graphics & Programming' started by hargi, 12 Mar 2010.

  1. hargi

    Wise Guy

    Joined: 19 Jul 2006

    Posts: 1,852

    I have the following that displays nearly ok.
    The logo is fine.

    The content is slightly wrong. The images are going to be 200 x 200

    what i want is square with text centred underneath it bit of a gap another square with text underneath it. then i want to drop down and do the same again for the other 2 squares.

    am i doing this correctly and what do i need to change?

    Thanks in advance


    HTML
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="e4allcss.css" type="text/css" media="screen"/>
    </head>
    <body>
        <div id="container">
            <div id="logo">
                <img src="Logo.jpeg" alt="logo" width="481" height="98"/>
            </div>
            <div id="content">
                <img src="Square.jpg" alt="Square" />
                <p>Start Here</p>
            </div>
            <div id="content">
                 <img src="Square.jpg" alt="Square" />
                <p>Teaching </p>
            </div>
            <div id="content">
                 <img src="Square.jpg" alt="Square" />
                <p>Managing </p>
            </div>
            <div id="content">
                 <img src="Square.jpg" alt="Square" />
                <p>Extras</p>
            </div>
        </div>
    </body>
    </html>
    

    CSS
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    * html #maincol
    {
        height: 400px;
    }
    
    body
    {
        background-color: #000;
    }
    
    #container 
    {
        width:900px;
        margin-left:auto;
        margin-right:auto;
        position:relative;
        background-color:transparent;
    }
    
    #logo
    {
        padding-left:40px;
        display:block;
        top:0px;
        left:40px;
        height:120px;
        
    }
    
    #content
    {
        display:block;
        min-height:200px;
        height:auto !important;
        height:300px;
        min-width:200px;
        width:auto !important;
        width:300px;
        text-align:center;
    }
    
    #content p {
        color:#fff;
    }
    
     
  2. Tripnologist

    Mobster

    Joined: 12 May 2007

    Posts: 3,894

    Location: Bristol

    You would want to do something like..

    Code:
    <div id="content">
    	<div class="contentbox"></div>
    	<div class="contentbox"></div>
    	<div class="contentbox"></div>
    	<div class="contentbox"></div>
    	<div class="contentbox"></div>
    	<div class="contentbox"></div>					
    </div>
    
    Code:
    #content { margin: 0 0 0 -15px;}
    #content .contentbox { float: left; width: 200px; margin: 0 0 15px 15px;}
    
    The negative margin on content must match the margin you want between the boxes. You'll also need to clearfix #content.
     
  3. hargi

    Wise Guy

    Joined: 19 Jul 2006

    Posts: 1,852

    Edit found that out,

    HOw do i now position them in the center of the container div
     
    Last edited: 12 Mar 2010
  4. RoyMi6

    Mobster

    Joined: 9 Mar 2010

    Posts: 2,702

    Hargi, because you know the width of your container, and how wide the content is going to be, you could just pad the content in accordingly.

    Or you could use the following

    Code:
    <div id="container">
    	<div id="content">
    		<div id="contentboxContainer">
    			<div class="contentbox">1</div>
    			<div class="contentbox">2</div>
    			<div class="contentbox">3</div>
    			<div class="contentbox">4</div>
    			<div class="contentbox">5</div>
    			<div class="contentbox">6</div>			
    		</div>
    	<div>
    </div>
    
    Code:
    #content{
    		margin:			0 auto;
    		width:			415px;
    	}
    	
    		#contentboxContainer{
    			width:			430px;
    			margin:			0 0 0 -15px;
    		}
    
    			.contentbox{
    				float:			left;
    				width:			200px;
    				height:			200px;
    				text-align:		center;
    				margin:			15px 0 0 15px;
    			}
    
    The trick here is the "margin: 0 auto" which is short hand for:

    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;

    and effectively centres a div inside another element.

    Roy