I’m working on this website and I’m trying to stay away from using floats because they get all screwy in IE. The crap part is that I’m still getting somewhat of a floatish error where the one column sits over and under the other column. I need the two columns under the header graphic to be in the same row. What am I doing wrong exactly?
Here’s my CSS code. I’m developing in Wordpress.
/* Reset CSS - Fixes differences in browsers */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
strong, th, thead td, h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
cite, em, dfn {
font-style: italic;
}
code, kbd, samp, pre, tt, var, input[type='text'], textarea {
font-size: 92%;
font-family: monaco, "Lucida Console", courier, mono-space;
}
del {
text-decoration: line-through;
color: #666;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
}
a abbr, a acronym {
border: none;
}
abbr[title], acronym[title], dfn[title] {
cursor: help;
border-bottom: 1px solid #ccc;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
/* End Reset */
/* language specific quotes! */
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
:lang(af), :lang(nl), :lang(pl) { quotes: '\201E' '\201D' '\201A' '\2019'; }
:lang(bg), :lang(cs), :lang(de), :lang(is), :lang(lt), :lang(sk), :lang(sr), :lang(ro) { quotes: '\201E' '\201C' '\201A' '\2018'; }
:lang(da), :lang(hr) { quotes: '\00BB' '\00AB' '\203A' '\2039'; }
:lang(el), :lang(es), :lang(sq), :lang(tr) { quotes: '\00AB' '\00BB' '\2039' '\203A'; }
:lang(en-GB) { quotes: '\2018' '\2019' '\201C' '\201D'; }
:lang(fi), :lang(sv) { quotes: '\201D' '\201D' '\2019' '\2019'; }
:lang(fr) { quotes: '\ab\2005' '\2005\bb' '\2039\2005' '\2005\203a'; }
/* NOTE: safari refuses to support the quotes syntax. I only added the english language quotes for safari to save space. */
html[lang|='en'] q:before { content: '\201C'; }
html[lang|='en'] q:after { content: '\201D'; }
html[lang|='en'] q q:before { content: '\2018'; }
html[lang|='en'] q q:after { content: '\2019'; }
/* FORMS */
fieldset {
border: 1px solid #ccc;
}
legend {
background: #fff;
}
textarea, input[type='text'], select {
border: 1px solid #ccc;
background: #fff;
}
textarea:hover, input[type='text']:hover, input[type='password']:hover, select:hover {
border-color: #aaa;
}
textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus {
border-color: #888;
outline: 2px solid #ffffaa;
}
input, select {
cursor: pointer;
}
input[type='text'] {
cursor: text;
}
/* Begin General Typography and Body
------------------------------------------------*/
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Arial', Helvetica, Sans-Serif;
}
h1 { font-size: 2.6em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
/* HR */
ol, ul {
list-style: none;
}
hr {
display: block;
background: #aaa;
color: #aaa;
width: 100%;
height: 1px;
border: none;
}
/* COLORS */
a:link { text-decoration: underline; color: #0f93dd; }
a:visited { text-decoration: underline; color: #99c; }
a:hover { text-decoration: underline; color: #c33; }
a:active,
a:focus { text-decoration: underline; color: #000; }
code,
pre { color: #c33; } /* very optional, but still useful. W3C uses about the same colors for codes */
/* QUOTES */
blockquote {
border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
color: #666;
}
blockquote *:first-child:before {
content: "\201C";
}
blockquote *:first-child:after {
content: "\201D";
}
/* Containers
------------------------------------------------*/
#container {
text-align: left;
margin: 0px;
width: 975px;
}
/* Navigation and Search Box
------------------------------------------------*/
#nav {
color: #333333;
font-style: normal;
position: relative;
margin-left: 220px;
height: 134px;
width: 718px;
}
/* End Navigation and Search Box*/
/* Header
------------------------------------------------*/
#headerImg {
position: relative;
display: block;
margin-bottom: 10px;
background: url('images/logo.gif') no-repeat;
width: 110px;
height: 121px;
}
#headerImg .description {
font-size: 1.2em;
text-align: center;
}
a.headVanish {
position: absolute;
display: block;
width: 110px;
height: 121px;
text-indent: -999em;
top: 0px;
left: -4px;
}
/* End Header */
/* PrimaryContent
------------------------------------------------*/
#primaryContent{
position: absolute;
top: 12px;
left: 240px;
}
/* End PrimaryContent */
/* Sidebar
------------------------------------------------*/
#sidebar {
font-size: 1.4em;
color: #0f93dd;
line-height: 1.6em;
position: fixed;
top: 19px;
left: 25px;
margin: 0;
padding-left: 10px;
width: 214px;
height: 100%;
}
#sidebar ul {
}
#sidebar ul li,
#sidebar ul li li, {
list-style: none;
text-decoration: none;
}
/* End Sidebar */
/* Footer
------------------------------------------------*/
#footer {
margin: 30px 0 20px 0;
clear: both;
height: 1%;
text-align: center;
}
.clear {
clear: both;
height: 1%;
}
/* End Containers */
/* --------- MISSION PAGE --------- */
#missionHeader {
font-family: 'Helvetica', sans-serif;
color: #006a94;
width: 400px;
height: 258px;
padding: 0px 15px 0 325px;
background: url('images/header.jpg') no-repeat;
margin-bottom: 20px;
}
#missionHeader h1 {
padding-top: 40px;
}
#missionHeader h2 {
font-family: 'Helvetica', Arial,sans-serif;
color: #db0000;
margin-top: 20px;
}
#missionHeader ul li {
list-style: circle;
margin: 10px 0 0 10px;
font-weight: bold;
font-size: 1.2em;
color: #006a94;
}
#petition {
position: relative;
left: 16px;
display: block;
background: url('images/petition.gif') repeat-y;
width: 710px;
height: 92px;
margin-bottom: 20px;
}
/* ------- END MISSION PAGE ------- */
/* News and Events
------------------------------------------------*/
#newsColumn {
position: relative;
left: 16px;
width: 290px;
padding: 0 10px 0 0px;
}
#newsLabel{
color: #dd0f10;
font-family: 'Helvetica',Arial, sans-serif;
background: url('images/lbl_pat.gif') repeat-x;
width: 288px;
height: 31px;
padding: 24px 0 0 12px;
}
#eventsColumn {
position: relative;
left: 314px;
width: 382px;
padding: 0 10px 0 12px
}
#eventsLabel{
color: #dd0f10;
font-family: 'Helvetica',Arial, sans-serif;
background: url('images/lbl_pat.gif') repeat-x;
width: 388px;
height: 31px;
padding: 24px 0 0 12px;
}
/* Entry and Post
------------------------------------------------*/
.post {
width: 300px;
background: url('images/patBgPost.gif') repeat-x white;
background-position: bottom left;
margin: 0 0 25px 0;
padding-bottom: 10px;
}
.post h1 {
width: 701px;
color: white;
padding: 10px;
background: url('images/patLabel.gif') repeat-x #c62127;
background-position: bottom left;
border: 1px solid #CCCCCC;
}
.post h1 a {
color: white;
text-decoration: none;
}
.post h1 a:hover {
color: #CCCCCC;
text-decoration: none;
}
.post h2 {
color: #333333;
padding-left: 0px;
}
.post ul li{
list-style-type:circle;
}
.entry p {
font-size: 1.2em;
line-height: 1.5em;
text-align: justify;
margin: 10px 20px 10px 10px;
}
.entry h4 {
color: #7d797a;
margin: 20px 20px 10px 10px;
}
.entry strong {
color: #c62127;
}
.postMetaData {
text-align: left;
margin: 10px 0 10px 10px;
font-size: 2em;
color: white;
}
.navigation {
font-size: 14px;
padding-bottom: 10px;
margin: 10px 10px 20px 20px;
}
/* End Entry and Post */
/* Begin Lists
------------------------------------------------*/
html>body .entry ul {
font-size: 1.4em;
color: #333333;
padding: 5px 10px 5px 50px;
list-style: none;
text-indent: 10px;
}
html>body .entry li {
margin: 7px 0 8px 10px;
}
.entry ol {
font-size: 1.4em;
padding: 0 0 0 35px;
margin: 0;
color: #333333;
}
.entry ol li {
list-style-position: outside;
list-style-type: decimal;
}
.postMetaData ul, .postMetaData li {
display: inline;
list-style-type: none;
list-style-image: none;
}
/* End List */
/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}
/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */
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
}
/* End Images */
/* 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 */
