Quick CSS Layout help

**almaline03** · 12-31-2007, 06:06 AM

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.

**Medyman** · 12-31-2007, 03:37 PM

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>

Thread: Quick CSS Layout help

Thread Tools

Search Thread

Quick CSS Layout help

Bookmarks

Bookmarks

Posting Permissions