Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2011
    Location
    Detroit
    Posts
    81
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Post not sure how to summarize for title

    Hello friends and neighbors.

    I have several rows of four images in divs.
    I am not using tables as they cause problems with the responsiveness of the wordpress theme

    It is wordpress, and there are three shortcodes in each div.
    first one is a video popup, second is a table with technical info, third is a button.

    for unknown reasons row 5 only displays three images (divs) then the pattern resumes, then the pattern breaks again on row 8 + 9.
    row ten is normal but there should only be 9 rows, so the aforementioned glitches are causing a tenth row.

    I cannot figure out what i am doing wrong that is causing these breaks in the pattern.
    I'm sure it has to be something simple and stupid that i am overlooking.
    It is not a browser cache. I have eliminated that possibility.

    page is http://getstockfootage.com/?page_id=792

    if for some reason the problem is not appearing broken for you, here are screenshots:

    http://getstockfootage.com/screenshot1.png
    http://getstockfootage.com/screenshot2.png

    here is my code:

    Code:
    <div class="group-container"><div class="vid-container">[content_tooltip id="142" title="Abandoned Building With Exit Sign"]<br />Abandoned Building With Exit Sign<br /><br />[table id=13 /][wp_eStore_add_to_cart id=29]</div>
    
    <div class="vid-container">[content_tooltip id="146" title="Abandoned Factory Reveal"]<br />Abandoned Factory Reveal<br /><br />[table id=13 /][wp_eStore_add_to_cart id=30]</div>
    
    <div class="vid-container">[content_tooltip id="147" title="Abandoned House With Satellite Dish"]<br />Abandoned House With Satellite Dish<br /><br />[table id=13 /][wp_eStore_add_to_cart id=31]</div>
    
    <div class="vid-container">[content_tooltip id="441" title="People Mover in downtown Detroit"]<br />People Mover in downtown Detroit<br /><br />[table id=15 /][wp_eStore_add_to_cart id=56]</div></div>
    <!--end section 1-->
    <div class="group-container"><div class="vid-container">[content_tooltip id="154" title="Fire Truck Hoses Down Abandoned House semi-close"]<br />Fire Truck Hoses Down<br />Abandoned House[table id=13 /][wp_eStore_add_to_cart id=41]</div>
    <div class="vid-container">[content_tooltip id="149" title="Rubble of abandoned house"]<br />Rubble of abandoned house<br /><br />[table id=13 /][wp_eStore_add_to_cart id=33]</div>
    
    <div class="vid-container">[content_tooltip id="152" title="Fire Truck Urban Detroit"]<br />Fire Truck Urban Detroit<br /><br />[table id=13 /][wp_eStore_add_to_cart id=37]</div>
    
    <div class="vid-container">[content_tooltip id="151" title="Puddle Abandoned Factory"]<br />Puddle Abandoned Factory<br /><br />[table id=13 /][wp_eStore_add_to_cart id=35]</div></div>
    
    <!--end section 2-->
    
    <div class="group-container"><div class="vid-container">[content_tooltip id="150" title="Fire Hydrant Urban Decay"]<br />Fire Hydrant Urban Decay<br />[table id=13 /][wp_eStore_add_to_cart id=39]</div>
    
    <div class="vid-container">[content_tooltip id="153" title="Fallen Roof Abandoned House"]<br />Fallen Roof Abandoned House<br />[table id=13 /][wp_eStore_add_to_cart id=36]</div>
    
    <div class="vid-container">[content_tooltip id="148" title="Abandoned Burned Building"]<br />Abandoned Burned Building<br />[table id=13 /][wp_eStore_add_to_cart id=32]</div>
    
    <div class="vid-container">[content_tooltip id="155" title="exterior of abandoned building"]<br />Exterior of Abandoned Building<br />[table id=13 /][wp_eStore_add_to_cart id=34]</div></div>
    
    <!--end section 3-->
    
    <div class="group-container"><div class="vid-container">[content_tooltip id="157" title="Smoking House in Detroit"]<br />Smoking House in Detroit<br /><br />[table id=13 /][wp_eStore_add_to_cart id=38]</div>
    
    <div class="vid-container">[content_tooltip id="445" title="Transcendence Monument Detroit, white sky"]<br />Transcendence Monument Detroit,<br />white sky<br />[table id=15 /][wp_eStore_add_to_cart id=58]</div>
    
    <div class="vid-container">[content_tooltip id="443" title="People Mover passes over Detroit Street"]<br />People Mover passes<br />over Detroit Street<br />[table id=15 /][wp_eStore_add_to_cart id=57]</div>
    
    <div class="vid-container">[content_tooltip id="429" title="Detroit People Mover, streets and walking bridge"]<br />Detroit People Mover,<br />streets and walking bridge[table id=15 /][wp_eStore_add_to_cart id=59]</div></div>
    
    <!--end section 4-->
    
    <div class="group-container"><div class="vid-container">[content_tooltip id="353" title="Belle Isle Bridge"]<br />Belle Isle Bridge<br />Dolly Shot[table id=15 /][wp_eStore_add_to_cart id=44]</div>
    
    <div class="vid-container">[content_tooltip id="415" title="Busy street in foreground Detroit skyline in background"]<br />Busy street in foreground<br />Detroit skyline in background<br />[table id=15 /][wp_eStore_add_to_cart id=45]</div>
    
    <div class="vid-container">[content_tooltip id="437" title="Guardian Building and Campus Martius Detroit"]<br />Guardian Building and<br />Campus Martius Detroit<br />[table id=15 /][wp_eStore_add_to_cart id=45]</div>
    
    <div class="vid-container">[content_tooltip id="433" title="Detroit Train Station, Moody Overcast"]<br />Detroit Train Station,<br />Moody Overcast<br />[table id=15 /][wp_eStore_add_to_cart id=50]</div></div>
    
    <!--end section 5-->
    
    <div class="group-container"><div class="vid-container">[content_tooltip id="418" title="Detroit People Mover and tunnel to Renaissance Center"]<br />Detroit People Mover and<br />tunnel to Renaissance Center<br />[table id=15 /][wp_eStore_add_to_cart id=48]</div>
    
    <div class="vid-container">[content_tooltip id="435" title="Detroit viewed from a distance down a busy city street "]<br />Detroit viewed from a distance<br />down a busy city street<br />[table id=15 /][wp_eStore_add_to_cart id=52]</div>
    
    <div class="vid-container">[content_tooltip id="416" title="Detroit and Windsor from Belle Isle"]<br />Detroit and Windsor<br />from Belle Isle<br />[table id=15 /][wp_eStore_add_to_cart id=56]</div>
    
    <div class="vid-container">[content_tooltip id="431" title="Detroit Train Station Black and White"]<br />Detroit Train Station<br />Black and White<br />[table id=15 /][wp_eStore_add_to_cart id=49]</div></div>
    
    <!--end section 6-->
    
    <div class="group-container"><div class="vid-container">[content_tooltip id="439" title="Hart Plaza: Transcendence Tilt "]<br />Hart Plaza: Transcendence Tilt<br /><br />[table id=15 /][wp_eStore_add_to_cart id=55]</div>
    
    <div class="vid-container">[content_tooltip id="476" title="Wayne County Building Wide Angle Timlapse "]<br />Wayne County Building<br />Wide Angle Timlapse<br />[table id=15 /][wp_eStore_add_to_cart id=65]</div>
    
    <div class="vid-container">[content_tooltip id="417" title="Detroit Hart Plaza: Transcendance Monument The Ring"]<br />Detroit Hart Plaza: Transcendance <br />Monument "The Ring"<br />[table id=15 /][wp_eStore_add_to_cart id=47]</div>
    
    <div class="vid-container">[content_tooltip id="461" title="Detroit Train Station Sunny"]<br />Detroit Train Station Sunny<br /><br />[table id=15 /][wp_eStore_add_to_cart id=51]</div></div>
    
    <!--end section 7-->
    
    <div class="group-container"><div class="vid-container">[content_tooltip id="466" title="Guardian Building in Detroit, American flag waving"]<br />Guardian Building in Detroit,<br />American flag waving<br />[table id=15 /][wp_eStore_add_to_cart id=54]</div>
    
    <div class="vid-container">[content_tooltip id="468" title="Historic Tower Against Blue Sky"]<br />Historic Tower Against Blue Sky<br /><br />[table id=15 /][wp_eStore_add_to_cart id=62]</div>
    
    <div class="vid-container">[content_tooltip id="472" title="Clouds pass behind stone skyscraper against blue sky"]<br />Clouds pass behind stone skyscraper<br />against blue sky<br />[table id=15 /][wp_eStore_add_to_cart id=60]</div>
    
    <div class="vid-container">[content_tooltip id="475" title="Wayne County Building Wide Angle"]<br />Wayne County Building<br />Wide Angle<br />[table id=15 /][wp_eStore_add_to_cart id=64]</div></div>
    
    <!--end section 8-->
    
    <div class="group-container"><div class="vid-container">[content_tooltip id="474" title="Wayne County Building Tilt"]<br />Wayne County Building Tilt<br /><br />[table id=15 /][wp_eStore_add_to_cart id=63]</div>
    
    <div class="vid-container">[content_tooltip id="469" title="Historic Tower Against Blue Sky Timelapse"]<br />Historic Tower Against Blue Sky<br />Timelapse<br />[table id=15 /][wp_eStore_add_to_cart id=61]</div></div>
    
    <!--end section 9-->
    css referenced:

    Code:
    .group-container{ 
    	 text-align: center;
    	 padding-left: 20px;
    }
    
    .vid-container{
    	float: left;
    	padding-right:20px;
    	padding-bottom: 20px;
    }
    Last edited by Tim@DIM; 02-03-2014 at 09:48 PM.

  • #2
    New Coder
    Join Date
    Dec 2011
    Location
    Detroit
    Posts
    81
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Ok scratch all that.
    I figured it out.
    I knew it was something simple and stupid.

    all i had to do was add a div with the css rule of
    Code:
    clear: both;
    in between each section.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •