# Simples HTML-Gerüst responsive aufbauen



## r0b (27. November 2013)

Hallo zusammen,

es will mir gerade einfach nicht gelingen ein simples HTML-Konstrukt aufzubauen, bei dem der Inhalt responsive ist, die beiden Boxen – die den Inhalt links und rechts umgeben – jedoch fix sind.


```
<div id="links">fix</div>
<div id="inhalt">responsive</div>
<div id="rechts">fix</div>
```

Die drei Boxen sollen dabei also nebeneinander stehen. Je weiter ich den Browser auf oder zu ziehe, desto breiter soll dann die Box "Inhalt" werden.


```
#links {
width: 200px;
float: left;
}

#inhalt {
width: auto;
float: left;
}

#rechts {
width: 200px;
float: left;
}
```

Der Aufbau an sich scheint simpel, doch wie sage ich "Inhalt", dass es responsive ist und gleichzeitig den beiden Boxen links und rechts, dass sie nicht umbrechen?

Freue mich auf jede Hilfe!

Viele Grüße


----------



## Jan-Frederik Stieler (28. November 2013)

Hi,
willst du das responsive oder fluide haben?
Ein Wrapper würde helfen. Diesem kannst du eine max-width geben und oder dann per Media-Queries anpassen. Alle darin enthaltene Inhalte sollten relative Größenangaben enthalten.

Grüße


----------



## r0b (28. November 2013)

Jan-Frederik Stieler hat gesagt.:


> Hi,
> willst du das responsive oder fluide haben?
> Ein Wrapper würde helfen. Diesem kannst du eine max-width geben und oder dann per Media-Queries anpassen. Alle darin enthaltene Inhalte sollten relative Größenangaben enthalten.
> 
> Grüße



Hallo Jan,

vielen Dank für Deinen Hinweis. Das Problem dabei wären dann, wie Du schon sagtest, die relativen Größen. Die Boxen links und rechts müssen bei mir jedoch fix in ihrer Breite sein. Lediglich der Container dazwischen, also der Inhalt, soll flexibel werden.

Grüße
Robin


----------



## hela (28. November 2013)

Hallo,

hier gibt es ein entsprechendes Template:
http://www.intensivstation.ch/asset...1/intensivstation-html5-float-template-1.html


----------



## r0b (29. November 2013)

Es hat funktioniert. Ich hatte meinem Inhalt-Container dummerweise ein "float: left;" mit auf den Weg gegeben, was die Operation ein wenig hinauszögerte.

Vielen Dank für den Link.


----------

