• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Float nur auf/in einem DIV anwenden möglich?

D

Dennis1993

Neues Mitglied
Hallo Leute,

ich habe mir eine Page gebaut, die folgenden Aufbau hat:

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,body
{
    margin:0;
    padding:0;
    font-family:Arial;
    font-size:12px;
}

div#header
{
    height:60px;
    background:#C33;
}

div#leiste
{
    height:30px;
    background:#C90;
}

div#navi
{
    float:left;
    width:200px;
    background:#F9C;
}

div#inhalt
{
    background:#6CF;
    margin-left:200px;
    padding:10px;
}
</style>
</head>

<body>

<div id="header">Hier der Kopfbereich mit einer Höhe von 60px</div>
<div id="leiste">Leiste mit kleinen Navigationspunkten</div>

<div id="navi">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
        <li><a href="#">Link 8</a></li>
        <li><a href="#">Link 9</a></li>
        <li><a href="#">Link 10</a></li>
    </ul>
</div>

<div id="inhalt">
    <p>Hier steht der Inhalt drin mit Rest der Breite. Problem ist nun, wenn ich hier etwas drin floate und danach wieder clearen muss. Dann springt alles unter die Navigation...</p>
    <span style="float:right;">gefloatetes Elemente</span>
    <div style="clear:both;"></div>
    <p>Dieser Text hier ist nun zu tief, nämlich unter der Navigation, da er auch die linke Navi gecleart hat und das soll nicht sein....</p>
</div>

</body>
</html>

Der Aufbau ist so haargenau wie ich es mir wünsche. Möchte links eine Navigation von 200px Breite haben und rechts daneben den Inhalt mit der restlichen Breite. Floate ich jetzt ein Elemente im DIV "inhalt", muss ich irgendwann auch clearen, damit ich wieder weiterschreiben kann, doch dann cleart er mir auch die linke Navigation mit und er fängt dann viel zu tief an.

Habe auch noch einen Screenshot dazu angehangen. Hat dort jemand eine Idee, wie ich das in den Griff bekommen kann?

Vielen Dank im Voraus!
 

Anhänge

  • Unbenannt-1.jpg
    Unbenannt-1.jpg
    97,7 KB · Aufrufe: 6
Wie warum genau cleareren?
In deinem gezeigten Fall passt das zufällig. Wenn ich aber mal keinen Text darunter setze oder weiter floaten will, funktioniert das nicht mehr. Der Hintergrund ist dann völliger Murks. :)

Hier ein Bild:
 

Anhänge

  • Unbenannt-1.jpg
    Unbenannt-1.jpg
    113,4 KB · Aufrufe: 3
Musst du anders machen.

- bei #navi die width in Pixel löschen
- bei #inhalt das margin-left löschen und box-sizing: border-box für das padding hinzu.
- #navi und #inhalt erhalten beide float: left und jeweils eine width in %, die zusammengerechnet 100 ergibt.
 
Hey Tronjer,

danke für die Antwort. An sich funktioniert das tatsächlich, bis auf das Padding beim DIV "inhalt". Das konnte ich aber mit einem weiteren DIV lösen, also ist da doch alles in Butter.

Gibt es auch eine Möglichkeit der linken Navigation eine feste Breite zu geben?
Meine Anwendung wird auf verschieden großen Monitoren angezeigt und ist bei meinen Tests gerade eben auf FullHD viel zu breit und auf kleine Monitoren passt die Navigation nicht mehr richtig rein und steht über. Wenn das auch noch geht, wäre mein Problem ja gelöst :)
Auch der Hintergrund passt dann nicht mehr. Da man den DIVs ja keine 100% Height geben kann, habe ich die Navigation mit einem Hintergrundbild bestückt. Das passt natürlich nur, wenn die Navigation immer eine feste Breite hat :)

Ihr Profis habt doch bestimmt auch dafür eine Lösung oder?

Danke nochmals für die Hilfe!
 
Du kannst es auch kombinieren à la #navi{width: 120px}, #inhalt{width: calc(100% - 120px)}, und das zusätzliche Div ist beim Einsatz von border-box unnötig.

Dei eigentlicher Fehler war, dass du das float: left bei #inhalt vergessen hattest.
 
Tronjer schrieb:
Du kannst es auch kombinieren à la #navi{width: 120px}, #inhalt{width: calc(100% - 120px)}, und das zusätzliche Div ist beim Einsatz von border-box unnötig.

Dei eigentlicher Fehler war, dass du das float: left bei #inhalt vergessen hattest.
Zum Vergrößern anklicken....
Hey,

das mit dem calc() kannte ich noch gar nicht, coole Sache. Das funktioniert wunderbar. Aber padding kriege ich nicht hin, da addiert er mir immer das Padding zur eigentlichen Breite und rutscht dann runter. Hier mal mein Code:

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,body
{
   margin:0;
   padding:0;
   font-family:Arial;
   font-size:12px;
}

div#header
{
   height:60px;
   background:#C33;
}

div#leiste
{
   height:30px;
   background:#C90;
}

div#navi
{
   float:left;
   width:200px;
   background:#F9C;
}

div#inhalt
{
   float:left;
   width:calc(100% - 200px);
   background:#6CF;
   box-sizing:border-box;
   padding:10px;
}
</style>
</head>

<body>

<div id="header">Hier der Kopfbereich mit einer Höhe von 60px</div>
<div id="leiste">Leiste mit kleinen Navigationspunkten</div>

<div id="navi">
   <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
     <li><a href="#">Link 5</a></li>
     <li><a href="#">Link 6</a></li>
     <li><a href="#">Link 7</a></li>
     <li><a href="#">Link 8</a></li>
     <li><a href="#">Link 9</a></li>
     <li><a href="#">Link 10</a></li>
   </ul>
</div>

<div id="inhalt">
   <p>Hier steht der Inhalt drin mit Rest der Breite. Problem ist nun, wenn ich hier etwas drin floate und danach wieder clearen muss. Dann springt alles unter die Navigation...</p>
   <span style="float:right;">gefloatetes Elemente</span>
   <div style="clear:both;"></div>
   <p>Dieser Text hier ist nun zu tief, nämlich unter der Navigation, da er auch die linke Navi gecleart hat und das soll nicht sein....</p>
</div>

</body>
</html>

Ist doch genau so wie du es meinst, oder? Aussehen tut es dann so:
 

Anhänge

  • Unbenannt-1.jpg
    Unbenannt-1.jpg
    84,6 KB · Aufrufe: 1
Hinsichtlich box-sizing musst du die vendor prefixes für einzelne Browser berücksichtigen. Bei Firefox wäre das z.B. -moz-box-sizing.
 
Kleiner Tipp am Rande im html 5 kannst einfach den <nav> Tag benutzen dann brauchst du deine #navi nicht ;)
Lg
Freshmojojo
 
Tronjer schrieb:
Hinsichtlich box-sizing musst du die vendor prefixes für einzelne Browser berücksichtigen. Bei Firefox wäre das z.B. -moz-box-sizing.
Zum Vergrößern anklicken....
Ach, da hätte ich auch selber drauf kommen können. Jetzt klappt es, danke!

Freshmojojo schrieb:
Kleiner Tipp am Rande im html 5 kannst einfach den <nav> Tag benutzen dann brauchst du deine #navi nicht ;)
Lg
Freshmojojo
Zum Vergrößern anklicken....
Jo, ich weiß. Werde ich auch noch berücksichtigen. Danke für den Hinweis, ihr habt mir sehr weitergeholfen!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben