Div in HTML nicht schwebend links mit CSS

Mein div mit dem Klassennamen 'header-body-right' scheint nicht links von meinem div 'header-body-center' zu schweben und ich kann es nicht verstehen warum, hier ist mein HTML,Div in HTML nicht schwebend links mit CSS

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
    <TITLE> </TITLE> 
    <meta charset="UTF-8" /> 
    <link href="main.css" rel="stylesheet" type="text/css"> 
    <META NAME="Generator" CONTENT="Notepad"> 
    <META NAME="Author"  CONTENT="00"> 
    <META NAME="KEYWORDS"  CONTENT="" /> 
    <META NAME="DESCRIPTION" CONTENT="" /> 
</HEAD> 

<BODY> 

    <div class="header-top"> 

    </div> 

    <div class="header-body"> 

     <div class="header-body-centre"> 
      <div class="logo"> 
      <img src="logo.png" /> 
      </div> 
     </div> 

     <div class="header-body-right"> 
      test 
     </div> 

    </div> 



    <div class="navbar"> 

    </div> 

    <div class="content-container"> 

    </div> 
</BODY> 

</HTML>

die CSS ich für den Code verwende wird unten geschrieben,

body 
{ 
    margin:0px; 
    padding:0px; 
} 

.header-top 
{ 
    height:11px; 
    width:100%; 
    background-image: url('HeaderTopNav.png'); 
    background-repeat: repeat-x; 
} 
.header-body 
{ 
    width:100%; 
    height:100px; 
} 
.header-body-centre 
{ 
    margin: 0 auto; 
    height:100%; 
    width:70%; 
} 

.header-body-right 
{ 
    width:15%; 
    height:100px; 
     float:left; 

} 

.navbar 
{ 
    height:35px; 
    width:auto; 
    border: 1px solid green; 
} 
.logo 
{ 
    margin-top:35px; 
    float:left; 
} 

.quickNav 
{ 
    float:right; 

} 

.container 
{ 
    margin: 0 auto; 
    background-color: #fff; 
    border: 2px solid #c9c8c8; 
    border-bottom: none; 
    height:auto; 
    overflow:hidden; 
    width: 1000px; 
    clear:both; 
}

Kann jemand sehen, warum? Ich habe versucht, das Header-Bosy-Center zu schweben und die Breite des Header-Body-Right zu reduzieren, aber nichts funktioniert. Kann jemand sehen, was ich falsch gemacht habe? Ich habe keine Ideen mehr. Vielen Dank.

Quelle

2012-04-07 rusty009

Um die Elemente nebeneinander zu haben, müssen Sie beide Elemente schweben lassen. Diese CSS Floats. Kopf-Körper-Center links auch, so dass die Elemente nebeneinander erscheinen.

.header-body-centre 
{ 
    margin: 0 auto; 
    height:100%; 
    width:70%; 
    float: left; 
}

Ihr früheres Styling funktionierte nicht, weil floated Elemente sich verhalten. Wenn ein Element schwebt, wird es aus dem normalen Dokumentfluss entfernt. Es wird nach links oder rechts verschoben, bis es den Rand der Box oder eines anderen schwebenden Elements berührt.

https://developer.mozilla.org/en/CSS/float

Quelle

2012-04-07 17:18:42

brillant, danke. Aber jetzt, wo ich das mache, zentriert das Div nicht. Gibt es einen Weg um dies oder muss ich ein anderes div mit Breite 15% links von Header-Body-Center? – rusty009

wrap header-body-center in einem neuen div mit einer Breite von ca. 85% (muss möglicherweise angepasst werden, wenn Inhalt in die nächste Zeile übergeht). Style das neue div mit margin: 0 auto; –

@ rusty009 hat das funktioniert? –

Hier gehen Sie Geck: http://jsfiddle.net/YpAN8/1/

.header-body-centre 
{ 
    height:100%; 
    width:70%; 
    float:left; 
    margin-left:15%; 
    background-color: yellow; /* remove this */ 
    margin-left: 
} 

.header-body-right 
{ 
    width:15%; 
    height:100px; 
    float:left; 
    background-color: red; /* remove this */ 

}

Quelle

2014-01-23 10:59:23

Div in HTML nicht schwebend links mit CSS

Antwort

Verwandte Themen