comment faire une largeur de 100% pour 2 div

Question

J'ai 2 div dans la page

<div id="main"></div> 
<div id="panel"></div> 

et en utilisant flotteur pour faire principal à gauche, et le panneau à droite

#photos-main { 
float: left; 
width: 800px; 
position: relative; 
} 

#panel { 
float: left; 
margin-left: 830px; 
position: absolute; 
} 

Je veux laisser panneau remplir avec l'espace de la page gauche, quel css dois-je utiliser?

Answer 1

Juste ne le faites pas flotter, et ne le placez pas relativement. Sortez également la marge. Flottant "principal" signifie qu'il sera tout simplement à gauche de "panneau" tout le temps. Si vous définissez "main" comme vous voulez, "panel" occupera automatiquement l'espace restant.

#photos-main { 
float: left; 
width: 800px; 
position: relative; 
} 

#panel { 
} 

Answer 2

On dirait que vous essayez de construire une mise en page, non? Si tel est le cas, envisagez la mise en œuvre (par conséquent l'apprentissage de) quelques-unes des techniques présentées dans ces liens:

40 Tutorials and tips about CSS Layouts

CSS Positioning

The perfect three columns layout

Hope it helps!

Answer 3

Vous pouvez le faire avec flottant avec cette approche:

#photos-main { 
float: left; 
width: 800px; 
} 

#panel { 
float: right; /*to have the panel on the right side*/ 
width: 100px; /*with a width of 100px*/ 
} 

Ensuite, vous devez envelopper les deux mots clés avec un autre, qui obtiennent une largeur totale des deux éléments.

Pour clarifier cette disposition en deux colonnes et mettre par ex. un pied de page dessous, placez-en un autre dans votre HTML-Structure et mettez dans le css simple un "clear: both;", de sorte que le flottant sera arrêté.

échantillon complet

HTML

<div id="wrap"> 
    <div id="photos-main"></div> 
    <div id="panel"></div> 
    <div id="clear"></div> 
</div> 

CSS

#wrap { 
width: 900px; 
} 

#photos-main { 
float: left; 
width: 800px; 
} 

#panel { 
float: right; /*to have the panel on the right side*/ 
width: 100px; /*with a width of 100px*/ 
} 

#clear { 
clear:both; 
}