1 คอลัมน์ เลย์เอ้าท์ พร้อมแทรกภาพ

การเขียนเว็บ แบบจัดให้อยู่ตรงกลาง 1 คอลัมน์ ไม่มีอะไรมากครับ แค่กำหนดความกว้างให้กับ div แล้วสั่ง margin: 0 auto; ก็สามารถทำได้เลย

/*1.กำหนดภาพรวมของหน้าเว็บให้กับ body ของ html*/
body {
margin: 0 auto;
padding: 0;
background-color:#cccccc;
font-family: Tahoma, Verdana, sans-serif;
font-size: 0.8em;
color: #003399;
}

/*2. สร้าง div tag ขึ้นมาเพื่อใส่ข้อมูลที่เราต้องการ */


#one_c {
width: 794px;
position: relative;
float: none;
margin: 0 auto;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding: 0 4px;
background-color: #FFFFFF;

/*เพิ่มเติมเข้ามา เพื่อป้องกันรูปภาพหลุด box ตัวนี้จะไม่มีผลกับ IE แต่ถ้าไม่ใส่่ จะมีปัญหากับ FF และ Opera*/

display: table;
}

/*คุมคุมการแสดงผล ของ รูปภาพใน ID one_c*/

#one_c img {
margin: 3px 3px;
/*สั่งจัด ชิดซ้าย หรือขวา ชิดซ้าย float: left; ขวา float: right;*/
float: right;
padding: 0;
border: solid 4px #ff9900;
}

ตัวอย่าง การเขียน 1 คอลัมน์ เลย์เอ้าท์ พร้อมแทรกภาพ