This layout shouldn't be this hard...

jakerbug

02-23-2008, 07:07 PM

Can anybody tell me why trying to create this layout with CSS is be giving me so much trouble?

http://home.comcast.net/~jakerbug/mfer.jpg

I've been floating and clearing and padding and margining for hours and I just can't make it work...

effpeetee

02-23-2008, 07:09 PM

Give us what code you are using please.

Frank

jakerbug

02-23-2008, 07:23 PM

Works fine in IE, but not in FF...

<div style="width: 600px;">

<div style="width: 600px; height: 10px; background-color: red;">
</div>

<div style="float: left; width: 250px; background-color: blue;">

<div style="float: left; width: 125px; height: 80px; background-color: orange;">
</div>
<div style="float: left; width: 125px; height: 80px; background-color: yellow;">
</div>

<div style="width: 250px; height: 220px; background-color: purple;">
</div>

</div>

<div style="float: right; width: 350px; height: 300px; background-color: green;">
</div>

<div style="width: 600px; height: 100px; background-color: violet;">
</div>

</div>

coothead

02-23-2008, 07:47 PM

Hi there jakerbug,

have a look at this example...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
width:588px;
margin:auto;
}
#one {
height:16px;
background-color:#dab95a;
}
#two {
width:294px;
height:290px;
float:left;
}
#two_one {
width:147px;
height:145px;
background-color:#ff01bb;
float:left;
}
#two_two {
width:147px;
height:145px;
background-color:#2f8ac3;
float:left;
}
#two_three {
height:145px;
background-color:#e16434;
clear:both;
}
#three {
width:294px;
height:290px;
background-color:#0bff01;
float:left;
}
#four {
height:230px;
background-color:#c9e727;
clear:both;
}
</style>

</head>
<body>

<div id="container">

<div id="one"></div>

<div id="two">
<div id="two_one"></div>
<div id="two_two"></div>
<div id="two_three"></div>
</div>

<div id="three"></div>

<div id="four"></div>

</div>

</body>
</html>

...it should get you going again. ;)

coothead

jakerbug

02-23-2008, 07:50 PM

beautiful. i'm not too good with the whole concept of "clear" - I think that's why I couldn't get it. i knew it wasn't THAT hard.

thanks so much!

coothead

02-23-2008, 08:07 PM

No problem, you're welcome. ;)