I think I messed up Negative Margins

**Paul Jr** · 07-29-2004 01:49 PM

Yup. Somehow, some way, I think I did.

I can't post a link, since my computer is borken, and I can't zip the whole thing up, since I've got some PHP mixed in for my styles, but I can post the markup and css.

The problem is that the sidebar is not floating as it should be. It works just fine in everything but IE. When I first started and there was no styling it was copacetic -- but now it isn't, and I can't for the life of me figure out why.

Also, the images aren't being zipped, either.

**senobiah** · 07-29-2004 03:19 PM

Hi Paul,

If I'm correct the side bar should be floating on top, right?

If that's the case the you have to change the position. you have the side bar info last it should be positioned before the content.

here's what I mean:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>Website</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="author" content="Paul J. Rakoske Jr." />
<meta name="copyright" content="Copyright (c) 2004 Paul J. Rakoske Jr." />
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Website</h1></div>

<div id="global-nav">
<ul>
<li><a href="">Main</a></li>
<li><a href="">Blog Archive</a></li>
</ul>
</div>
<div id="side-bar" style="width: 208; height: 855">
<h2>Side Bar</h2>
<ul>
<li><a href="">Home</a></li>

<li><a href="">Contact</a></li>
</ul>
<h3>List O’ Blogs</h3>
<ul>
<li><a href="http://www.ryanbrill.com/" title="Ryan Brill">RyanBrill.com</a></li>
<li><a href="http://cmm.sonarocabinets.com/jona/" title="Jonathan Fenocci">Blue Panther</a></li>

<li><a href="http://www.thenamesdan.com/" title="Danial Tomasiewicz">The Name’s Dan</a></li>
<li><a href="http://www.1976design.com/blog" title="Dunstan Orchard">1976 Design</a></li>
<li><a href="http://www.meyerweb.com/" title="Eric Meyer">meyerweb</a></li>
<li><a href="http://www.zeldman.com/" title="Jeffrey Zeldman">The Daily Report</a></li>
<li><a href="http://www.binarybonsai.com/" title="Michael Heilemann">Binary Bonsai</a></li>
<li><a href="http://www.photomatt.net/" title="Matthew Mullenweg">Photo Matt</a></li>

<li><a href="http://www.stuffandnonsense.co.uk" title="Andy Clarke">Malarkey</a></li>
<li><a href="http://www.airbagindustries.com/" title="Greg Storey">Airbag</a></li>
<li><a href="http://www.7nights.com/asterisk/" title="D. Keith Robinson">Asterisk*</a></li>
<li><a href="http://www.sidesh0w.com/" title="Ethan Marcotte">sidesh0w.com</a></li>
<li><a href="http://www.9rules.com/whitespace/" title="Paul Scrivens">Whitespace</a></li>
<li><a href="http://www.andybudd.com/" title="Andy Budd">Andy Budd</a></li>

<li><a href="http://www.mezzoblue.com/" title="Dave Shea">mezzoblue</a></li>
<li><a href="http://www.cameronmoll.com/" title="Cameron Moll">Authentic Bordom</a></li>
<li><a href="http://www.whatdoiknow.org/" title="Todd Dominey">What Do I Know</a></li>
<li><a href="http://www.simplebits.com/" title="Dan Cederholm">SimpleBits</a></li>
<li><a href="http://www.stopdesign.com/" title="Douglas Bowman">Stopdesign</a></li>
<li><a href="http://www.hicksdesign.co.uk/journal/" title="Jon Hicks">// hicksdesign journal</a></li>

<li><a href="http://www.superfluousbanter.org/" title="Dan Rubin">SuperfluousBanter</a></li>
<li><a href="http://www.shauninman.com/" title="Shaun Inman">ShaunInman.com</a></li>
<li><a href="http://www.funkwit.com/" title="Paul Jamie Michael Cowan">funkwit.com</a></li>
<li><a href="http://www.thesneeze.com/" title="Steven ——">The Sneeze</a></li>
<li><a href="http://www.littleyellowdifferent.com/" title="Ernie ——">little. yellow. different.</a></li>
<li><a href="http://www.mightygirl.net/" title="Maggie Mason">Mighty Girl</a></li>

<li><a href="http://belledejour-uk.blogspot.com/" title="London Call Girl">Belle de Jour</a></li>
<li><a href="http://www.defectiveyeti.com/" title="Matthew Baldwin">defective yeti</a></li>
<li><a href="http://www.allinthehead.com/" title="Drew Mclellan">all in the <head></a></li>
<li><a href="http://www.themaninblue.com/" title="Cameron Adams">The Man in Blue</a></li>
<li><a href="http://www.joshcagan.com/" title="Josh Cagan">Why Don’t I Like You</a></li>

<li><a href="http://www.robotjohnny.com/" title="John Martz">RobotJohnny.com</a></li>
<li><a href="http://www.verybigdesign.com/verybigblog/" title="Jen ——">Very Big Blog</a></li>
<li><a href="http://www.tenth-muse.com/" title="Joelle ——">Tenth Muse</a></li>
<li><a href="http://www.popculturejunkmail.com/" title="Gael Fashingbauer Cooper">Pop Culture Junk Mail</a></li>
</ul>
<hr />
</div>

<div id="container">
<div id="content">

