Layout Problem

@WebJoelJun 21.2006 — #Not sure what you're after here, but this gets the red block up into the yellow block. You have to show widths and float one div. This will give you some ideas. Also, -what is the purpose here of the WRAPPER div? It does nothing (and it had no referance in the CSS nor any closing tag in the HTML, so I provided one for each).

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
 <meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1' />
 <title>Rpg Toolkit Winter Expo 2006 -- Index</title>
 <style type='text/css'>
 
 body
 {
 font-family: 'Comic Sans MS', Tahoma, sans-serif;
 font-size: 13px;
 margin: 15px;
 background-color: #e6f6ff;
 }
 #wrapper	{width:100%;}
 
 div#outer_full
 {
 width: 100%;
 margin: 10px 0 10px 0;
 background-color: yellow;
 }
 
 div#left_full
 {
 width:60%; float:left; margin:5px;
 background-color: green;
 padding:15px 5px 10px 15px;
 }
 
 div#right_full
 {
 width: 30%;
 position:relative;
 float:right;
 padding:15px 5px 10px 15px;
 margin:5px 5px 5px 10px;
 
  background-color: red;
 }
 </style>
 </head>
 
 <body>
 
 <div id='wrapper'>
 
  <div id='outer_full'>
 
   <div id='left_full'>
 
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed tortor at dui cursus scelerisque. Aliquam dignissim nunc at purus. Pellentesque tempor risus. Etiam dapibus. Nulla facilisi. Pellentesque auctor tellus in nisl. Suspendisse egestas tristique nibh. Aenean quis velit. Sed eu arcu ac libero sagittis commodo. Pellentesque turpis ipsum, congue ut, imperdiet a, iaculis quis, odio. Suspendisse interdum dui quis lectus. In hac habitasse platea dictumst. Duis a dui. Nullam et justo. Integer bibendum imperdiet pede. Aliquam odio. Sed porta, sem eget convallis auctor, enim lectus tristique enim, et dignissim turpis elit sed dolor. Nullam interdum urna at justo. Duis id risus in neque tincidunt elementum. Sed volutpat consectetuer justo.</p>
 
 <p>Maecenas a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus erat. Nam eget mi. Nunc tincidunt. Ut quis metus. Aliquam placerat, odio ut malesuada adipiscing, diam leo aliquet urna, a cursus eros nibh ac nunc. Duis massa augue, vulputate et, tincidunt quis, tempor sed, ante. Praesent quis elit quis lacus eleifend semper. Donec leo mi, volutpat in, condimentum non, pharetra in, urna. Nullam tristique, nibh nec malesuada faucibus, lacus ligula tempus est, at gravida velit dui quis ante. Duis odio est, rutrum a, porttitor a, facilisis eget, est. Sed pellentesque metus eu metus. Mauris placerat quam a diam.</p>
 
   </div>
 
   <div id='right_full'>
 
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed tortor at dui cursus scelerisque. Aliquam dignissim nunc at purus. Pellentesque tempor risus. Etiam dapibus. Nulla facilisi. Pellentesque auctor tellus in nisl. Suspendisse egestas tristique nibh. Aenean quis velit. Sed eu arcu ac libero sagittis commodo. Pellentesque turpis ipsum, congue ut, imperdiet a, iaculis quis, odio. Suspendisse interdum dui quis lectus. In hac habitasse platea dictumst. Duis a dui. Nullam et justo. Integer bibendum imperdiet pede. Aliquam odio. Sed porta, sem eget convallis auctor, enim lectus tristique enim, et dignissim turpis elit sed dolor. Nullam interdum urna at justo. Duis id risus in neque tincidunt elementum. Sed volutpat consectetuer justo.</p>
 
   </div>
 
   <div style='clear: both;'></div>
 
  </div><!-- closes OUTER_FULL -->
  </div><!-- closes WRAPPER -->
 
 </body>
 
 </html>
 [/code]

This will probably start to fail under 800-px wide, there are other things that can be done though to stop this from occuring

Layout Problem

1 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Layout Problem

1 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

1 Comments(s) _↴

Also in #CSS _↴