Nhờ mọi người giúp mình đoạn Code để tạo đường kẻ dọc trong HTML

Không biết tại sao không thể chèn ảnh vào bài viết bên trên.

Mình bổ sung thêm hình ảnh nhé:

Sao mình không đăng được ảnh nên vậy các bạn

úp ảnh qua host khác xem, nhớ cấu trúc cặp thẻ chèn ảnh [ img] link ảnh [ / img] (không có dấu cách)

Đây bạn ơi, bạn vào link này xem giúp mình với:

Code:

http://laptrinh.vn/d/9355-nho-moi-nguoi-tao-giup-minh-duong-ke-doc-nhu-hinh-duoi-day.html

sao ko upanh len web chia sẻ mà lại attack lên web kia. muốn xem full bắt login

chia theo hình khối thì trong ảnh chia làm 2 khối trái và phải
vậy thỉ thêm vào class or style thông số bord
nếu cột trái thì border-right: 1px dashed #D3D3D3;
còn nếu cột phải thì thay right = left

Cảm ơn Rajnlove nhiều , mình sẽ thử xem sao

Bạn Ranjlove ơi, không được bạn à, bạn hiểu nhầm ý của mình rồi. Mình cần câu lệnh sao để : có thể tùy chọn được độ dài của đường kẻ dọc ấy ( tức là muốn nó dài bao nhiêu thì tùy ý đó bạn ).

Bạn xem giúp mình với nhé

cái bảng đó bạn dùng table hay div

ý bạn là như thế này ?

nếu vậy bạn tham khảo code bên dưới mình làm qua qua thôi

HTML:

<div class="wrapper">
        <div class="header">logo banner </div>
       
        <div class="content">
        <div class="left">TT - de mo canh cua tin tuc asdasdasdasdasdasd</div>
        <div class="right">
        <h4>Tin Tức</h4>
        <p>de mo canh cua tin tucde mo canh cua tin tucde mo canh cua tin tucde mo canh cua tin tucde mo canh cua tin tucde mo canh cua tin tuc</p>
        </div>
        <div class="cl"></div>
</div>

        <div class="footer">Copyright © 2016 </div>
    </div>
    <Style>
    .wrapper {
    background: white;
    color: #4e5665;
    margin-bottom: 10px;
    border: 1px solid blue;
    border-radius: 3px;
}
.header{    background: blue;color:white;
    font-weight: 500;
    padding: 10px;
    border-bottom: 1px solid blue;text-align: center;
    font-weight: bold;
   }
   .content {background: white;    color: #565656;}
   .left{float:left;    border-right: 1px solid blue;
    height: 150px;
    width: 30%;}
   .right{float:right;width: 69%;}
   .cl{clear: both;}
    .footer{
        background: blue;color:white;
    font-weight: 500;
    padding: 10px;
    border-top: 1px solid blue;text-align: center;
    font-weight: bold;
    }
    <Style>

Cảm ơn Rajnlove đã nhiệt tình giúp đỡ nhưng vẫn chưa đúng với ý mình mong muốn. Mình xin trình bày cụ thể thế này cho bạn hiểu:
Đầu tiên mình tạo 1 thẻ Div lớn, sau đó trong Div lớn đó mình tạo ra 3 thẻ Div con là:
+ Div top : Dùng để tạo phần khung màu xanh ở trên.
+Div body: Phần trắng ở phía giữa
+Div bottom: Dùng để tạo phần khung màu xanh ở phái dưới.

Sau đó trong Div body mình lại chia ra làm 2 Div nhỏ là:
- Div left: phía bên trái
- Div right: nằm phía bên phải

thành 2 mục ghi tin tức khác nhàu như trong hình bạn thấy rồi đó. Bình thường thì mình cũng biết tạo đường phân cách giữa 2 phần này bằng cách viết thẻ Boder, nhưng như vậy thì đường kẻ sẽ kéo dài từ trên xuống dưới mà như trong hình của mình gửi lên thì nó chỉ vượt quá dòng W3 ... một chút thôi chứ khong phải kéo tận xuống dưới .
Bạn xem kĩ lại cái hình nha.:

Code:

https://i.imgur.com/8lC8Z0A.png

Bạn giúp mình với nhé !

neu vậy thì bạn thên thẻ pading vào nữa là tự động nó sẽ căn khoảng cách ra mà ?

anhtuan1006 bạn chỉ cần dữ nguyên code củ và thêm thuộc tính
height: chiều dài bạn muốn;
overflow: hidden;
là ok nhé bạn

Mình gửi Code lên các bạn chèn thêm vào giúp mình với nghen:

HTML:

<style type="text/css" media="all">
  #top{
     height:50px; width:800px;
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
     color:#FFF;
     font-size:36px;
     text-align:center;
     background-color:#009;

     }
  #main{
     height:200px; width:800px;
     }
         #left{
             height:200px; width:165px;
              text-align:justify;
             float:left;
             padding-left:15px; padding-right:20px;
             height:150px;
             overflow:hidden;
             }
         #right{
             height:200px; width:581px;
             float:left;
             padding-left:15px;
             
             }
 #bottom{
     height:50px; width:800px;
     text-align:center;
     color:#FFF; font-weight:300;
     line-height:50px;
     background-color:#009;
   

    }
