Responsive Webdesign 3 Spalten - Mix aus % und PX

[Auge]

Hallo

Ich brauche ein 3 Spalten-Layout

<div class="wrapper">
    <div class="menu">ddd</div>
    <div class="content">dddd</div>
    <div class="sidebar">ddd</div>
</div>

  
Schau dich mal [bei den neuen Elementen von HTML5](http://blog.selfhtml.org/2013/03/10/html5-serie-neue-elemente-fuer-die-seitenstruktur/) um. Ich wette, da gibt es passenderes als die LOeercontainer (div). Fragen dazu bitte hier anhängen.  
  

> Allerdings sollte MENU und SIDEBAR eine feste Breite haben und wenn der Browser sich nun "verkleinert" (Responsive Webdesign) sollte MIDDLE sich bis zum ersten MEDIA QUERIE verkleiner, prozentual.  
>   
> Kann mir dabei jemand helfen?  
  
Dazu kannst du [calc](http://docs.webplatform.org/wiki/css/functions/calc) verwenden. Die [Browserunterstützung ist ausreichend](http://caniuse.com/calc).  
  

> ~~~css
  

> .menu {  
>   float: left;  
>   padding: 10px;  
>   width: 190px;  
> }  
> .content {  
>   float: left;  
>   margin: 0 0 0 10px;  
>   padding: 10px;  
>   width: calc(100% - 10px - 20px - 190px - 20px - 290px -10px -20px);  

/* width.content - margin-left.content - padding.content - width.menu - padding.menu - width.sidebar - margin-left.sidebar - paddingt.sidebar */  

> }  
> .sidebar {  
>   float: left;  
>   padding: 10px;  
>   margin-left: 10px;  
>   width: 290px;  
> }  
> 

Wenn du noch Breiten für border angäbst und diese auch bei calc berücksichtigtest, bekämst du ein e pixelgenau passende Breite hin (etwaige Rundungsfehler einzelner Browser ausgenommen).

Wird eine zu bestimmende Breite unterschritten, solltest du mit Media Queries für ein anderes, dann passenderes Layout sorgen.

Tschö, Auge