0

I'm trying to create a layout with Bootstrap 3, which will be a repeating listing row:

  • On the left, a fixed-width and height image
  • On the right, an element containing multiple .row elements (each can vary in height)

I've got it partially working, but I've an issue where the first .row on the right has the same height as the image (the .cols inside are correct height). The other rows are then appearing below. I want to avoid defining absolute heights on each row.

I've put an example on jsfiddle: http://jsfiddle.net/yszAs/

Also, I'm not sure if its ok/recommended, but I've given the right-hand-side element a class of container, which appears to help resolve parts of rows extending beyond the container.

Any ideas what I'm doing wrong?

Update

Thanks for the suggestions, but they're not quite what I'm looking to achieve.

I've already got the part where I need the first column to be a fixed width, and the second to fill the remaining space working. There could be an issue with my implementation of this though.

The issue is that the height of the content in the first column is dictating the height of the first element in the second

After a bit more digging, it looks like the clearfix which appears to be automatically included in row elements is causing the issue - because the first column (the image) is floated, the element gets this height.

I've tried giving the first element in the right column a float: left, which solves the issue partially - I then have the problem of it being floated! (See http://jsfiddle.net/gKtE3/).

Any ideas?

Josh
  • 1,261
  • 2
  • 18
  • 34

2 Answers2

0

update

Based on your comments and new fiddle. Yes .row have a clearfix. You could undo the .row clearfix by setting the overflow to auto (https://stackoverflow.com/a/9770351/1596547). See: http://bootply.com/80492. CSS: .row{margin:0; overflow:auto;}

--end update--

Your problem is cause by the margin-left of -15px of the .row class (in combination with the float left).

Solution use .row {margin-left: 0px;} or set the left margin of your .info class to 195px;

If you allow to make your image responsive, consider nesting your columns like:

<div class="container">
    <div class="img-and-info row">
        <div class="col-xs-2">

        <img src="http://dummyimage.com/180x120/" class="img-responsive">
        </div>

        <div class="info col-xs-10">
            <div class="row">
                <div class="col-xs-6">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa elit, lacinia ac dui et. </p>
                </div>
                <div class="col-xs-6">Col 2</div>
            </div>
            <div class="row">
                <div class="col-xs-4">Col 1</div>
                <div class="col-xs-8">Col 2</div>
            </div>
            <div class="row">
                <div class="col-xs-9">Col 1</div>
                <div class="col-xs-3">Col 2</div>
            </div>
        </div>
    </div>
</div>
Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • Thanks, but I need the image to be a fixed size. I've updated the question with some more info. – Josh Sep 11 '13 at 22:54
  • I didn't get a notification of your update, so only just seen this. Your solution works nicely, thank you! – Josh Sep 14 '13 at 15:28
0

I believe this is what you want: 

<div class="container">
     <div class="row">
         <div class="img"></div>
                <div class="container col-xs-8">
                    <div class="row">
                        <div class="col-xs-6">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa elit, lacinia ac dui et. </p>
                        </div>
                        <div class="col-xs-6">Col 2</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-4">Col 1</div>
                        <div class="col-xs-8">Col 2</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-9">Col 1</div>
                        <div class="col-xs-3">Col 2</div>
                    </div>
                </div>
            </div>
</div>

http://jsfiddle.net/R4NbW/

Not sure what your intended behavior for the right side is, fixed width? variable width?

The above fiddle will break if the window isn't big enough to fit the right side. This happens when your fixed width image is greater than 100 minus the width of the right side percentage wise.

EddieFerrer
  • 3
  • 1
  • 2
  • Thanks, but I need the right side to be variable width - needs to use up all remaining space. I've updated the question with some more info. – Josh Sep 11 '13 at 22:55