divs problèmes avec la position dans l'en-tête et principal

Question

J'ai une page avec 3 div parents, maintenant im ayant des problèmes de positionnement des divs à l'intérieur de la div en-tête. mon code est quelque chose comme ceci:

mise en page de divs:

<div id="layout"> 
    <div id="header" class="body"> 
     header 
     <div id="logo">logo</div> 
     <div id="menu">menu</div> 
    </div> 
    <div id="main"> 
     <div id="left">left</div> 
     <div id="right">right</div> 
     <div id="body">body</div> 
     <div id="clear"></div> 
    </div> 
    <div id="footer">footer</div> 
</div> 

css est quelque chose comme ceci:

.body { 
background-color: #ffffff; 
margin: 0px; 
background-repeat: repeat-x; 
background-image: url(imgs/back.png); 
} 

#layout { 
margin:auto; 
width: 1024px; 
background-color: #ffffff; 
} 

#main { 
    background-color: #ffffff; 
} 

#header { 
background-color:#0F0; 
height: 300px; 
} 

#body { 
margin-left: 180px; 
margin-right: 180px; 
padding: 5px; 
background-color: #ffffff; 
} 

#footer { 
margin-left: 180px; 
margin-right: 180px; 
padding: 0px; 
background-color: #ffffff; 
} 

#right { 
float: right; 
width: 180px; 
padding: 0px; 
margin: 0px; 
right: 0px; 
    background-color: #ffffff; 
} 

#left { 
float: left; 
width: 180px; 
padding: 0px; 
margin: 0px; 
left: 0px; 
background-color: #ffffff; 
} 

#clear { 
    clear:both; 
} 

je veux mettre dans une position de div d'en-tête (par exemple vertical: centre , horizontal: 0 px (0 pixel de l'en-tête div non de la page totale) sur le côté gauche) et menu dans une autre position (par exemple vertial: haut, horizontal: entre le centre et le côté droit (centre et à nouveau)

J'apprécierais une solution.

grâce à tous.

Answer 1

Je pourrais être plus utile si vous pouviez clarifier votre question.

Je ne suis pas sûr de ce que vous demandez en termes d'emplacement pour l'en-tête.

Voici une approche pour déplacer le menu entre la colonne centrale et la colonne droite. Nest le menu et la colonne de droite dans un autre div aligné à droite. Pour les besoins de l'exemple, je l'ai appelé right-container.

Voici le code HTML

<div id="layout"> 
    <div id="header" class="body"> 
     header 
     <div id="logo">logo</div> 
    </div> 
    <div id="main"> 
     <div id="left">left</div> 
     <div id="right-container"> 
      <div id="menu">menu</div> 
      <div id="right">right</div> 
     </div> 
     <div id="body">body</div> 
     <div id="clear"></div> 
    </div> 
    <div id="footer">footer</div> 
</div>​ 

Et voici les déclarations css I ajouté:

#right-container { 
float: right; 
width: 360px; 
padding: 0px; 
margin: 0px; 
right: 0px; 
    background-color: #ffffff; 
} 

#menu { 
float: left; 
width: 180px; 
padding: 0px; 
margin: 0px; 
left: 0px; 
background-color: #ffffff; 
} 

Vous pouvez voir le violon ici:

http://jsfiddle.net/SkLvX/