Question

I just want to make some HTML page with this layout.

How could I accomplish it with HTMLs div and CSS only, tableless.

There is a search box, hot products and an ad box.

Answer 1

Set it using floats and a width of 960px;

You can adjust it to fit accordingly.

HTML:

<div id="area-wrap">
    <div id="hot-product">Hot Product<br />Goes<br />Here</div>
    <div id="search-box">Search Box</div>
    <div id="advertisements">Advertisements</div> 
</div>

CSS:

#area-wrap {
    width:960px;
}

#search-box {
    float:left;
    background:red;
    width:450px;
    margin-left:20px;
    margin-right:20px;
    color:#fff;
    margin-bottom:20px;
}

#advertisements {
    float:left;
  background:blue;  
    width:450px;
    margin-left:20px;
    margin-right:20px;
    color:#fff;
}

#hot-product {
    float:right;
    background:green;
    width:450px;
    margin-right:20px;
    color:#fff;
}

Here’s the JSFiddle: http://jsfiddle.net/82QnL/1/ <— Live Demo

Hope this helps!!!