Results 1 to 2 of 2

Thread: Quick CSS Layout help

  1. #1
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Quick CSS Layout help

    Hi Everyone. Im new to the forum obviously with this being my first post.

    I am new to css and have been struggling to get this portion of my layout done.


    Here is what I need it to look like:


    Here is a sample image of how i need it laid out. I just cant get the floats and things correct. Can anybody help me out? Thanks.

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    HTML Code:
    <html>
    <head>
    <title></title>
    <style>
    
    .container { 
    	background:red; // Change to whatever your bg color is
    	width:550px;  // Change width to suit your design
    }
    .image { 
    	float:left;  // Floats to the left
    	margin-right:10px; // Margin between image and text
    }
    
    .caption { 
    	margin:0; padding:0;  // Gets rid of space set by the <p> tag
    	float:left;  // Float to the left.
    }
    
    .bio { 
    	font:normal 14px "Lucida Sans Unicode" // Enter CSS for the text here, font size, color, etc...
    }
    
    </style>
    </head>
    <body>
    
    <div class='container'>
    	<div class='image'>
    		<img src='image.jpg'>
    		<p class='caption'>John Doe</p>
    	</div>
    	<p class='bio'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec est odio, fermentum a, porta eget, dictum nec, pede. Nunc elit arcu, congue nec, mollis eu, adipiscing id, leo. Morbi ut erat non ante sollicitudin sagittis. Donec gravida consequat ligula. Etiam ac massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur velit tellus, pretium at, tincidunt ut, pharetra ac, urna. Mauris sodales arcu rutrum nisl. Sed ut ipsum. Donec auctor nunc congue diam. </p>
    </div>
    	
    
    
    
    </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
  •