JSFiddle - React, Tailwind, and code Playground

by ericjohannsen

HTML

<div id="wrapper">
    <header id="header">Blah header blah</header>    
    <section id="middle">
        <div id="contentwrapper">
            <div id="contentcolumn">
                <div id="simTabs">
                    This is the main content.<br/>It should NOT push down the menu on the left.<br/>
                    This is some long text to see what happens to the width of this div... does it
                    get pushed out by the width:2000px style or does it wrap?
                </div>
            </div>
        </div>
        <aside id="aside">
            This is a fixed width menu on the left-hand side.
        </aside>
    </section>
</div>

CSS

#wrapper {
    width:100%;
}

#header {
    display:block;
    height:20px;
    background-color:orange;
}

#contentwrapper {
    float:left;
    width:100%;
    background-color:lightgreen;
}

#contentcolumn {
    margin-left:50px;
    background-color:lightblue;
}

#aside {
    float:left;
    width:50px;
    margin-left:-100%;    
    background-color:coral;
}

#simTabs {
    width:2000px;    
}