Stacking and shifting divs in responsive

I'm trying to get the following full screen arrangement: http://jsfiddle.net/9gUP8/301/ But despite my best efforts when I punch in the css as I have it shown in jsfiddle on my actual css sheet I do not get the same results. The yellow block is staying left and the 1 & 2 pink blocks are right on top of each other with no padding. Or under it if I try to wrap the "row" class div in a div (which is what I want from the responsive design as the screen gets smaller, but not initially. I'm using a bootstrap-responsive.css would that be what's causing the issues? index.html

<div class="row">
            <div class="span8 stayright">
                <!-- SnapWidget -->
                <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NzcwfDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:770px; height: 770px" ></iframe>          
            </div>
            <div class="span4 stayleft">
                <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370">
            </div>
            <div class="span4 stayleft">
                <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370">
            </div>
            <div class="span8">
                <!-- SnapWidget -->
                <iframe src="http://snapwidget.com/in/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NzYwfDF8MXx8eWVzfDB8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:770px; height: 770px" ></iframe>
            </div>
            <div class="span4">
                <h2>Something</h2>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
            <div class="span4">
                <h2>Something Else</h2>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
        </div>

main.css

.stayright {
    float: right;
    height: 100%;
}

.stayleft {
    float: left;
    height: 100%;
}

Answers


If it's working in jsFiddle, but not in on your live enviroment, then you have CSS over-riding it. Using Chrome, right click on the problem area and choose "inspect element". From there, look for rules that do not have a strike-through. That would be your culprit.

On the other hand, you could just try this:

.stayright {
    float: right !important;
    height: 100% !important;
}

.stayleft {
    float: left !important;
    height: 100% !important;
}

Need Your Help

Aviary SDK, delegate issue

objective-c image-processing delegates uiimageview aviary

Ok, so I'm following the Aviary Documentation Tutorial on how to setup an app, however I'm getting two errors.

SQL nested Select…I think?

sql sql-server

I have 2 tables UnitProd and Unit.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.