...

View Full Version : Two Column Text



fangonk
12-02-2009, 03:38 PM
I need to come up with a solution, preferably table-less, that allows me to split a body of text into two blocks with a defined height and width. Should be pretty simple but I can't figure it out: http://img3.imageshack.us/img3/875/examplejl.jpg

Any ideas?

Excavator
12-02-2009, 05:38 PM
Hello fangonk,
Defined height and width make it easy. float:left; makes it work.
Have a look at this for starters -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
height: 600px;
width: 800px;
margin: 30px auto;
background: #999;
font-size: 0.8em;
border: 2px solid #fff; /*this kills the collapsing margin*/
}
#wrap {
height: 450px;
width: 400px;
margin: 50px auto 0;
background: #ccc;
border: 2px solid #fff;
}
#wrap p {
width: 180px;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="wrap">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end wrap--></div>
<!--end container--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum