Question

is there a way to change the CSS on this, so when the window is resized the text doesnt collapse and a horizontal scroll bar is created? I tried adding a wrapper div and setting the width on it, but then the full background effect with the images and colors collapses as well.

http://2012dminominees.edulence.com/

Answer 1

Couple of changes in your CSS/HTML:

I’d add the ribbon inside the .inner div

<div id="header">
    <div class="inner">
        <img src="./nominee hub_files/DMI-logo.png" height="140px" width="140px">
        <h1>nominee hub</h1>        
        <div id="ribbon">
            <img src="./nominee hub_files/ribbon.png">
        </div>
    </div><!--END inner -->
</div><!--END header -->

You’re on the right track, just a couple tweaks:

Keeps ribbon in the right place:

.inner {
    width: 1050px;
    margin: 0 auto;
    min-width: 1050px;
    position:relative;
}

Overlap issues:

#ribbon {
    top:0;
    position: absolute;
    right: 200px;
    z-index:0;
}

#header h1 {
    text-transform: lowercase;
    font-size: 72px;
    margin-left: 197px;
    color: #f8f9fa;
    position:relative;
    z-index:1;
}

Keeps middle image centered:

#main {
    padding-top: 369px;
    padding-bottom: 27px;
    background: url('main-bg.png') 50% -1px no-repeat;
}

Basically, this keeps the content of your site with a width of 1050px, and eliminates the bars when the browser window is wider than that, while keeping the page looking the same.