Container heights..

  • roulettered56
  • Newbie
  • Newbie
  • roulettered56
  • Posts: 10

Post 3+ Months Ago

Hey all,

In the template code below I have a content and sub-content container next to each other. The thing is, when I add or subtract content the container on left changes height accordinly to fit the text in. Is there a way to keep them both the same size (height) as each other regardless of how much text is added?

Of course I don't want the text overflowing a fixed height container but want the sub container to follow it's height. make sense?

Sorry :)

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>


Or even better, is there a way to have only one container but be able to add seperate content to the right of the main text seperated by a dashed border?

Louis

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 21 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.