UPDATE: I figured out why it wasn't working - the element with a width of 100% was nested inside a div with the class "container," removing that solved the issue! (I don't have enough reputation to answer my own question yet, just wanted to update viewers that it's fixed now.)
I've been experimenting with the blueprint CSS framework on my own and I'm facing an issue with the following HTML/CSS code. The bigBox class doesn't stretch to 100% of the page width as intended (it fills up to the right but aligns with other content on the left).
Any suggestions on how to make this work correctly? Thank you!
<head>
<title>Hello</title>
<!-- screen is default blueprint framework file -->
<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection" />
<!-- import custom styles -->
<style>
#topmenu {float:right; margin-top: 50px; /*margin-right: -30px;*/}
#topmenu ul {list-style: none outside none; }
#topmenu ul li { display: inline; }
#topmenu ul li a { text-decoration: none;
padding: 5px;}
#topmenu .last { padding-right: 0px; }
#topmenu .current { font-weight: bold; }
.bigBox { width: 100%; position: absolute;
background-color: blue; height: 430px;
}
</style>
</head>
<body>
<div class="container">
<!-- logo -->
<div class="span-12">
<h1>Hello World</h1>
</div>
<!-- top menu -->
<div class="span-12 last">
<nav id="topmenu">
<ul>
<li class="current"><a href="">Option 1</a></li>
<li><a href="">Option 2</a></li>
<li><a href="">Option 3</a></li>
<li class="last"><a href="">Option 4</a></li>
</ul>
</nav>
</div>
<br class="clear"/>
<div class="bigBox">
<div class="span-14">
<h2>Content Left</h2>
</div>
<div class="span-10 last">
<h2>Content Right</h2>
</div>
</div>
</div>
</body>