Forum Moderators: not2easy
Im fairly new to CSS and HTML, and have decided to make a site that is as fluid as possible. I test across 3 platforms and 4 resolutions ranging from 640 to 1280; and need the site to be almost identicle on each.
However I am faced with an annoyance, I've never coded with the intention of the site being fluid, everything seems to almost align, except the four main corners of the site are 1.5px pushed out (in IE its 3px) due to the filler image, which is used to fill the space between image corners.
I tried using 'margin' tags to align properly, but it stopped all sides sitting next to each other, however when using float I am presented with the current problem.
I'm about to give up and just go ahead with the layout anyway, except use 'margin' tags to push the filler images in so they align properly, but I'm afraid this will stop the site from being cross-compatible.
HTML CODE:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
<title></title>
</head>
<body>
<!--Start of main body-->
<div id="body">
<div id="middleFill"></div>
<div id="topLeftFill"></div>
<div id="topFill"><img src="images/tl.jpg" class="topLeft" alt="" /><img src="images/tr.jpg" class="topRight" alt="" /></div>
</div>
<div id="middleBody">
<div id="middleLowerFill"></div>
<div id="middleLeftFill"></div>
<img src="images/mr.jpg" class="middleRight" alt="" /><div id="middleRightFill"></div><img src="images/ml.jpg" class="middleLeft" alt="" /></div>
<div id="lowerBody">
<div id="lowerLeftFill"></div><div id="lowerRightFill"></div>
<img src="images/bl.jpg" class="bottomLeft" alt="" /><img src="images/br.jpg" class="bottomRight" alt="" />
</div>
</body>
</html>
#body {
height: 11em;
width: 61em;
background-color: green;
margin-top: 2em;
margin-left: 2em;
}
#middleBody {
height: 12em;
width: 75em;
background-color: blue;
margin-right: auto;
margin-left: 2em;
}
#lowerBody {
height: 6em;
width: 75em;
background-color: yellow;
margin-right: auto;
margin-left: 2em;
}
#topFill {
background: url(images/fill.jpg) repeat-x;
height: 1px
}
#middleRightFill {
background: url(images/fill.jpg) repeat-x;
height: 1px;
width: 6.2%;
float: right;
margin-top: 6.2%
}
#topLeftFill {
background: url(images/fill.jpg) repeat-y;
width: 1px;
height: 99.9%;
float: left
}
#middleFill{
background: url(images/fill.jpg) repeat-y;
width: 1px;
height: 99.9%;
float: right
}
#middleLowerFill {
background: url(images/fill.jpg) repeat-y;
width: 1px;
height: 23%;
float: right;
margin-top: 12.3%
}
#middleLeftFill {
background: url(images/fill.jpg) repeat-y;
width: 1px;
float: left;
height: 99.9%;
}
#lowerRightFill {
background: url(images/fill.jpg) repeat-y;
width: 1px;
height: 20%;
float: right;
}
#lowerLeftFill {
background: url(images/fill.jpg) repeat-y;
width: 1px;
height: 20%;
float: left;
}
#bottomFill {
background: url(images/fill.jpg) repeat-x;
height: 1px;
width: 100%;
}
img.topLeft{
float: left;
margin-right: .5%;
}
img.topRight {
float: right;
margin-left: .5%
}
img.middleLeft {
float: right;
margin-left: 1%
}
img.middleRight {
float: right;
margin-top: 6%
}
img.bottomRight {
float: right;
margin-left: 2%;
margin-top: 1.6%
}
img.bottomLeft {
float: left;
margin-right: 2%;
margin-top: 1.6%
}
Any and all help is greatly appreciated,
James
Too tired/lazy to test your code, but my first instinct tells me that your #body div is not necessary and its styles can be made part of whatever you specify for <body>
html, body {
margin: 0px;
padding: 0px;
}
body {
height: 11em;
width: 61em;
background-color: green;
margin-top: 2em;
margin-left: 2em;
}
For your outermost container, you can use something like this to center horizontally:
#container {
margin: 0px auto;
}
