i want to design these 2 boxes using css[image]?

i want to create this effe开发者_Python百科ct using css, can you see the big box with the title and the blog post, and little box with the date on it and the number of comments on it. its been puzzling me, an example would be great thanks guys :))

---

In the HTML just create two separate divs, one for the details and the other for the content.

<div class="post">
    <div class="post_details">
        <div class="post_date">
            <div class="post_day">26</div>
            <div class="post_month">NOV/10</div>
        </div>
        <div class="post_comments">2</div>
    </div>
    <div class="post_text">
        <div class="post_title">PASSION SUCCESS AND MONEY</div>
        <div class="post_title">A lot of people...</div>
    </div>
</div>

With the CSS you could float them both left or absolute position the details box off to the side.

.post         { clear:both; width:600px; }
.post_details { float:left; width:53px; height:93px; background:#fff; }
.post_date    { width:48px; background:#ddd; }
.post_month   { width:48px; background:#666; }
.post_text    { float:left; width:545px; background:#fff; }

---

its pretty easy with some css3:

http://jsfiddle.net/meo/J9SjQ/

---

don't quite understand what's so puzzleling but if it's how the divs are arranged there's 100 ways it could be done one way would be something like

http://img715.imageshack.us/img715/1650/exampleai.png

if it's about how to get rounded corners it would be like jakub mentioned here is a sample

http://www.jsfiddle.net/KKpPQ/3/

---

The main trick would be in using the CSS3 border-radius property. That makes the boxes round. You'll have to use vendor prefixes to get this working in current browsers:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;