CODEWITHSUNDEEP
csshtmltwitter-bootstrappositioning
Mister R2
Mister R2

Reputation: 881

Maining Child Div Positioning

I'm having trouble finding a solution to my issue.

I'm working in the footer of a page. From left to right in a single row, there's a disclaimer div, then a parent div containing a FaceBook and a Twitter button.

Blue ~ disclaimer div, pink ~ parent div, red ~ the twitter button's color; the facebook button does not have a separate color

(Blue ~ disclaimer div, pink ~ parent div, red ~ the twitter button's color; the facebook button does not have a separate color).
The goal is for the Twitter button to always be on the right of the FaceBook button.

The disclaimer div is set up be a minimum size (the page is using Twitter Bootstrap), so when it is resized small enough the parent div of the buttons is moved to the next line below the disclaimer div.
The issue I'm running into is that when this button-parent div moves down, the Twitter button pops out of the parent div and is laid out below the FaceBook button in a column.

This is what the issue looks like on the page

The code for the footer itself:

<div class="container">
  <div id="footer" class="row">
    <div class="span9 footer-leftspan">
       <xsl:copy-of select="data/footer-content/entry/content" />
    </div>

    <div class="row">
      <div class="span3 social-media-footer">
        <div id='face' class="span1">

      <!-- FaceBook Button -->
          <a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
      <img id="fb-btn" class="social-img" src="/f.svg" alt="...." />
      </a>

    </div>

        <!-- Twitter Button -->
    <div id='twitt' class="span1">
      <a class="button-link" href="https://twitter.com/...." target="_blank">
      <img id="twitt-btn" class="social-img" src="/t.svg" alt="...." />
      </a>
    </div>

      </div>
    </div>

  </div>
</div>

Aside from the arbitrary coloring, there are no specific CSS rules on the buttons or their parent div.
I really have no idea on this one, and the only seemingly viable solutions I can find involve position the buttons with absolute or fixed, neither of which keep them in their parent in the footer how I'd like.
My primary goal that I'd like help accomplishing is just getting the Twitter button to stay in the parent div on resize.
Any ideas? And thanks ahead of time!

Upvotes: 0

Views: 112

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25495

See if this will work for you: http://jsfiddle.net/panchroma/yX4ZV/

I have edited your HTML a little so that the twitter and facebook icons are in the same span instead of seperate spans in a nested grid. Doing this solved the question for desktop and smartphone window sizes, but not for tablets.

To solve for tablets I wrapped the two icons in a class which I force to have a min-width:

HTML 

<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
   <xsl:copy-of select="data/footer-content/entry/content" />
</div> <!-- close span9 -->

  <div class="span3 social-media-footer">


<div class="social-wrapper">
  <!-- FaceBook Button -->
      <a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
  <img id="fb-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/facebook.jpg" alt="...." />
  </a>

    <!-- Twitter Button -->

  <a class="button-link" href="https://twitter.com/...." target="_blank">
  <img id="twitt-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/twitter.jpg" alt="...." />
  </a>
</div><!-- close social-wrapper -->


  </div> <!-- close span3 -->
</div> <!-- close row -->


</div><!-- close container -->

CSS 

.social-wrapper{
min-width:185px !important; /* adjust as necessary depending on icon sizes */
}

Good luck!

Upvotes: 1

Related Questions