</style>
</head>

<body>

    <div style="height:300px; width:800px; border:solid thin #00F">
       
        <div id="top">Tin hot nhất trong ngày</div>
       
        <div id="main">
         
              <div id="left">
                <p>TT - Để mở cánh cửa thép dày cộp dẫn vào tầng hầm chi nhánh ngân hàng Sociestes tại thành phố Nice(Pháp), hai chiếc chìa khóa phải được tra vào hai ổ khóa đặt ở những vị trí khác nhau. Sicieste đã rất tự hào về ...</p>
              </div>
             
              <div id="right">
                <p><span style="font-size:24px; font-weight:800">Tin tức</span></br>
                TT - Ngày 7-4, UBND huyện Đức Trọng (Lâm Đồng) cho biết đã ra quyết định kỷ luật cảnh cáo đối với hai trường công an xã Đa Quyn và Tà Năng vì thiếu tinh thần trách nhiệm trong công tác quản lý.</br></br>
                W3School - The Largest Web Developer Site On The Next !</p>
              </div>
           
        </div>
       
        <div id="bottom">Copy Right</div>
    </div>
   
</body>
</html>

Bạn Rajnlove, bạn VietCine.Com ơi lại giúp mình với ....mình vẫn chưa làm được

mình thấy ổn theo ý bạn rồi mà nhỉ ?

Rajnlove ơi, như hình bạn gửi lên thì có giống với của mình đâu bạn, bạn đã xem kỹ cái ảnh mình gửi ở link của bài #11 chưa ?

thì nó đã căn giữa và kéo dài theo khung ? . @@!

Muốn độ dài như ý thì set height cho nó là xong.

Code:

<html>
<head>
<style type="text/css" media="all">
#top {
    height:50px;
    width:800px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color:#FFF; font-size:36px; text-align:center; background-color:#009;
}
    #main{
    height:200px;
    width:800px; }

#left {
    height: 250px;
    width: 165px;
    text-align: justify;
    float: left;
    padding-left: 15px;
    padding-right: 20px;
    overflow: hidden;
}
#right{
    width: 581px;
    float: left;
    padding-left: 15px;
    border-left: 1px solid;
}
#bottom{
    height:50px;
    width:800px;
    text-align:center;
    color:#FFF; font-weight:300;
    line-height:50px;
    background-color:#009;
} </style>
</head>
<body>
<div style="height:300px; width:800px; border:solid thin #00F">
<div id="top">Tin hot nhất trong ngày</div>
<div id="main">
<div id="left">
<p>TT - Để mở cánh cửa thép dày cộp dẫn vào tầng hầm chi nhánh ngân hàng Sociestes tại thành phố Nice(Pháp), hai chiếc chìa khóa phải được tra vào hai ổ khóa đặt ở những vị trí khác nhau. Sicieste đã rất tự hào về ...</p>
</div>
<div id="right">
<p><span style="font-size:24px; font-weight:800">Tin tức</span></br> TT - Ngày 7-4, UBND huyện Đức Trọng (Lâm Đồng) cho biết đã ra quyết định kỷ luật cảnh cáo đối với hai trường công an xã Đa Quyn và Tà Năng vì thiếu tinh thần trách nhiệm trong công tác quản lý.</br></br> W3School - The Largest Web Developer Site On The Next !</p>
</div>
</div>
<div id="bottom">Copy Right</div>
</div>
</body>
</html>