Forum Moderators: not2easy
<body>
<div id="main">
<div id="header"></div>
<div id="content">
<div id="1">
<div id="1A"> </div>
<div id="1B"> </div>
<div id="1C"> </div>
</div>
<div id="2">
<div id="2A"> </div>
<div id="2B"> </div>
<div id="2C"> </div>
</div>
</div>
</div>
</body>
and in css i have the following rules:
#main {
margin: 0 auto;
width: 1134px;
text-align: left;
position: relative;
}
#header {
background-image: url(images/header.gif);
height: 406px;
width: 1134px;
margin: 0;
padding: 0;
}
#content {
background-image: url(images/content1.gif);
background-repeat: no-repeat;
width: 1134px;
height: 820px;
padding: 0;
margin: 0;
display: inline;
float: left;
position: relative;
}
#1 {
width: 1134px;
height: 180px;
display: block;
padding: 0;
position: relative;
left: 50px;
}
#2 {
width: 1134px;
height: 180px;
display: block;
padding: 0;
position: relative;
left: 50px;
}
#1A {
height: 180px;
width: 300px;
background-color: #FF0000;
margin: 0;
float: left;
}
#1B {
height: 180px;
width: 300px;
background-color: #00FF00;
margin: 0;
float: left;
}
#1C {
height: 180px;
width: 300px;
background-color: #0000FF;
margin: 0;
float: left;
}
#2A {
height: 180px;
width: 300px;
background-color: #FF0000;
margin: 0;
float: left;
}
#2B {
height: 180px;
width: 300px;
background-color: #00FF00;
margin: 0;
float: left;
}
#2C {
height: 180px;
width: 300px;
background-color: #0000FF;
margin: 0;
float: left;
}
My problem is that i cant work it out with the aligment, it stil keeps them togheaterh, i cant align them how i want
here i have put here a image with description about the aligment that i wanna do
<snip>
[edited by: swa66 at 4:45 pm (utc) on April 8, 2009]
[edit reason] No personal URLs please see ToS [/edit]
And just a tip: Cancel out all the preformated margins and padding by stating the fallowing as your first rule...
* {
margin:0;
padding:0;
}
Then work from there.
