Help with CSS replacing old table layout

[girlstar]

Hey all,

I am, for the first time ever, trying to code a design with no tables. I am a long time user of tables, so this is really killing me. And the different results on different browsers kills it even more. I have been working on this for a day, and been looking at plenty of tutorials.. ones that use display: table, ones that use absolute positioning, and ones that use float.

Here is what my site currently looks like:

http://www.girlstar.org/

Under firefox, it looks like I want (minus the coloured borders I have added in to distinguish the boundaries of the divs). Under IE, the content div and sidebar div do not line up together. Can anyone help me?

Here's my stylesheet.. thanks in advance to anyone.

html, body {
background: #e7346e;
padding: 0px;
margin: 0px;
font-family: Verdana, Arial, Sans-Serif;
font-size: 12px;
height: 100%;
}


#header-container {
background: #e7346e url('images/bg.jpg') repeat-x;
width: 100%;
height: 91px;
position: relative;
margin: 0px;
}
#header {
margin-left: auto;
margin-right: auto;
background: url('images/girlstar.png') no-repeat;
padding: 0px;
width: 800px;
height: 91px;
text-align: right;
color: #ffffff;
font-weight: bold;
}

#header a {
font-weight: bold;
color: #ffffff;
text-decoration: underline;
}


#page {
background: #e7346e;
margin-left: auto;
margin-right: auto;
width: 800px;
min-height: 100%;
height: auto;
padding: 0px;
position: relative;
border: 2px solid blue;
display: table;
}

#content {
background: #ffffff url('images/main-back.jpg') repeat-y;
font-size: 12px;
text-align: justify;
padding: 30px;
margin: 0px;
width: 490px;
position: relative;
min-height: 100%;
height: auto;
display: table-cell;
border: 2px solid red;
}

#content h2 {
font-size: 16px;
margin: 0px;
}

#content h3 {
font-size: 11px;
color: #ababab;
margin: 0px;
}


#content a {
font-weight: bold;
color: #0094de;
text-decoration: none;
}


#sidebar {
background: #e7346e;
font-size: 12px;
padding-left: 25px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 30px;
margin: 0px;
width: 220px;
position: relative;
display: table-cell;
top: 0;
left: 550px;
border: 2px solid green;
}

#footer-container {
background: #0094de;
width: 100%;
margin: 0px;
border: 2px solid yellow;
}


#footer {
background: url('images/girl.jpg') no-repeat right;
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 780px;
color: #ffffff;
min-height: 300px;
}

#line-footer {
background: #e7346e url('images/bg.jpg') repeat-x;
width: 100%;
padding: 0px;
margin: 0px;
height: 30px;
}

#inourbag {
background: url('images/inourbag.png') no-repeat;
width: 225px;
height: 282px;
}

#inourbag-contents {
margin-left: auto;
margin-right: auto;
text-align: center;
position: absolute;
width: 175px;
padding: 25px;
padding-top: 105px;
line-height: 1.5em;
}
#about {
background: url('images/creditcard.png') no-repeat;
width: 225px;
height: 141px;
}

#about-contents {
margin-left: auto;
margin-right: auto;
text-align: left;
position: absolute;
width: 185px;
padding: 20px;
padding-top: 14px;
font-size: 11px;
color: #787878;
}

#inourbag a {
font-weight: bold;
color: #ffffff;
text-decoration: underline;
}

#inourbag img {
border: 2px solid #e6336d;
}

#sidebar .widgettitle {


}




#sidebar ul, #sidebar li {
list-style-type: none;
color: #ffffff;
margin-left: 0px;
padding-left: 0px;
}



p img {
padding: 0;
max-width: 100%;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}



/* Begin Form Elements */
select {
width: 130px;
}

#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}

#commentform textarea {
width: 100%;
padding: 2px;
}

#commentform #submit {
margin: 0;
float: right;
}
/* End Form Elements */



/* Begin Comments*/
.alt {
margin: 0;
padding: 10px;
}

.commentlist {
padding: 0;
text-align: justify;
}

.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}

.commentlist p {
margin: 10px 5px 10px 0;
}

#commentform p {
margin: 5px 0;
}

.nocomments {
text-align: center;
margin: 0;
padding: 0;
}

.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */


a img {
border: none;
}

[Excavator]

