Skip to content

Instantly share code, notes, and snippets.

@danielres

danielres/wider.htm

Created February 9, 2012 16:37
Show Gist options
  • Save danielres/1780969 to your computer and use it in GitHub Desktop.
Save danielres/1780969 to your computer and use it in GitHub Desktop.
Download ZIP
CSS: using negative margin to make elements wider than their outside block
Raw
wider.htm
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
#wrapper {width:90%;}
#container {text-align:left; width:100%;}
.outer {position:relative; border-top:5px solid #000; margin-bottom:10px;}
.inner {display:block; position:relative; color:#000; border:1px solid #000;}
* html .inner {display:inline-block;}
.pc50 {width:50%;}
.mg50 {margin:0 -50px 0 -50px;}
.mgo100 {margin-left:100px;}
</style>
<title>CSS: using negative margin to make elements wider than their outside block</title>
</head>
<body>
<div id="container">
<div class="outer pc50 mgo100">
<div class="inner mg50">
<h2>Example 1</h2>
<p>This box is 50% PLUS 100px wide (50px + 50px).</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment