How can i do this in HTML/CSS

I am completely new to web design and I just cant seem to accomplish what is in the picture below. Even if you could tell me what this layout is开发者_StackOverflow社区 called so I could google for suggestions it would be great

Thanks in advance

Well, you could start with a container div. Then add in a 'box' div with a set width. if you float those divs to the left they will align as such in the container. Then you can add the framework for the items inside the boxes.

#container {
    width:500px;
    background-color:#CCC;
}
.box {
    width:50%;
    float:left;
    min-height:120px;
}
.boximg {
    // this is your icon for each box
    width:20px;
    float:left;
    display:inline;
}
.boxtitle {
    font-weight:bold;
    float:left;
    display:inline;
}

Then your HTML:

<div id="container">
    <div class="box">
        <div class="boximg"><img src=""/></div>
        <span class="boxtitle">Here is your box title</span>
        <p>Your box text here</p>
    </div>
    <!-- add more boxes here -->
</div>

This is just a general hint. For nice grid based designs, you can google for css frameworks.

Here are some sample pages:

• http://www.blueprintcss.org/tests/parts/sample.html
• http://elasticss.com/demos/Examples_Columns.html
• http://960.gs/demo_24_col.html

It's the Leverage theme from ThemeTrust.