Hello girlstar,
I looks like your taking padding and margin into account for your widths but did you know that borders add to that?
Your #content has

width: 490px;
padding: 30px;
border: 2px solid red;

That makes a total width of 554px.

Your #sidebar has left: 550px.


I could be wrong, I didn't test it in IE and I've also never done it quite this way. I would have floated #content left and used margin to move the #sidebar over.

[girlstar]

Thanks Excavator!

I am not sure that the borders were causing any problems - I have been adding and removing the borders to troubleshoot it all afternoon. But I have completely removed them now, for the sake of it.

I took your advice and used the float left on the content div, and margin to move the sidebar div. Amazingly, it looks EXACTLY like I want it to in IE7.. go figure. But, a problem in firefox.. which can't be good because isn't firefox the one that understands the css PROPERLY?

http://www.girlstar.org/

The content div isn't stretching to the bottom of of the page div which it resides in.. and I would like the content div to ALWAYS be touching the top of the footer-container div. Is this possible?

And is there anything else in the css I should improve on?

I've pasted my new css just in case:

html, body {
background: #e7346e;
padding: 0px;
margin: 0px;
font-family: Verdana, Arial, Sans-Serif;
font-size: 12px;
height: 100%;
}


#header-container {
background: #e7346e url('images/bg.jpg') repeat-x;
width: 100%;
height: 91px;
position: relative;
margin: 0px;
}
#header {
margin-left: auto;
margin-right: auto;
background: url('images/girlstar.png') no-repeat;
padding: 0px;
width: 800px;
height: 91px;
text-align: right;
color: #ffffff;
font-weight: bold;
}

#header a {
font-weight: bold;
color: #ffffff;
text-decoration: underline;
}


#page {
background: #e7346e;
margin-left: auto;
margin-right: auto;
width: 800px;
padding: 0px;
display: table;
}

#content {
background: #ffffff url('images/main-back.jpg') repeat-y;
font-size: 12px;
text-align: justify;
padding: 30px;
margin: 0px;
width: 490px;
height: 100%;
float: left;
}

#content h2 {
font-size: 16px;
margin: 0px;
}

#content h3 {
font-size: 11px;
color: #ababab;
margin: 0px;
}


#content a {
font-weight: bold;
color: #0094de;
text-decoration: none;
}


#sidebar {
background: #e7346e;
font-size: 12px;
padding-left: 25px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 30px;
margin: 0px;
margin-left: 550px;
width: 220px;
height: 100%;
}

#footer-container {
background: #0094de;
width: 100%;
margin: 0px;
}


#footer {
background: url('images/girl.jpg') no-repeat right;
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 780px;
color: #ffffff;
min-height: 300px;
}

#line-footer {
background: #e7346e url('images/bg.jpg') repeat-x;
width: 100%;
padding: 0px;
margin: 0px;
height: 30px;
}

#inourbag {
background: url('images/inourbag.png') no-repeat;
width: 225px;
height: 282px;
}

#inourbag-contents {
margin-left: auto;
margin-right: auto;
text-align: center;
position: absolute;
width: 175px;
padding: 25px;
padding-top: 105px;
line-height: 1.5em;
}
#about {
background: url('images/creditcard.png') no-repeat;
width: 225px;
height: 141px;
}

#about-contents {
margin-left: auto;
margin-right: auto;
text-align: left;
position: absolute;
width: 185px;
padding: 20px;
padding-top: 14px;
font-size: 11px;
color: #787878;
}

#inourbag a {
font-weight: bold;
color: #ffffff;
text-decoration: underline;
}

#inourbag img {
border: 2px solid #e6336d;
}

#sidebar .widgettitle {


}




#sidebar ul, #sidebar li {
list-style-type: none;
color: #ffffff;
margin-left: 0px;
padding-left: 0px;
}



p img {
padding: 0;
max-width: 100%;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}



/* Begin Form Elements */
select {
width: 130px;
}

#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}

#commentform textarea {
width: 100%;
padding: 2px;
}

#commentform #submit {
margin: 0;
float: right;
}
/* End Form Elements */



/* Begin Comments*/
.alt {
margin: 0;
padding: 10px;
}

.commentlist {
padding: 0;
text-align: justify;
}

.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}

.commentlist p {
margin: 10px 5px 10px 0;
}

#commentform p {
margin: 5px 0;
}

.nocomments {
text-align: center;
margin: 0;
padding: 0;
}

