div,container от 3 картинки как да го направя

[pLe0mAx]

Значи въпроса ми е за див/кутийка с информация как да я направя. Искам да е от 3 картинки (както съм ги изрязал). Едната от горе, една от долу и другата по средата , която да се разтяга по 'y' спрямо информацията. Пробвах, но не успях и реших да питам...

 

[g3tcrunk]

html

<div id="top"></div>
       <div id="center">
          информация
       </div>
<div id="bottom"></div>

css

#top {
width:   px;
height:  px;
background: url(top.jpg) no-repeat;
}
#center {
width:  px;
height: px;
background: url(center.jpg) repeat-y;
}
#bottom{
width:   px;
height:  px;
background: url(bottom.jpg) no-repeat;
}

Остава само да си зададеш пътя до картинките и да им зададеш размерите, и да ги позиционираш.
Това е!

 

[pLe0mAx]

А ще може ли някакви насоки за подреждането на дивовете или сайт (по възможност на бг). Че аз се опитвам с маргин и паддинг да ги настроя но не става...излиза различно под браузърите. И как точно да използвам 'clear' и 'float'. Благодаря предварително на този който отговори...знам, че досаждам

 

[g3tcrunk]

По лесно ще стане ако ни дадеш кода каде до сега си писал, и да уточниш какви бъгове имаш.

 

[pLe0mAx]

body
 {

    background: url('images/1.gif') ;
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-color: #000000;
    color: #e53333;  
    

 } 


div.menu
 {
    float:left;
    width:350px;
    height:600px;
    background-image: url('images/m_p.gif') ;   
    background-position: right;
    background-repeat:no-repeat;
    
 }


#menu
 {
    float: left;
        
    margin-left:30px;
    font-size:40px;
    
 }

li
{
    font-family:Pristina;
    list-style: url('images/li_icon.gif');
}

a:link {text-decoration:none; color:#e53333}
a:visited {text-decoration:none; color:#e53333}
a:hover {text-decoration:underline; color:#e53333}
a:active {text-decoration:underline; color:#e53333}



 #top
{
    
    width:631px;
    height:21px;
    background: url('images/c_t.gif') no-repeat;
    margin-left:360px;
    margin-top:50px;
}
#center
 {
    width:631px;
    background: url('images/c_m.gif') repeat-y;
    margin-left:360px;
    font-family: Tahoma;
    font-size:16px;
}
#bottom
{
    
    width:631px;
    height:32px;
    background: url('images/c_b.gif') no-repeat;
    margin-left:360px;
    
    
    
}

#logo
{
    width:157px;
    height:69px;
    background: url('images/company.gif') no-repeat;
    margin-top:300px;
    margin-left:20px;
}


#mark
{
    float:right;
    background: url('images/mark.gif') no-repeat;
    width:120px;
    height:178px;    
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> Wine Company </title>

<link rel="stylesheet" href="http://localhost/style.css" type="text/css" />
</head>


<body>
    <div>
    <div class="menu">
    <div id="menu">        
    <ul>    
    <li><a href="">Home</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Gallery</a></li>
    <li><a href="">Contact</a></li>
    </ul>
    </div>    
    </div>

    <div id="top"></div>
    <div id="center">
        aaaaaaaa<br>a<br>a<br>a<br>aa<br>a<br>aa<br>a<br>aa<br>a<br>aa<br>a<br>aa<br>a<br>aa<br>a<br>aa<br>a<br>a
        <div id="mark"></div>
    </div>
    
    <div id="bottom"></div>    
        

<div id="logo"></div>
</div>

</body>
</html>

Под мозила:


А под ИЕ, тази червената четка е в кутийката, но кутийката е под менюто в дясно.

Проблема мисля, че идва от това с маргина, като се опитвам да настроя дивовете да не са един в/у друг. За това питах конкретно за флоат и клеар