floating 2 left/ 2right divs

Forum Moderators: not2easy

Message Too Old, No Replies

floating 2 left/ 2right divs

roclimb

5:36 pm on Jun 23, 2009 (gmt 0)

Hi,
Was wondering if there is a way to float a left and right div respectivly, then float a left and right div the exact same way below the top left and right divs. Basically I'm looking for 2 colums below two colums, then a footer at the bottom.

Any help would be great
~Rob

swa66

5:54 pm on Jun 23, 2009 (gmt 0)

Something like this ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>test</title>
  <style type="text/css">
   * {
    margin:0;
    padding:0;
   }
   #foo, #bar, #foobar, #barfoo {
    width: 100px;
    height: 100px;
   }
   #foo, #bar {
    float: left;
    clear: left;
   }
   #foobar, #barfoo {
    float: right;
    clear: right;
   }
   #foo {
    background-color:green;
   }
   #bar {
    background-color:yellow;
   }
   #foobar {
    background-color:orange;
   }
   #barfoo {
    background-color:red;
   }
   #footer {
    clear:both;
    background-color:blue;
   }
  </style>
 </head>
 <body>
  <p id="foo">FOO</p>
  <p id="foobar">FOOBAR</p>
  <p id="bar">BAR</p>
  <p id="barfoo">BARFOO</p>
  <p>Hello world!</p>
  <p id="footer">FOOTER</p>
 </body>
</html>

roclimb

6:03 pm on Jun 23, 2009 (gmt 0)

thanks for the reply, that was quick.

I think tht may work. Floating and clearing the same divs will make them stack on top each other I take it?

I will try this later tonight
Thanks
~Rob