CSS DIV in DIV

Ich beginne gerade mit HTML/CSS und ich versuche, eine eigene Website zu schreiben. Ich möchte jedoch einen Header, ein Hauptinhaltsdiv und eine Fußzeile haben. Innerhalb des Hauptinhalts div möchte ich eine linke und eine rechte Leiste platzieren, aber leider ist die linke Leiste IMMER außerhalb der div ... was mache ich falsch?CSS DIV in DIV

Hier ist meine CSS:

body { 
 
    background-color: black; 
 
} 
 
p { 
 
    color: white; 
 
} 
 
#header { 
 
    background-color: grey; 
 
    margin-left: 100px; 
 
    margin-right: 100px; 
 
    border-radius: 5px; 
 
    text-align: centaer; 
 
    /*change later*/ 
 
} 
 
#content { 
 
    background-color: green; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    margin-left: 100px; 
 
    margin-right: 100px; 
 
    border-radius: 5px; 
 
    padding: 50px; 
 
} 
 
#leftBar { 
 
    background-color: orange; 
 
    left: 20px; 
 
    right: 20px; 
 
    top: 20px; 
 
    float: left; 
 
    color: white; 
 
    width: 20%; 
 
    height: 60%; 
 
    display: block; 
 
} 
 
#footer { 
 
    background-color: gray; 
 
    margin-bottom: 20px; 
 
    margin-top: 20px; 
 
    margin-right: 100px; 
 
    margin-left: 100px; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    /*change later*/ 
 
}

Here is my HTML 
 

 
<html> 
 

 
<head> 
 
    <title>Titel</title> 
 
    <link rel="stylesheet" type="text/css" href="FirstpageCSS/mainstyle.css" /> 
 
</head> 
 

 
<body> 
 
    <p>Formatierter Inhalt</p> 
 

 
    <div id="header">HEADER</div> 
 
    <div id="content">this is going to be the content 
 

 

 

 
    <p>lol</p> 
 
    </div> 
 

 
    <div id="leftBar">contentntntntntnntnt</div> 
 

 
    <div id="footer">FOOTER</div </body> 
 

 
</html>

Was mache ich falsch? Ich weiß, es ist etwas über die Positionierung, aber ich werde immer damit verwirrt ...

Ich schätze jede Hilfe als Neuling.

Quelle

2016-07-26 kendrickLamar

'# leftBar' ist außerhalb von' # content' in Ihrem HTML-Code. Beachten Sie auch, dass ['float'] (https://developer.mozilla.org/en-US/docs/Web/CSS/float)" angibt, dass ein Element aus dem normalen Ablauf genommen werden soll "; Möglicherweise müssen Sie [Ihre Floats löschen] (https://developer.mozilla.org/en-US/docs/Web/CSS/clear). Siehe [Welche Methoden von 'Clearfix' kann ich verwenden?] (Http://stackoverflow.com/questions/211383/what-methods-of-clearfix-cani-i-use) – showdev

Es gibt bessere Möglichkeiten, Inhalte auf einer Webseite zu positionieren und reaktionsfähiger zu machen. (wie Bootstrap)

<div id="header">HEADER</div> 
<div id="content">this is going to be the content 



<p>lol</p></div> 

    <div id="leftBar">contentntntntntnntnt</div> 

<div id="footer">FOOTER</div

Für den Anfang Sie das Innere Inhalt div div leftbar platzieren können, und schließen Tag der Fußzeile div.

<div id="header">HEADER</div> 
<div id="content">this is going to be the content 

<p>lol</p> 

<div id="leftBar">contentntntntntnntnt</div> 
</div> 

<div id="footer">FOOTER</div>

Dann Höhe des Inhalts von div leftbar div gleich Höhe eingestellt. Da Sie leftBar nach links verschoben haben, wird es im Inhalt div und auf der linken Seite angezeigt.

erscheinen Um die Fußzeile zu machen an der Unterseite Sie die Schwimmer brechen müssen, ein leeres div Stellen und dann CSS

<div class="clear"></div>

in CSS-Datei,

.clear { 
    clear:both; 
}

Diese verwenden sollte für Arbeit der größte Teil. Prost!

Quelle

2016-07-26 23:55:46 Sudhanva

versuchen, die leftbar div innerhalb des div Inhalt setzen

<div id="header">HEADER</div> 
    <div id="content">this is going to be the content 

     <div id="leftBar">contentntntntntnntnt</div> 

     <p>lol</p> 

    </div> 

<div id="footer">FOOTER</div>

Quelle

2016-07-26 23:45:50

Antwort

Verwandte Themen