There are many ways of doing it and here is one way you can get a layout that resembles your picture.
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>Untitled Document</title>
<style type="text/css">
body{
background:#000;
}
#wrapper{
width:960px;
background:#000;
margin-left:auto;
margin-right:auto;
position:relative;
overflow:hidden;
}
#photodiv {
width:460px;
height:600px;
background:#9F9F9F;
margin-top:20px;
float:left;
}
#textdiv{
width:460px;
height:600px;
float:left;
color:#FFF;
padding: 20px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="photodiv"></div><!--end photodiv-->
<div id="textdiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat fringilla sapien at eleifend. Etiam augue metus, scelerisque vitae fringilla blandit, varius quis metus. Morbi pretium congue ligula, ac lacinia risus convallis eget. Aenean nec turpis sit amet arcu sollicitudin eleifend nec eget nisi. Vestibulum semper nunc in diam euismod quis interdum velit vulputate. Aenean varius sollicitudin est eget volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dapibus adipiscing quam vitae accumsan. Suspendisse et arcu non diam ornare convallis vitae non nibh. Proin vel arcu eu velit egestas consequat. Nullam eget nunc eros, id condimentum quam. Aliquam sit amet pharetra purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum posuere augue sed ipsum vulputate nec accumsan lacus condimentum. Proin at quam at erat vulputate sagittis. In eleifend gravida quam, non mollis tortor ultrices at.
</div><!--end textdiv-->
</div><!--end wrapper-->
</body>
</html>
Junior Coders
simple css layout
Posting Permissions
Reply With Quote
Bookmarks