Positionnement div

Question

Donc, j'ai un bloc, et ce bloc doit contenir deux divs, le premier div doit être à gauche (attaché au bloc), deuxième à droite (attaché au bloc), et ce deux divs doit couvrir toute la taille du bloc .

Answer 1

<div id="block" style="width:800px"> 
    <div id="left" style="float:left;width:50%;"> left </div> 
    <div id="right" style="float:right;width:50%;"> right</div> 
</div> 

Les deux divs ont une demi-largeur de la div du parent.

Mais vous devez faire attention aux bordures car le width définit la largeur du contenu (c'est-à-dire sans bordures). Donc, si vous utilisez des bordures, la case de droite sera affichée en bas à gauche, mais toujours sur le côté droit.

Answer 2

Est-ce que quelque chose comme ça ferait ce que vous voulez?

<div id="container"> 
    <div id="leftside" style="width:100px; float:left"> 
     Left Side 
    </div> 
    <div id="rightside" style="margin-left: 100px;"> 
     Right Side 
    </div> 
</div> 

Vous devrez peut-être ajuster la marge gauche en fonction du rembourrage (et de la largeur, évidemment). C'est un moyen facile d'obtenir l'approche des deux colonnes (même si les deux colonnes sont une petite boîte) :)

Ou dans l'intérêt de séparer le HTML et CSS, le même code représenté à nouveau en deux parties :):

HTML

<div id="container"> 
    <div id="leftside"></div> 
    <div id="rightside"></div> 
</div> 

CSS

#container: 
{ 
    /* insert any requires styles here :) */ 
} 
#leftside: 
{ 
    width: 100px; 
    float: left; 
} 
#rightside: 
{ 
    margin-left: 100px; 
} 

Answer 3

Essayez ceci:

<div id="container"> 
    <div id="left"> 
    Some Content 
    </div> 

    <div id="right"> 
    Some Content 
    </div> 
</div> 

CSS:

<style type="text/css"> 
#container 
{ 
    width:500px; 
    height:500px; 
    position:relative; 
} 

#left 
{ 
    width:250px; 
    height:250px; 
    position:absolute; 
    float:left; 
} 

#right 
{ 
    width:250px; 
    height:250px; 
    position:absolute; 
    float:right; 
} 
</style> 

Answer 4

vous le feriez comme ça.

<div id="block"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 

Le css serait

#block { 
    width:800px; 
    display:block //not sure if this line is required or not 
} 
#left { 
    width:400px; 
    float:left; 
} 
#right { 
    width:400px; 
    float:left; 
} 

Answer 5

Il y a plusieurs façons cela pourrait être fait .... voici un:

<div style="position: relative; width: 100%; "> 
    <div style="position: absolute; left: 0; width: 50%; "> 
     <p>Content</p> 
    </div> 
    <div style="position: absolute; right: 0; width: 50%; "> 
     <p>Content</p> 
    </div> 
</div> 

Answer 6

Adjust la marge et la largeur et vous avez terminé.

<div id="main"> 
    <div id="left" style="float:left"> 
     Content Left 
    </div> 
    <div id="right" style="float:right"> 
     Content Right 
    </div> 
</div>