Quick CSS Layout help [Archive] - Dynamic Drive Forums

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:
http://img257.imageshack.us/img257/7333/layouttestcp8.jpg

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>
<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>