Hello everyone,
I'm trying to redo my website using Thematic, and add some adjustments to it as well, however sizing is creating a weird issue for me.
I want the website to be a total of 1000 px wide, with the content being 642 px (incl. border), an 18px margin to the right, and the sidebar widgets taking up the rest of the space, which should be 360px. However no matter how much I check and recheck the code, it wont size properly.
Here's a photo to show what I mean:
http://img406.imageshack.us/img406/2140/picture1qz.png
In the above picture, my header is 1000 px, the content is 642px, the gap between the content and sidebar is ~30 px, and the sidebar is only ~300 px.
Along with the relevant code:
#main{
width: 1000px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 0px;
}
#container{
width: 600px;
margin: 0px 18px 0px 0px;
padding: 20px;
background-color: #363636;
border: 1px solid #4a4a4a;
}
#content{
width: auto;
height: auto;
margin: auto;
padding: 0px;
}
#primary{
margin: 0px;
padding: 0px;
border: none;
overflow: hidden;
}
#secondary{
margin: 0px;
padding: 0px;
border: none;
overflow: hidden;
}
.main-aside{
width: 340px;
height: auto;
}
.xoxo{
padding: 0px;
margin: 0px;
}
.widgetcontainer{
height: auto;
margin: auto;
margin-bottom: 20px;
padding: 20px;
background-color: #363636;
border: 1px solid #4a4a4a;
}
