1

I've constructed a nest of DIVs that make up a border between the header structure and the body (it will go in header.php of a WordPress blog that is based on Bootstrap 3). Reduced down to its basics, the 100x100px blocks always stay as 100px square blocks - when the available space is reduced to less than 100px, the blocks (that would normally overflow or be partially hidden) drop to the next line - which is hidden by an overflow:hidden declaration. Ultimately these little blocks will contain individual images which is why they cannot distort or partially overflow. So the code...

<div style="height:100px; width:100%; overflow: hidden;">
 <div style="max-width:1600px; margin: 0 auto;">
  <div style="width:50%; float:left;">
   <div style="height:100px; width:100px; float:right; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:right; background-color:red;"></div>
   <div style="height:100px; width:100px; float:right; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:right; background-color:red;"></div>
   <div style="height:100px; width:100px; float:right; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:right; background-color:red;"></div>
   <div style="height:100px; width:100px; float:right; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:right; background-color:red;"></div>
  </div>
  <div style="width:50%; float:right;">
   <div style="height:100px; width:100px; float:left; background-color:red;"></div>
   <div style="height:100px; width:100px; float:left; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:left; background-color:red;"></div>
   <div style="height:100px; width:100px; float:left; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:left; background-color:red;"></div>
   <div style="height:100px; width:100px; float:left; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:left; background-color:red;"></div>
   <div style="height:100px; width:100px; float:left; background-color:blue;"></div>
  </div>
 </div>
</div>`

edit: There are two sets of images (the ones on the left 'look' center and the ones on the right are mirrored to also 'look' center. So it is the endmost Divs that disappear on both sides. Hence the convoluted nest. Note that reversing the lefts and rights means the blocks could also disaapear from the middle.

Now, so far as I understand, Bootstrap is designed to traverse down the various screen widths of devices in column 'steps'. Whereas my code steps down in 100 pixel steps from the largest to the smallest screen/browser sizes.

So although I've taught myself the Bootstrap '12 column' approach, I'm not sure how to mark my code up correctly for canonical Bootstrap CSS. That's why there are no IDs or Classes in my code yet, and everything is inline.

Are there any Bootstrap gurus out there that can guide me?

cpz
  • 13
  • 3

1 Answers1

0

If I understand correctly, you want to show your 100px dives always in one line, without rearranging them as columns going one under another on smaller screens?

If that's your goal, you could put your 100px divs into one single column like this:

<div class="container">
<div class="row">
<div id="image-border" class="col-md-12 col-sm-12 col-xs-12">
your divs go here
</div>
</div>
</div>

and in CSS:

#image-border {
overflow-x: hidden;
}
oneday
  • 1,599
  • 5
  • 18
  • 29
  • 1
    Yes, sort of! I should have said that there are two sets of images (the ones on the left 'look' center and the ones on the right are mirrored to also look center. So it is the endmost Divs that disappear on both sides. Hence the convoluted nest. I'll edit my Q to add that. But thanks for the general idea. But I thought container was for fixed width and container-fluid was for fluid? – cpz Jun 03 '14 at 21:33
  • Here's the explanation for container vs. container-fluid: http://stackoverflow.com/questions/22262311/bootstrap-3-1-container-fluid-vs-container The way I see it, container is responsive, while container-fluid is fluid as the name suggests. Responsive vs. fluid - responsive will still change according to device width, but with breakpoints being specific pixel values (media queries). Fluid will simply change in a fluid way - being as wide as possible with any given device width. – oneday Jun 03 '14 at 21:41
  • Re-reading your comment, I'm not sure what you mean by "look center". Do you mean symmetrical? I'm also not sure what's your desired effect - what's the final look of the image-line that you would like to achieve in different screen sizes? Always symmetrical, no matter what's the screen-size? – oneday Jun 03 '14 at 21:51
  • Yes, always symmetrical, always centered, with the center of the row always staying static. So as the row width decreases, blocks drop down both edges. (so your overflow-x: hidden; also has to be overflow-y: hidden; - hence my generalized declaration. – cpz Jun 03 '14 at 22:43
  • And as for the 'looking room', each image will be an animal etc. So each 'animal' will face towards the center of the page. – cpz Jun 03 '14 at 22:45
  • Thanks for the 'fluid' link - the explanations on there finally made sense to me. So I've gone with container-fluid as I always need the div to be as wide as possible. I checked both in my code and container was consistently narrower than container-fluid. So now I've got my head around this, my code works and it is structured correctly. So I'm going to mark this as answered and extend my thanks to you for being so patient with me! – cpz Jun 03 '14 at 22:56