แบบงี้ไม่ทราบทำยังไงครับ พี่กูรูช่วยหน่อยครับ

รูปข้อความ กรอบล้อมรอบ สองคอลัม สวยดีครับ สอนหน่อยครับ
http://uppic.net/full/ae2e6ff6027c6b83f76bed61d1778563

สวยและดูง่ายดีครับอยาก นำไปทำหน้าเว็บอ่ะครับ ขอผุ้รู้ช่วยแนะนำด้วยน่ะครับ

แนะนำให้ศึกษา หรือหาความรู้เพิ่มเติมเกี่ยวกับ การใช้งาน css
http://htmldog.com/guides/cssbeginner/
http://www.w3schools.com/css/default.asp
https://www.ninenik.com/css-manual/cover.html#minitoc

หรือ สามารถ คลิกขวา วิวซอร์ส เพื่อดูรูปแบบโค้ดในหน้าเว็บดังกล่าว
http://www.classroom-design.com/news/

ตัวอย่าง

ความสัมพันธ์แห่งชีวิต
ผลงานภาพพิมพ์ โลหะร่องลึก โดย พัดชา แก้วทองตาล นำเสนอแง่คิดในเชิงบวก เกี่ยวกับความสัมพันธ์ระหว่างมนุษย์กับสรรพชีวิตแวดล้อมใน ธรรมชาติ ซึ่งมีความเกี่ยวโยงและเอื้ออิงกันอยู่อย่างลึกซึ้งดุจดั่งห่วง โซ่แห่งชีวิต ในนิทรรศการ "ความสัมพันธ์แห่งชีวิต"

CSS โค้ดตัวอย่าง

<style type="text/css">
body{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;	
}
.new-rows {
	border-bottom:#999 1px dotted;
	text-align:justify;
	border-left:#999 1px dotted;
	width:288px;
	font-family:Arial, Helvetica, sans-serif;
	float:left;
	height:150px;
	border-top:#999 1px dotted;
	border-right:#999 1px dotted;
	margin:5px;
	padding:10px;
}

.news-pic {
	border-bottom:#999 1px solid;
	border-left:#999 1px solid;
	background-color:#fff;
	width:110px;
	float:left;
	height:110px;
	border-top:#999 1px solid;
	margin-right:5px;
	border-right:#999 1px solid;
}

.news-pic img {
	width:100px;
	height:100px;
	margin:5px;
}

.news-detail {
	width:500px;
	float:left;
}

.news-head {
	text-align:left;
	font-family:CordiaNew;
	color:#f60;
	font-weight:700;
}
</style>

HTML โค้ดตัวอย่าง

<div class="new-rows">
  <div class="news-pic">
  <a title="ความสัมพันธ์แห่งชีวิต" href="http://www.classroom-design.com/news/news_detail.php?id=58">
  <img src="http://www.classroom-design.com/news/images_news/graphic-news_58.jpg"></a></div>
  <span class="news-head">
  <a title="ความสัมพันธ์แห่งชีวิต" href="http://www.classroom-design.com/news/news_detail.php?id=58">
  ความสัมพันธ์แห่งชีวิต 
  </a></span><br>
  ผลงานภาพพิมพ์ โลหะร่องลึก โดย พัดชา แก้วทองตาล นำเสนอแง่คิดในเชิงบวก เกี่ยวกับความสัมพันธ์ระหว่างมนุษย์กับสรรพชีวิตแวดล้อมใน 
  ธรรมชาติ ซึ่งมีความเกี่ยวโยงและเอื้ออิงกันอยู่อย่างลึกซึ้งดุจดั่งห่วง โซ่แห่งชีวิต ในนิทรรศการ "ความสัมพันธ์แห่งชีวิต" 
  </div>