0

I have my page laid out like this:

[ ROW 1 Col 1 Col 2 ]

[ ROW 2 Col 1 ]

When I shrink the browser window (i.e. to test responsive behaviour) I want Row 1 to push Row 2 down to make room for its content, like this:

[ ROW 1 Col 1 ]

[ ROW 1 Col 2 ]

[ ROW 2 Col ]

The problem is that when I shrink the browser Row 2 stays fixed in place and the text in Col 2 of Row 1 floats down over the top of Row 2.

Does any one have an idea why this might be? As far as I can tell, it's standard for twitter bootstrap divs to fold vertically at breakpoints. Mine don't do that. I've spent a few hours reading and trying-out several things (clearfix, re-arranging the divs etc) , but can't figure it out.

Here is the code:

In the section I have:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

And the body:

<div class="container">

    <!-- ROW 1 -->
    <div class="row"> 

        <!-- COL 1 -->
        <div class="col-md-8">           
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        </div>

        <!-- COL 2 -->
        <div class="col-md-4"> 
             <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis</p>
        </div>

    </div>

    <!-- ROW 2 -->
    <div class="row"> 

        <!-- COL 1 -->
        <div class='col-md-12'> 
            <h1> Another section</h1> 

            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti</p>
        </div>
    </div>

</div> <!-- end of Container -->

It's probably staring me in the face, but I can't see it.

Many thanks.

I was asked for my CSS classes. I am using the latest version of Bootstrap plus the following:

.row {
  margin-right: 0;
  margin-left: 0;
 background-color: #FFFFFF;
}

.container{
  border:1px solid #000000;
}
AnotherOther
  • 107
  • 1
  • 7
  • I can't reproduce the problem you're describing with the code you've posted. It behaves correctly on all 4 browsers on my machine. Can you provide a fiddle or something demonstrating the issue? Also, I noticed that you're clearing the default negative margins on the row class. You may not want to do that. If you want to understand why, see my answer to this question: http://stackoverflow.com/questions/23899715/bootstrap-balancing-bullet-columns/23912463#23912463. It may help you to better understand how the grid works. – jme11 May 29 '14 at 00:36

3 Answers3

0

Can you post the CSS classes? I think what you're wanting can be achieved using the float attribute.


Try adding something like this to CSS and see if it's what you need

div.col-md-8 {
    width:50%;
}
div.col-md-4 {
    float:right;
}

and then put a < br/ > tag before your Div 2.

Ryan D
  • 1,023
  • 11
  • 16
0

Is your .row clearing? If not try this.

.row {
  clear:both;
  margin-right: 0;
  margin-left: 0;
  background-color: #FFFFFF;
}

Would have thought that it's already in bootStrap but you never know...

Yes this should be a comment but I haven't reached 50 rep yet.

moonunit7
  • 186
  • 2
  • 13
0

====================================

Update

(I tried to add this to my own question above but wasn't logged in hence the anonymous post. Sorry about that).

Thanks for the replies above, they helped.

I copied and pasted the example code from the Bootstrap CSS page and put my content in, but still had the same problem. This narrowed down the problem to the page header. In the header I had a background image set for the header div in my CSS file like this:

.banner{
   background-image: url('../img/banner1.jpg');
   height: 250px;
}

I changed that CSS to:

.banner{
   background-image: url('../img/banner1.jpg');
   background-size: cover;
}

This worked on a cell phone but not a tablet, so I changed col-xs-* to col-sm-* and now everything is fine.

Thanks to all.

AnotherOther
  • 107
  • 1
  • 7