Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    aligning images and text to the middle

    hello,

    I'm quite new to HTML and CSS and I'm trying to achieve something but I am having trouble.
    This is what I am trying to do:

    And this is what I have got and I am stuck:

    Here is my code:
    Code:
    <div class="grid_1">
                <h2>
                    <img src="images/whatido.png" alt="What I do" />
                    What I Do?
                    <br />
                    <span>Lorem ipsum dolor sit amet consectetur</span>
                </h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi eu quam varius accumsan. Praesent vitae tellus non elit bibendum luctus. Pellentesque fermentum blandit 
    			</p>
                <ul>
                    <li>List 1</li>
                    <li>List 2</li>
                    <li>List 3</li>
                    <li>List 4</li>
                    <li>List 5</li>
                </ul>
            </div>
    		
    		
            <div class="grid_1">
                <h2>
                    <img src="images/myportfolio.png" alt="My Portfolio" />
                    My Portfolio
                    <br />
                    <span>Lorem ipsum dolor sit amet consectetur</span>
                </h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi eu quam varius accumsan. Praesent vitae tellus non elit bibendum luctus. Pellentesque fermentum blandit 
                </p>
                
            </div>
    		
    		
            <div class="grid_2">
                <h2>
                    <img src="images/isocialize.png" alt="I Socialize" />
                    I Socialise
                    <br />
                    <span>Lorem ipsum dolor sit amet consectetur</span>
                </h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi eu quam varius accumsan. Praesent vitae tellus non elit bibendum luctus. Pellentesque fermentum blandit  
                </p>
                <div class="social_icons">
                    <a href="#" title="Twitter"><img src="images/twitter.png" alt="Twitter" />Twitter</a>
                    <a href="#" title="Twitter"><img src="images/flickr.png" alt="Flickr Group" />Flickr Group</a>
                    <a href="#" title="Twitter"><img src="images/digg.png" alt="Digg" />Digg</a>
                    <a href="#" title="Twitter"><img src="images/rss.png" alt="RSS Subscribe" />RSS Subscribe</a>
                    <a href="#" title="Twitter"><img src="images/skype.png" alt="Skype" />Skype</a>
                    <div class="clear"></div>
                </div>
            </div>
    Code:
    .grid_1{
            float: left;
            width: 33%;
    		margin: 0 20px 20px 60px;
    		padding: 0 20px 20px 0px;
    		font-size: 14px;
    		
    }
    
    .grid_2{
            float: right;
            width: 23%;
    }
    Clearly I need to add more CSS but I don't know how to go about it. Could someone help me out here?

    Many Thanks

    Andy

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    To line up three divs in a row, you set their widths to slightly less than 1/3 the width of their container ( to allow for borders, margins etc. ) and float them all left, or right, but the page is built from left to right so left is the usual.

  • #3
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Here ya go.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>What I Do</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    	
    }
    .grid_1{
            float: left;
            width: 20%;
    		margin: 0 20px 20px 60px;
    		padding: 0 20px 20px 0px;
    		font-size: 14px;
    		display:inline;
    		
    }
    
    .grid_3{
            float:left;
            width:20%;
    }
    
    .grid_2 {
    	float: left;
    	margin: 0 20px 20px 2px;
    	padding: 0 20px 20px 0px;
    	font-size: 14px;
    	display: inline;
    	width:20%;
    }
    .title {
    	font-size:30px; 
    	font-weight:900;
    }
    .under-title {
    	padding:0px 0px 20px 0px;
    	font-weight:bold;
    
    	 
    }
    .sector-container .title-img {
    	height:42px; 
    	width:38px;
    	position:relative;
    	left:0;
    	top:20px;
    	
    }
    .sector-container .under-title {
    	position:relative;
    	left:43px;
    }
    ul.grid-1-list li:before{ content:"-"; position:relative; left:-5px; list-style-type:none; float:left; display:inline;}
    ul.grid-1-list li {
    	list-style-type:none;
    	position:relative;
    	top:15px;
    	left:10px;
    
    }
    ul.grid-2-list li:before{ content:"-"; position:relative; left:-5px; list-style-type:none; float:left; display:inline;}
    ul.grid-2-list li {
    	list-style-type:none;
    	position:relative;
    	top:-70px;
    	left:150px;
    }
    .grid-2-img img {
    	height:200px;
    	width:300px;
    	
    }
    .social_icons {
    	padding:20px 0; 
    }
    .social_icons img {
    	width:25px;
    	height:25px;
    	padding:0px 20px 0 10px;
    	
    }
    .social_icons a {
    	padding:20px 0;
    	
    }
    
    
    </style>
    </head>
    
    <body>
    <div class="sector-container">
    <div class="grid_1" style="width: 20%">
                    <img src="images/whatido.png" alt="What I do" class="title-img" />
                    <span class="title">What I Do?</span>
                    <br />
                    <p class="under-title">Lorem ipsum dolor sit amet consectetur</p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi eu quam varius accumsan. Praesent vitae tellus non elit bibendum luctus. Pellentesque fermentum blandit 
    			</p>
                <ul class="grid-1-list">
                    <li>List 1</li>
                    <li>List 2</li>
                    <li>List 3</li>
                    <li>List 4</li>
                    <li>List 5</li>
                </ul>
        <ul class="grid-2-list">
                    <li>List 1</li>
                    <li>List 2</li>
                    <li>List 3</li>
                    <li>List 4</li>
                    <li>List 5</li>
              	</ul>
    
            </div>
    		
    		
            <div class="grid_2" style="width: 20%; height: 213px">
    
                    <img src="images/myportfolio.png" alt="My Portfolio" class="title-img"  />
                    <span class="title">My Portfolio</span>
                    <br />
                    <p class="under-title">Lorem ipsum dolor sit amet consectetur</p>
    
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi eu quam varius accumsan. Praesent vitae tellus non elit bibendum luctus. Pellentesque fermentum blandit 
                </p>
                <span class="grid-2-img">
                <img src="http://www.comparecarinsurancequotes.co.uk/wp-content/uploads/2011/12/sports-car-insurance.jpg" height="228"/>
                
                </span>
                
            </div>
            <div class="grid_3">
                    <img src="images/isocialize.png" alt="I Socialize" class="title-img"  />
                   	 	<span class="title"> I Socialise</span>
                    <br />
                    	<p class="under-title">Lorem ipsum dolor sit amet consectetur</p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi eu quam varius accumsan. Praesent vitae tellus non elit bibendum luctus. Pellentesque fermentum blandit  
                </p>
        	<div class="social_icons">
    		<table style="width: 100%; height: 180px;" class="social-links">
    			<tr>
    				<td style="height: 59px"><a href="#" title="Twitter"><img src="images/twitter.png" alt="Twitter" /></a></td>
    				<td style="height: 59px"><a href="#" title="Twitter">Twitter</a> </td>
    				<td style="height: 59px"><a href="#" title="Twitter"><img src="images/flickr.png" alt="Flickr Group" /></a></td>
    				<td style="height: 59px"><a href="#" title="Twitter">Flickr Group</a> </td>
    			</tr>
    			<tr>
    				<td style="height: 64px"><a href="#" title="Twitter"><img src="images/digg.png" alt="Digg" /></a></td>
    				<td style="height: 64px"><a href="#" title="Twitter">Digg</a> </td>
    				<td style="height: 64px"><a href="#" title="Twitter"><img src="images/rss.png" alt="RSS Subscribe" /></a></td>
    				<td style="height: 64px"><a href="#" title="Twitter">RSS Subscribe</a> </td>
    			</tr>
    			<tr>
    				<td><a href="#" title="Twitter"><img src="images/skype.png" alt="Skype" /></a></td>
    				<td><a href="#" title="Twitter">Skype</a> </td>
    				<td></td>
    				<td>Youtube</td>
    			</tr>
    		</table>
                    <div class="clear"></div>
                </div>
            </div>
    </div>        
    </body>
    
    </html>
    Last edited by tempz; 07-29-2012 at 09:59 PM.

  • Users who have thanked tempz for this post:

    andrew_staples (07-30-2012)

  • #4
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh wow thanks tempz that helped out a lot. Much appreciated.
    and thanks for your advice DrDOS

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    You don't always have to float every div left to align them side by side. Left div can be floated left, right div right, and the center div can even be centered. It's a matter of the proper main div container's width and all the the floated/centered div widths with attention paid to any margins/paddings. Also, since floats are removed from the normal document flow, you should place the left/right floated HTML code first within their container div then the center one last. I've already done this many times so I know it can be done.

    Using images with center div not floated, but centered

    All divs floated left

    Misplaced the one I actually wanted to link to.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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