2 replies [Last post]
bpat1434
bpat1434's picture
Offline
Enthusiast
Last seen: 15 years 4 weeks ago
Timezone: GMT-5
Joined: 2004-09-17
Posts: 127
Points: 0

Hey guys. I'm sure there is something SMALL I'm missing, but I just can't figure it out. I'm trying to create a pseudo 3 column layout. It works 100% in Firefox 1.0, but in IE 6 it doens't. So, any help you can offer is great:

CSS Stylesheet

body{
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* Main Page Layout */
#container{
	margin: 0;
	padding: 0;
}

.wrapper{
	width: 800px;
	background: url(../images/wrapbackTile.jpg) repeat-y left;
	padding: 0;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Header */
/* Removed for space */

/* Main Content */
.mWrap{
	width: 775px;
	margin: 5px 0px 10px 4px;
	padding: 0;
	padding-bottom: 5px;
	border: none;
	padding-right: 10px;
	padding-left: 3px;
}

/* Item Wrap */
.itemWrap{
	width: 630px;
	margin: 0;
	padding: 0;
	border: none;
	float: left;
}


/* Date */
.date{
	width: 130px;
	border: none;
	margin: 0px 0px 0px 0px;
	padding: 0;
	float: left;
}

/* Entry */
.entry{
	width: 500px;
	float: left;
	text-align: left;
	border: none;
	margin: 0;
	padding: 0;
}

/* Right Sidebar */
.sideWrap{
	width: 120px;
	float: left;
	margin: 0;
	margin-left: 5px;
	padding: 0;
}

.quickLinks{
	border: 1px solid #000000;
	width: 120px;
	background-color: #FFFFFF;
	text-align: left;
}

/* Footer */
/* Removed for space */

HTML Code

<body>
<center>
<div id="container">
<div class="wrapper">
<div class="wrapperHead"></div>
<div class="mWrap">
<!-- Editable Feature -->
<div class="itemWrap">
<div class="date"><h2>September 30, 2004</h2></div>
<div class="entry"><h2>Title of Entry</h2>
<p>LBah blah blah blah blah</p>
<p class="posted">Brett Patterson</p></div>
</div>
<!-- End Editable Feature -->
</div>
<!-- Dynamic QuickLinks -->
<div class="sideWrap">
<div class="quickLinks">
<h2>Quick Links</h2>
<p>Blah blah<br />Blah Blah</p>
</div>
</div>
<br clear="all" />
<div class="wrapperFoot">
</div>
</div>
</div>
</center>
</body>
</html>

The problem is that the QuickLinks doesn't line up. It should be to the right of the content. In firefox it looks perfect, in IE it shows up underneath of the content. Any ideas as to why?

Viewable: http://umbcmamasboys.org/blog/index.html

~Brett

obsidian
Offline
Enthusiast
South Carolina
Last seen: 16 years 16 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

[SOLVED] Firefox fine... IE wrong. Quick fix?

ok, here we go, try to keep up Wink... i haven't worked through all the code, just enough to get it to work. first off, set your body { text-align: center }. then you can set your wrapper div like i have in the CSS below. also, get rid of your container div. it's not really doing anything. you already have margin and padding set on your wrapper, so you're just wasting space. then, float your links right instead of left, and give your main content div enough of a margin to clear the links. just look very carefully through the code below and see what changes i made from your post.

HTML:

<div id="wrapper">
<div class="wrapperHead"></div>
<div class="sideWrap">
<div class="quickLinks">
<h2>Quick Links</h2>
<p>Blah blah<br />Blah Blah</p>
</div>
</div>
<div class="mWrap">
<!-- Editable Feature -->
<div class="itemWrap">
<div class="date"><h2>September 30, 2004</h2></div>
<div class="entry"><h2>Title of Entry</h2>
<p>LBah blah blah blah blah</p>
<p class="posted">Brett Patterson</p></div>
</div>
<!-- End Editable Feature -->
</div>
<!-- Dynamic QuickLinks -->
<br clear="all" />
<div class="wrapperFoot">
</div>
</div>

then, apply this CSS and you'll see it line right up in FF and IE!

CSS:

 body{
   background-color: #FFFFFF;
   margin: 0;
   padding: 0;
   text-align: center;
}

/* Main Page Layout */
#wrapper{
   width: 800px;
   background: url(../images/wrapbackTile.jpg) repeat-y left;
   padding: 0;
   margin: 10px auto;
   text-align: left;
}

/* Header */
/* Removed for space */

/* Main Content */
.mWrap{
   margin: 5px 150px 10px 4px;
   padding: 0;
   padding-bottom: 5px;
   border: none;
   padding-right: 10px;
   padding-left: 3px;
}

/* Item Wrap */
.itemWrap{
   width: 630px;
   margin: 0;
   padding: 0;
   border: none;
   float: left;
}


/* Date */
.date{
   width: 130px;
   border: none;
   margin: 0px 0px 0px 0px;
   padding: 0;
   float: left;
}

/* Entry */
.entry{
   width: 500px;
   float: left;
   text-align: left;
   border: none;
   margin: 0;
   padding: 0;
}

/* Right Sidebar */
.sideWrap{
   width: 120px;
   float: right;
   margin: 0;
   margin-left: 5px;
   padding: 0;
}

.quickLinks{
   border: 1px solid #000000;
   width: 120px;
   background-color: #FFFFFF;
   text-align: left;
}

and that does it!

hope this helps.

You can't win, you can't lose, you can't break even. You can't even get out of the game!

bpat1434
bpat1434's picture
Offline
Enthusiast
Last seen: 15 years 4 weeks ago
Timezone: GMT-5
Joined: 2004-09-17
Posts: 127
Points: 0

[SOLVED] Firefox fine... IE wrong. Quick fix?

Thanks for the help obsidian.

Although your answer is..... interesting, I found my error prior to your post. If you look at my code, I have mWrap, and that spans all 775px and QuickLinks are outside of that when really they should be inside. Minor little error made by me in the wee hours of the mornin'.

Thanks for the help though.

~Brett

~Brett