how to get the site to not collapse with css


Tags: html,css

Problem :

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/



Solution :

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.


    CSS Howto..

    How to replicate {cursor: hand; cursor: pointer} in jQuery

    Bootstrap: navbar showing a line

    How to add text under every image?

    How to apply different styles based on the number oif col in a table

    How to I center my submit button in CSS?

    How to prevent HTML element moving when resizing window?

    How to get drop down menu sub lists to line up vertically

    How to know if an element is rendered?

    How to disable google translator plug in and set margin-top: to 0px for body element?

    How do I set image src based on li active status?

    How to create gradient background with CSS in Firefox < 3.6?

    How to load Different css everytime onload

    How to set just a percentage of a color in CSS?

    How to word wrap text in HTML?

    How to make combination of images responsive?

    How can I set the width of something in jquery based on variables?

    How to parse the default css property to inline style attribute

    How to make an element slide with the viewport as it scrolls?

    How to use text-overflow properly to format text?

    How to wrap div containing spans containing the text to be wrapped?

    CSS - How to use “vertical-align : middle” with a table near an image?

    Multiple buttons in CSS + Button with an image not showing properly

    How to create a CSS Animation that is responding to horizontal mouse movement? [closed]

    how to add two widths to one class in css

    CSS: How to use Transform property on a bootstrap grid class

    How to position a div differently for a specific page?

    Should be Simple: How to preserve data on a page of basic javascript/css/html when going to another page

    How to let Materialize use classes for dropdowns and not ID's?

    How do I display all the data in a MySQL table in a theme? [closed]

    How do I add custom fonts? [duplicate]