<div class="title">
<h2><a href="archive/2004/07/27/" title="Permanent link for this entry">Hendrerit euismod ex duis</a></h2>
<p>23 July 2004, 5:16 pm | <a href="archive/2004/07/23/short-title.php" title="View and post comments for this entry">Comments (0)</a></p>
</div>
<p>El dolore nulla eros exerci dolor veniam ex dolor vero ut vel in nostrud eum. Vero vulputate aliquip odio zzril eu consequat euismod Ut eu feugait velit nonummy blandit facilisis eros dolore facilisi lobortis. Illum in accumsan eum dolore molestie ut facilisis blandit molestie tation minim ullamcorper qui illum praesent praesent luptatum blandit vero sit at facilisis eros. Euismod at et duis commodo nonummy iusto in quis eros sed suscipit erat elit esse vero blandit eu sit dignissim consectetuer te minim eros praesent.</p>
<p>Hendrerit euismod ex duis duis facilisis ex eros vero hendrerit dolore et duis laoreet at tation ad exerci tincidunt lorem feugait ut ut in. Augue suscipit et quis in iriure hendrerit sed minim eum euismod eum euismod duis in ut dolore eu eros consequat. Nisl feugait luptatum consectetuer dolore illum sit duis nulla aliquip. Vel eros diam veniam dolore facilisis augue diam. Nulla quis blandit vulputate dolor et ea luptatum at minim nonummy facilisi in dolore dolor et aliquip dolore lorem ut augue.</p>

<p>Suscipit vel duis autem luptatum nulla Ut iriure vulputate nulla delenit minim ea. Nonummy dolor ea ullamcorper lorem esse magna facilisis in minim hendrerit luptatum commodo quis consectetuer euismod autem odio feugait iusto commodo. Ea duis dolor te ut feugait ut dolor ex eu blandit hendrerit in esse facilisi dolor dolor aliquam laoreet. Luptatum magna ea ut feugait vero in blandit vel laoreet te at in in ullamcorper dolore eum elit.</p>
<hr />
<div class="title">
<h2><a href="archive/2004/07/25/" title="Permanent link for this entry">Suscipit vel duis autem</a></h2>
<p>23 July 2004, 5:16 pm | <a href="archive/2004/07/23/short-title.php" title="View and post comments for this entry">Comments (0)</a></p>
</div>
<p>Hendrerit euismod ex duis duis facilisis ex eros vero hendrerit dolore et duis laoreet at tation ad exerci tincidunt lorem feugait ut ut in. Augue suscipit et quis in iriure hendrerit sed minim eum euismod eum euismod duis in ut dolore eu eros consequat. Nisl feugait luptatum consectetuer dolore illum sit duis nulla aliquip. Vel eros diam veniam dolore facilisis augue diam. Nulla quis blandit vulputate dolor et ea luptatum at minim nonummy facilisi in dolore dolor et aliquip dolore lorem ut augue.</p>

<p>Suscipit vel duis autem luptatum nulla Ut iriure vulputate nulla delenit minim ea. Nonummy dolor ea ullamcorper lorem esse magna facilisis in minim hendrerit luptatum commodo quis consectetuer euismod autem odio feugait iusto commodo. Ea duis dolor te ut feugait ut dolor ex eu blandit hendrerit in esse facilisi dolor dolor aliquam laoreet. Luptatum magna ea ut feugait vero in blandit vel laoreet te at in in ullamcorper dolore eum elit.</p>
<hr />
</div>
</div>

<div style="clear: both;" />
</div>
</body>
</html>

**Paul Jr** · 07-29-2004 03:22 PM

I could do that, but the whole point of Negative Margins is to keep the sidebar below the content in the source code. This keeps screenreaders and the like from having to read through all of those links to get to the content.

Originally posted by senobiah
If I'm correct the side bar should be floating on top, right?

If you look at the page in a browser other than IE (not sure if you have one), then you'll see the sidebar should be to the left of the content -- instead of blow as it is now.

**David Harrison** · 07-29-2004 04:58 PM

Try changing your styles to this (not all your styles obviously, that'd be stupid, use your common sense, my God some people are thick

):

Code:

#container {
	width: 100%;
	margin-left: -13.5em;
	float: right;
}
#content {
	margin-left: 13.5em;
}

**Paul Jr** · 07-29-2004 05:09 PM

Woohoo! C'mere so I can give you a hug, man.

**David Harrison** · 07-29-2004 05:12 PM

Originally posted by Paul Jr
Woohoo! C'mere so I can give you a hug, man.

No, that'd cost waaay too much for just one hug.

Happy to help.

**Paul Jr** · 07-29-2004 05:14 PM

Originally posted by lavalamp
No, that'd cost waaay too much for just one hug.

Ewwwwwwwww…

Originally posted by lavalamp
Happy to help.

Of course you are; I made a sacrifice for you (for those who don’t know: I killed my dog).

**David Harrison** · 07-29-2004 05:16 PM

Originally posted by Paul Jr
Ewwwwwwwww…

That's so not what I meant!

**Paul Jr** · 07-29-2004 05:19 PM

Originally posted by lavalamp
That's so not what I meant!

Oh, but I think it is what you meant.

***EDIT***
Incase anyone wants to know what went wrong, I didn’t fully read the Negative Margins article, which is why it didn’t work and I was wondering why it was called Negative Margins when there were no negative margins. So, chalk this one up to my stupidity.

Thread: I think I messed up Negative Margins

Thread Tools

Display

I think I messed up Negative Margins

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions