[SOLVED] creating a div like a box

[otuatail]

Hi guys

 

This is riving me crazy. I want to create a div with a solid border. What I am trying to due is create a copy of a news letter, that would have 3 columbs. A typical microsoft publisher style doc, with 3 columb divs inside a large page div. I cant even get an outer page div with a border. Can someone help on this please.

 

http://www.des-otoole.co.uk/hc/news.php

 

Desmond.

 

[otuatail]

Sorry some of you might not be able to access the style sheet I know it can be done.

 

 

#page1

{

  position:absolute;

  left:200px;

  top:200px;

  width:400px;

  height:300px;

  border-style: solid double;

  colour:red;

}

[rhodesa]

the problem you are going to run into is splitting up the content evenly. html can't evenly distribute content over 3 columns like you would expect microsoft publisher to do. but once you have the content split up, it would be something like this:

<style type="text/css">
  .news {
    width: 600px;
    border: solid 1px black;
  }
  .newsColumn {
    float: left;
    border: solid 1px #CCC;
    width: 170px;
    padding: 9px;
    margin: 5px;
  }
  .clearNews {
    clear: left;
  }
</style>
<div class="news">
  <div class="newsColumn">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum, velit iaculis porttitor congue, mi dui mattis lectus, non convallis mauris libero in ipsum. Aliquam felis nulla, volutpat nec, auctor nec, convallis eu, libero. Cras suscipit lacus vitae lectus. Sed metus arcu, dictum vitae, tristique eu, rhoncus pretium, velit. Phasellus condimentum dolor at libero. Duis lobortis lacus ut erat. Praesent ut ante at felis ultrices dictum. Fusce non orci sed diam fringilla posuere. Maecenas sit amet ipsum. Aliquam dictum lacus. Etiam vulputate arcu. Aliquam a nisl non nunc ultrices rhoncus. Phasellus nec lacus non dui accumsan scelerisque. Donec condimentum turpis et quam. Maecenas lacus arcu, eleifend eu, feugiat sed, pretium in, diam. Vestibulum vestibulum.</p>
    <p>Etiam viverra, nunc eu egestas rutrum, nibh nisi aliquet metus, non fringilla elit enim vel ligula. Donec risus purus, malesuada in, euismod id, varius eget, velit. In iaculis egestas libero. Quisque facilisis tristique ligula. Donec at felis. Nulla ante. Sed lacus mi, convallis et, pulvinar a, elementum eu, elit. Mauris imperdiet congue magna. Sed a quam. Duis fringilla. Maecenas id libero. Praesent mauris.</p> 
  </div>
  <div class="newsColumn">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum, velit iaculis porttitor congue, mi dui mattis lectus, non convallis mauris libero in ipsum. Aliquam felis nulla, volutpat nec, auctor nec, convallis eu, libero. Cras suscipit lacus vitae lectus. Sed metus arcu, dictum vitae, tristique eu, rhoncus pretium, velit. Phasellus condimentum dolor at libero. Duis lobortis lacus ut erat. Praesent ut ante at felis ultrices dictum. Fusce non orci sed diam fringilla posuere. Maecenas sit amet ipsum. Aliquam dictum lacus. Etiam vulputate arcu. Aliquam a nisl non nunc ultrices rhoncus. Phasellus nec lacus non dui accumsan scelerisque. Donec condimentum turpis et quam. Maecenas lacus arcu, eleifend eu, feugiat sed, pretium in, diam. Vestibulum vestibulum.</p>
    <p>Etiam viverra, nunc eu egestas rutrum, nibh nisi aliquet metus, non fringilla elit enim vel ligula. Donec risus purus, malesuada in, euismod id, varius eget, velit. In iaculis egestas libero. Quisque facilisis tristique ligula. Donec at felis. Nulla ante. Sed lacus mi, convallis et, pulvinar a, elementum eu, elit. Mauris imperdiet congue magna. Sed a quam. Duis fringilla. Maecenas id libero. Praesent mauris.</p> 
  </div>
  <div class="newsColumn">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum, velit iaculis porttitor congue, mi dui mattis lectus, non convallis mauris libero in ipsum. Aliquam felis nulla, volutpat nec, auctor nec, convallis eu, libero. Cras suscipit lacus vitae lectus. Sed metus arcu, dictum vitae, tristique eu, rhoncus pretium, velit. Phasellus condimentum dolor at libero. Duis lobortis lacus ut erat. Praesent ut ante at felis ultrices dictum. Fusce non orci sed diam fringilla posuere. Maecenas sit amet ipsum. Aliquam dictum lacus. Etiam vulputate arcu. Aliquam a nisl non nunc ultrices rhoncus. Phasellus nec lacus non dui accumsan scelerisque. Donec condimentum turpis et quam. Maecenas lacus arcu, eleifend eu, feugiat sed, pretium in, diam. Vestibulum vestibulum.</p>
    <p>Etiam viverra, nunc eu egestas rutrum, nibh nisi aliquet metus, non fringilla elit enim vel ligula. Donec risus purus, malesuada in, euismod id, varius eget, velit. In iaculis egestas libero. Quisque facilisis tristique ligula. Donec at felis. Nulla ante. Sed lacus mi, convallis et, pulvinar a, elementum eu, elit. Mauris imperdiet congue magna. Sed a quam. Duis fringilla. Maecenas id libero. Praesent mauris.</p> 
  </div>
  <div class="clearNews"></div>
</div>

[otuatail]

Great thanks for that. I didn't want to use a table as I have been told they are a bad idea and search engines dont work with them.

 

Desmond.