2017-08-13 5 views
0

J'ai eu un problème avec mon texte html/css. Je suis très novice en matière de codage, donc c'est une question très simple:Positionnement HTML/CSS de 3divs

mes 2 blocs .left de texte sont censés être placés du côté gauche (ce qui fonctionne bien). Le droit plus bloc d'autre part organise en quelque sorte à droite du deuxième bloc, mais devrait vraiment être juste à côté de deux blocs (de sorte que les deux parties sont tout aussi long) Mon Css:

Mon CSS:

body{ 
    background-color:#f6f6f6; 
} 
div { 
    border: 1px solid #d3d3d3; 
} 
#header{ 
    width : 110%; 
    height : 40px; 
    background-color: white; 
    margin-left: -19px; 
    margin-top: -10px; 
    position: fixed; 
    z-index: 1; 
    margin-bottom:10px; 
} 
#header h2{ 
    margin-left: 20px; 
    margin-top:10px; 
    font-size: 20px; 
    font-family: Verdana, sans-serif; 
    color: black; 
} 
.left div { 
height: 480px; 
width: 48%; 
margin-top:40px; 
margin-bottom:10px; 
margin-left:30px; 
background-color :white; 
float: left; 
clear: left; 

} 

.right { 
    height: 1000px; 
    width: 48%; 
    margin-top:40px; 
    margin-bottom:1px; 
    background-color :white; 
    float:right; 
} 

#footer{ 
    background-color:white; 
    height: 40px; 
    width: 100%; 
    margin-bottom:-30px; 
    clear: both; 
    text-align: center; 
} 
.right p { 

    margin-left:20px; 
} 
a:hover{ 
    font-weight:bold; 
} 
#footer a { 
    position:relative; 
    font-family:Arial; 
    text-decoration:none; 
    color:black; 
} 
#footer p { 
    margin-top:10; 
    margin-bottom:10; 
} 

Mon HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
    <title> 

    </title> 
</head> 
<body> 
     <div id ="header"> 
     <h2> Meine Website </h2> 

     </div> 
     <div class ="left"> 
     <div> 
      <ul> 
      <li> erster punkt </li> 
      <li> zweiter punkt </li> 
      </ul> 
     </div> 
     <div> 
      <ul> 
      <li> erster punkt2 </li> 
      <li> zweiter punkt2 </li> 
      </ul> 
     </div> 
     </div> 
     <div class ="right"> 

     <p> paragraph </p> 

     </div> 
     <div id ="footer"> 
     <p> Meine E-mail: 
     <a href= "mailto:[email protected]" >[email protected] </a> 
</p> 
     </div> 
</body> 
</html> 

Ce que j'est:

left1 
left2 right1 
     right1 

ce que je veux est:

left1 right1 
left2 right1 

Répondre

0

Ajouter

.left { 
    float: left; 
    width: 50%; 
    border: none; 
} 

et changer votre style sur sélecteur .left div à

.left div { 
    height: 480px; 
    margin-top: 40px; 
    margin-bottom: 10px; 
    margin-left: 30px; 
    background-color:white; 
    clear: left; 
} 

Essayez ceci, est ce résultat que vous voulez?

0

Appliquer ci-dessous changement de style, flotteur appliqué gauche à .Left conteneur

.left{ 

    float:left; 
}