CSS / Problème de float & div
Fermé
SchtroumpfProgrammeur
-
28 août 2008 à 12:07
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 - 28 août 2008 à 13:55
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 - 28 août 2008 à 13:55
A voir également:
- CSS / Problème de float & div
- Div c++ - Télécharger - Langages
- Taille bouton css - Forum HTML
- Css retour à la ligne - Forum CSS
- Css download - Télécharger - HTML
- Moyenne.si.ens #div/0 ✓ - Forum Excel
5 réponses
pijaku
Messages postés
12263
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
4 janvier 2024
2 754
28 août 2008 à 13:16
28 août 2008 à 13:16
Autant pour moi, je n'avais pas tout lu...
Une solution, ne sachant pas pourquoi tu veux faire ça consiste à :
1- inverser div2 et div3 effectivement,
2- div2 au lieu de float : right; mettre : margin-left: 320px (400 - 75 - bordures)
3- div3 ajouter : float:left;
ça rends à peu près ce que tu veux.
Une solution, ne sachant pas pourquoi tu veux faire ça consiste à :
1- inverser div2 et div3 effectivement,
2- div2 au lieu de float : right; mettre : margin-left: 320px (400 - 75 - bordures)
3- div3 ajouter : float:left;
ça rends à peu près ce que tu veux.
meuhlol
Messages postés
1896
Date d'inscription
mardi 24 juillet 2007
Statut
Membre
Dernière intervention
30 novembre 2021
672
28 août 2008 à 12:13
28 août 2008 à 12:13
Pourquoi ne pas mettre un truc du genre:
sous IE les bordures ne sont pas comptés avec la taille de la largeur du DIV.
Sous firefox, la largeur des bordures est comprise dans la largeur de div, donc y mettre un width de 2 pixels de moins (798)
<div style="border-left: solid 1px #000000; border-right: solid 1px #000000; width: 800px">
sous IE les bordures ne sont pas comptés avec la taille de la largeur du DIV.
Sous firefox, la largeur des bordures est comprise dans la largeur de div, donc y mettre un width de 2 pixels de moins (798)
En fait ce n'est pas exactement ce que je cherche à faire. De plus j'utilise le modèle des boites "correcte" donc jen'ai pas de soucis de largeur. Je te mets le code HTML pour que tu puisses essayer sous IE7 (attention ça ne marche pas sous FireFox) :
NB: Tu remarqueras que même comme ça il y a toujours un problème, car DIV3 est collée contre DIV2 sans marge...
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div id="DIV1" style="border: 1px solid #000000; width: 400px; height: 300px;"> <div id="DIV2" style="width: 75px; height: 250px; float: right; border: 1px dotted #000000;"></div> <div id="DIV3" style="margin: 25px; width: auto; height: 50; border: 1px dashed #000000; display: inline-block;">display: inline-block</div> </div> </body> </html>
NB: Tu remarqueras que même comme ça il y a toujours un problème, car DIV3 est collée contre DIV2 sans marge...
meuhlol
Messages postés
1896
Date d'inscription
mardi 24 juillet 2007
Statut
Membre
Dernière intervention
30 novembre 2021
672
28 août 2008 à 12:57
28 août 2008 à 12:57
Salut,
pour du inline-block, chez mozilla il s'écrit -moz-inline-block, donc pour les deux:
par la suite je n'ai pas réussi, à part les flotter à gauche et à droite.
J'espère que quelqu'un de plus compétent que moi saurait t'aider :(
pour du inline-block, chez mozilla il s'écrit -moz-inline-block, donc pour les deux:
display: inline-block, -moz-inline-block;
par la suite je n'ai pas réussi, à part les flotter à gauche et à droite.
J'espère que quelqu'un de plus compétent que moi saurait t'aider :(
pijaku
Messages postés
12263
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
4 janvier 2024
2 754
28 août 2008 à 12:54
28 août 2008 à 12:54
Salut,
Inverse div2 et div3 dans ton code html :
<div id="DIV1" style="border: 1px solid #000000; width: 400px; height: 300px;">
<div id="DIV3" style="margin: 25px; width: auto; height: 50; border: 1px dashed #000000; display: inline-block;">display: inline-block</div>
<div id="DIV2" style="width: 75px; height: 250px; float: right; border: 1px dotted #000000;"></div>
</div>
et dis nous ce que tu en penses...
Inverse div2 et div3 dans ton code html :
<div id="DIV1" style="border: 1px solid #000000; width: 400px; height: 300px;">
<div id="DIV3" style="margin: 25px; width: auto; height: 50; border: 1px dashed #000000; display: inline-block;">display: inline-block</div>
<div id="DIV2" style="width: 75px; height: 250px; float: right; border: 1px dotted #000000;"></div>
</div>
et dis nous ce que tu en penses...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Merci à vous tous pour vos message. Malheuresement ça ne marche toujours pas :-(
Je ne peux malheureusement pas inverse DIV2 et DIV3 comme tu le proposes Pijaku car dans le site sur lequel je travaille (je n'ai posté qu'un exemple) la largeur de DIV1 est exprimée en pourcentage avec des max-min et il est donc difficile de spécifier une marge de largeur connue ou de positionner DIV2 en absolut ou autre...
Je ne vous cache pas en revanche que celà fait longtemps que je butte contre ce problème et que je si je suis venu ici c'est parce que j'étais à court d'idées :-/
Je ne peux malheureusement pas inverse DIV2 et DIV3 comme tu le proposes Pijaku car dans le site sur lequel je travaille (je n'ai posté qu'un exemple) la largeur de DIV1 est exprimée en pourcentage avec des max-min et il est donc difficile de spécifier une marge de largeur connue ou de positionner DIV2 en absolut ou autre...
Je ne vous cache pas en revanche que celà fait longtemps que je butte contre ce problème et que je si je suis venu ici c'est parce que j'étais à court d'idées :-/
meuhlol
Messages postés
1896
Date d'inscription
mardi 24 juillet 2007
Statut
Membre
Dernière intervention
30 novembre 2021
672
28 août 2008 à 13:55
28 août 2008 à 13:55
peut-être les placer séparément, les divs?
peut-être utiliser z-index ?
peut-être utiliser z-index ?