Retour à Forum de site web

Container hauteurs ..

  • roulettered56
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Sep 26, 2008
  • Messages: 10
  • Status: Offline

Message Octobre 25th, 2008, 12:06 pm

Hey all,

Dans le code du modèle ci-dessous je avoir un contenu et des sous-conteneurs contenu côté de l'autre. Le truc, c'est quand je additionner ou soustraire des conteneurs du contenu sur la hauteur des changements gauche accordinly pour s'adapter à la po texte est-il un moyen de les garder à la fois de la même taille (hauteur) en tant que de l'autre indépendamment de la quantité de texte est ajoutée?

Bien sûr, je ne veux pas le texte débordant d'une hauteur de conteneurs fixes, mais veulent le récipient sous de suivre sa hauteur. un sens?

Désolé :)

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <style type="text/css" media="screen">
        html{background:#e6e6fa url(somin.png);}
        body{width:756px;margin:0px auto;}
 
 
        #header,
                                    #content,
                                    #subcontent,
                                    #footer{margin-bottom:10px;border:0px solid #444444;padding:20px;background:#ffffff;}
 
                                    #header{background-image:url('750x150-green-squares-swoop.jpg');margin:10px 0px 0px 0px;border: 0px;height: 100px}
        #content{float:left;margin:0px 0px 10px 0;background:#ffffff;width:470px;border: 1px solid #e6e6e6}
        #subcontent{float:left;margin:0px 0 10px 0;width:204px;background:#ffffff;height:408px; Border:0;}
        #footer{clear:both;}
 
 
 
    </style>
    </head>
<body>
    <div id="header">
 
</div>
<div id="content_wrapper">
        <div id="content">
            <h1 id="heading">Heading</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.labore et dolore magna aliqua.<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <div id="subcontent">
 
<br>
           
        <img src="firefoxffff.png" id="Image2" alt="" align="top" border="0" margin="0" width="190" height="212"></div>
    </div>
    <div id="footer">
FOOTER CONTENT
    </div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <html lang="en">
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7.     <title>untitled</title>
  8.     <style type="text/css" media="screen">
  9.         html{background:#e6e6fa url(somin.png);}
  10.         body{width:756px;margin:0px auto;}
  11.  
  12.  
  13.         #header,
  14.                                     #content,
  15.                                     #subcontent,
  16.                                     #footer{margin-bottom:10px;border:0px solid #444444;padding:20px;background:#ffffff;}
  17.  
  18.                                     #header{background-image:url('750x150-green-squares-swoop.jpg');margin:10px 0px 0px 0px;border: 0px;height: 100px}
  19.         #content{float:left;margin:0px 0px 10px 0;background:#ffffff;width:470px;border: 1px solid #e6e6e6}
  20.         #subcontent{float:left;margin:0px 0 10px 0;width:204px;background:#ffffff;height:408px; Border:0;}
  21.         #footer{clear:both;}
  22.  
  23.  
  24.  
  25.     </style>
  26.     </head>
  27. <body>
  28.     <div id="header">
  29.  
  30. </div>
  31. <div id="content_wrapper">
  32.         <div id="content">
  33.             <h1 id="heading">Heading</h1>
  34.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.labore et dolore magna aliqua.<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  35.             </p>
  36.         </div>
  37.         <div id="subcontent">
  38.  
  39. <br>
  40.            
  41.         <img src="firefoxffff.png" id="Image2" alt="" align="top" border="0" margin="0" width="190" height="212"></div>
  42.     </div>
  43.     <div id="footer">
  44. FOOTER CONTENT
  45.     </div>
  46. </body>
  47. </html>


Ou mieux encore, est-il un moyen d'avoir un seul conteneur, mais être en mesure d'ajouter du contenu distinctes au droit du corps du texte séparé par un contour en pointillés?

Louis
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Octobre 25th, 2008, 12:06 pm

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 1 message
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 121 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC