channark
29 Jan 2011, 06:09 PM
hi i try to creat a layout with left nav barr and two content box using div's, i put the box in a div "context" but the probleme is whene i add text in the 2 boxs they be cames more heighest thene the "context".
normaly the height of their container "context" must change in parallel width the text boxs height.
HTML CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>kit 4 CHANNARK</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="menu-h">menu-h<div>
<div id="menu-v">menu-v</div>
<div id="context">
<div id="text1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus felis nulla. Mauris ullamcorper odio sit amet ligula aliquet lacinia. In suscipit cursus malesuada. Integer porta, augue ut faucibus pharetra, sem leo blandit tellus, ac commodo massa massa sit amet nisl. Sed a eros sapien, at pharetra lectus. Vestibulum congue consequat semper. Nullam non quam est, id auctor lacus. Praesent tempor urna sit amet elit posuere malesuada. Praesent elementum augue ac justo facilisis scelerisque. Maecenas nunc sapien, mollis vel imperdiet quis, ornare at felis. Morbi at tortor neque, vel condimentum orci. Nullam nec risus a mi luctus commodo. Ut faucibus enim arcu. Nullam orci tellus, laoreet eget iaculis ut, vestibulum nec urna. Nam ut auctor tellus.<br/>
elit posuere malesuada. Praesent elementum augue ac justo facilisis scelerisque. Maecenas nunc sapien, mollis vel imperdiet quis, ornare at felis. Morbi at tortor neque, vel condimentum orci. Nullam nec risus a mi luctus commodo<br/>elit posuere malesuada. Praesent elementum augue ac justo facilisis scelerisque. Maecenas nunc sapien, mollis vel imperdiet quis, ornare at felis. Morbi at tortor neque, vel condimentum orci. Nullam nec risus a mi luctus commodo</p>
</div>
<div id="text2">
<p>Nam consequat, sapien et eleifend gravida, ligula lorem adipiscing lacus, id facilisis arcu justo vitae metus. Pellentesque euismod ligula tellus. Praesent suscipit euismod orci ac tempus. Morbi non turpis nunc, facilisis pellentesque leo. Praesent vulputate porta augue, vel auctor nibh faucibus eget. Fusce laoreet pulvinar dolor, ac sodales nulla interdum eu. Maecenas hendrerit rutrum magna eget auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas congue turpis pretium sapien auctor et viverra enim vehicula. Morbi varius massa eget ipsum dapibus vel rhoncus erat ornare.</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
CSS CODE:
body{margin:0;
padding:0;}
/*____template_____*/
#container{margin:auto;
width:800px;
height:auto;
padding:0;
}
#header{border-width:5px 2px;
border-style:outset;
border-color:orange;
margin:0;
padding:0;
width:796px;
height:140px;
}
#menu-h{margin:0;
padding:0;
width:800px;
height:40px;
border:2px 0 solid gray;}
#menu-v{width:200px;
margin-top:5px;
margin:0;
padding:0;
float:left;}
#context{margin:5px 0 5px 210px;
padding:0;
width:590px;
background:red;}
#text1 {width:276px;
margin:0;
padding:5px;
border:2px dotted black;
float:left;}
#text2 {width:276px;
margin:0 0 0 300px;
padding:5px;
border:2px dotted black;}
#footer{margin:auto;
width:798px;
height:50px;
border:1px solid gray;
background:black;
clear:left;}
thanks
normaly the height of their container "context" must change in parallel width the text boxs height.
HTML CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>kit 4 CHANNARK</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="menu-h">menu-h<div>
<div id="menu-v">menu-v</div>
<div id="context">
<div id="text1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus felis nulla. Mauris ullamcorper odio sit amet ligula aliquet lacinia. In suscipit cursus malesuada. Integer porta, augue ut faucibus pharetra, sem leo blandit tellus, ac commodo massa massa sit amet nisl. Sed a eros sapien, at pharetra lectus. Vestibulum congue consequat semper. Nullam non quam est, id auctor lacus. Praesent tempor urna sit amet elit posuere malesuada. Praesent elementum augue ac justo facilisis scelerisque. Maecenas nunc sapien, mollis vel imperdiet quis, ornare at felis. Morbi at tortor neque, vel condimentum orci. Nullam nec risus a mi luctus commodo. Ut faucibus enim arcu. Nullam orci tellus, laoreet eget iaculis ut, vestibulum nec urna. Nam ut auctor tellus.<br/>
elit posuere malesuada. Praesent elementum augue ac justo facilisis scelerisque. Maecenas nunc sapien, mollis vel imperdiet quis, ornare at felis. Morbi at tortor neque, vel condimentum orci. Nullam nec risus a mi luctus commodo<br/>elit posuere malesuada. Praesent elementum augue ac justo facilisis scelerisque. Maecenas nunc sapien, mollis vel imperdiet quis, ornare at felis. Morbi at tortor neque, vel condimentum orci. Nullam nec risus a mi luctus commodo</p>
</div>
<div id="text2">
<p>Nam consequat, sapien et eleifend gravida, ligula lorem adipiscing lacus, id facilisis arcu justo vitae metus. Pellentesque euismod ligula tellus. Praesent suscipit euismod orci ac tempus. Morbi non turpis nunc, facilisis pellentesque leo. Praesent vulputate porta augue, vel auctor nibh faucibus eget. Fusce laoreet pulvinar dolor, ac sodales nulla interdum eu. Maecenas hendrerit rutrum magna eget auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas congue turpis pretium sapien auctor et viverra enim vehicula. Morbi varius massa eget ipsum dapibus vel rhoncus erat ornare.</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
CSS CODE:
body{margin:0;
padding:0;}
/*____template_____*/
#container{margin:auto;
width:800px;
height:auto;
padding:0;
}
#header{border-width:5px 2px;
border-style:outset;
border-color:orange;
margin:0;
padding:0;
width:796px;
height:140px;
}
#menu-h{margin:0;
padding:0;
width:800px;
height:40px;
border:2px 0 solid gray;}
#menu-v{width:200px;
margin-top:5px;
margin:0;
padding:0;
float:left;}
#context{margin:5px 0 5px 210px;
padding:0;
width:590px;
background:red;}
#text1 {width:276px;
margin:0;
padding:5px;
border:2px dotted black;
float:left;}
#text2 {width:276px;
margin:0 0 0 300px;
padding:5px;
border:2px dotted black;}
#footer{margin:auto;
width:798px;
height:50px;
border:1px solid gray;
background:black;
clear:left;}
thanks