CODEWITHSUNDEEP
htmlcsslayout
Shane121
Shane121

Reputation: 443

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 called so I could google for suggestions it would be great

Thanks in advance alt text

Upvotes: 0

Views: 97

Answers (3)

Paul Beusterien
Paul Beusterien

Reputation: 29582

It's the Leverage theme from ThemeTrust.

Upvotes: 0

mitch
mitch

Reputation: 995

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>

Upvotes: 5

miku
miku

Reputation: 188174

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

Here are some sample pages:

Upvotes: 1

Related Questions