# 2 columns, one getting bumped

**URL:** <https://forum.kirupa.com/t/2-columns-one-getting-bumped/256829>\
**Category:** web dev\
**Created:** [April 7, 2008, 7:30pm UTC](https://forum.kirupa.com/t/2-columns-one-getting-bumped/256829 "2008-04-07T19:30:25Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Suiside360](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/suiside360/32/85_2.png) [@Suiside360](https://forum.kirupa.com/u/Suiside360)\
**Post date:** [April 7, 2008, 7:30pm UTC](https://forum.kirupa.com/t/2-columns-one-getting-bumped/256829/1 "2008-04-07T19:30:25Z")

</div>

I’m working on [this](http://www.njecea.org) 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?

[http://www.njecea.org](http://www.njecea.org)

Here’s my CSS code. I’m developing in Wordpress.

```html
/* 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 */

```