Forum Moderators: not2easy

Message Too Old, No Replies

floating 2 left/ 2right divs

         

roclimb

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

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

10+ Year Member



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