.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */


a img {
border: none;
}

[effpeetee]

This is the view of the two browsers on my PC.
I cannot see much difference. Probably I am misunderstanding you.

Frank

[Excavator]

Hello again girlstar,
Good job on the site so far! It's looking better.

[tip]When you post code in this forum, using the code tags (or the # button) it will put your code in a little scrolling box so it's not such a long scroll down to the next post.

Looking at your code it seems that when #content doesn't have more content than #sidebar, then main-back.jpg won't go down to the footer.

To fix that, put main-back.jpg as #page background - that way, no matter which div is longer #page will still get pushed down to the footer.

[Excavator]

Here's your CSS trimmed down a little. Might need a few tweaks yet as I'm sure I changed some things. /*
Theme Name: girlstar.org
Theme URI: http://girlstar.org/
Description: girlstar.org Wordpress Theme.
Version: 0.1
Author: Laura
Author URI: http://girlstar.org/
*/

html, body {
background: #e7346e;
font-family: Verdana, Arial, Sans-Serif;
font-size: 12px;
height: 100%;
}
* {
margin: 0;
padding: 0;
border: none;
}
#header-container {
background: #e7346e url('images/bg.jpg') repeat-x;
width: 100%;
height: 91px;
}
#header {
margin: 0 auto;
background: url('images/girlstar.png') no-repeat;
width: 800px;
height: 91px;
text-align: right;
color: #ffffff;
font-weight: bold;
}
#header a {
font-weight: bold;
color: #ffffff;
text-decoration: underline;
}
#page {
background: #e7346e;
margin: 0 auto;
width: 800px;
}
#content {
background: #ffffff url('images/main-back.jpg') repeat-y;
font-size: 12px;
text-align: justify;
padding: 30px;
width: 490px;
float: left;
}
#content h2 {
font-size: 16px;
}
#content h3 {
font-size: 11px;
color: #ababab;
}
#content a {
font-weight: bold;
color: #0094de;
text-decoration: none;
}
#content a:active, #content a:hover {
background: #e7346e url('images/bg.jpg') repeat-x;
color: #ffffff;
}
#sidebar {
background: #e7346e;
font-size: 12px;
padding: 0 0 30px 25px;
margin-left: 550px;
width: 220px;
}
#sidebar ul, #sidebar li {
list-style-type: none;
color: #ffffff;
}
#sidebar h3 {
font-size: 15px;
color: #ffffff;
text-align: center;
}
#sidebar a {
font-weight: bold;
color: #ffffff;
text-decoration: underline;
}
#sidebar a:active, #sidebar a:hover {
color: #0094de;
}
#footer-container {
background: #0094de;
width: 100%;
}
#footer {
background: url('images/girl.jpg') no-repeat right;
margin: 0 auto;
padding: 10px;
width: 780px;
color: #ffffff;
min-height: 300px; /*it's ok to use this but
be aware that not all browers
support min-width*/
}
#footer h3 {
font-size: 15px;
color: #ffffff;
}
#footer ul {
list-style: none;
}
#footer li {
display: inline;
color: #ffffff;
}
#line-footer {
background: #e7346e url('images/bg.jpg') repeat-x;
width: 100%;
height: 30px;
}
#inourbag {
background: url('images/inourbag.png') no-repeat;
width: 225px;
height: 300px;
}
#inourbag-contents {
margin: 0 auto;
text-align: center;
position: absolute; /*is this really needed? A float
might serve you better*/
width: 175px;
padding: 25px;
padding-top: 105px;
line-height: 1.5em;
}
#about {
margin-top: 20px;
background: url('images/creditcard.png') no-repeat;
width: 225px;
height: 141px;
}
#about-contents {
margin: 0 auto;
text-align: left;
position: absolute;
width: 185px;
padding: 20px;
padding-top: 14px;
font-size: 11px;
color: #787878;
}
#inourbag a {
font-weight: bold;
color: #ffffff;
text-decoration: underline;
}
#inourbag a:active, #inourbag a:hover {
color: #e7346e;
}
#inourbag img {
border: 2px solid #e6336d;
}
p img {
max-width: 100%;
}

img.centered {
display: block;
margin: 0 auto;
}

/*img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
These should be float: left; and float: right;*/
.alignright {
float: right;
}
.alignleft {
float: left
}