CODEWITHSUNDEEP
htmlcss
Dottsie
Dottsie

Reputation: 49

positioning div using float

I have a figcaption that I want to position divs inside. I'm new to css and can't figure out how to do this. I know there's a float method but can't get my head around it. I've been at this for days now and am really stuck :( Here's the fiddle(I know it doesn't work but I don't have a way of linking the external css): http://jsfiddle.net/dottsie/6uhw8c1p/

    <link rel="stylesheet" type="text/css" href="css/component.css" />
                <header>
                    <h1>Caption Hover Effects</h1>
                </header>

                <ul class="grid cs-style-2">

                    <li>
                           <figure>
                                <img src="http://www.ruggit.dk/media/catalog/product/cache/1/image/650x/040ec09b1e35df139433887a97daa66f/_/m/_mg_9746_1.jpg" alt="img04">


          <figcaption>   

              <h3></h3>

                 <div>    <div id="share-buttons>                                                                                                                 <div id="facebook share-buttons"></div>
                                                                                  <div id="twitter share-buttons"></div>
                                                                          <div id="pinterest share-buttons"></div>
                                                                         <div id="google_plus share-buttons"></div>
                                                       </div>
             </figcaption>
                        </figure>

                    </li>

Upvotes: 3

Views: 77

Answers (2)

Glenn Holland
Glenn Holland

Reputation: 580

The first thing to notice is that you have used id's for your buttons. ID attributes are normally unique, it looks as though you meant class instead though owing to your CSS calling them by . instead of # 

<div id="facebook">

// This is accessed in css by #facebook{float:left} 

<div class="facebook"> 

// This is accessed in css by .facebook{float:left}

If you are ever going to have more than one of an item on a page it is a class of item. Remember ID is unique.

Following that you can use float to get your objects to try and position themselves as far to one side as possible: 

_________________________________________________
| A  | B  | C  | D  |                           |
|____|____|____|____|                           |
|_______________________________________________|

Here A B C and D are all floated left float:left, and push up as tight as the can. 

_________________________________________________
|                           | Z  | Y  | X  | W  |
|                           |____|____|____|____|
|_______________________________________________|

Here W X Y and Z are all floated right float:right, and push up as tight as the can.

If you want them stacked vertically we can use clear. Clear stops there from being any floated items that are on the side that is stated, the upshot of that is that it will push things down below if its not allowed to have something on that side: 

_________________________________________________
| A  |                                          |
|____|    |                                     |
| B  |  <-'                                     |
|____|    |                                     |
| c  |  <-'                                     |
|____|    |                                     |
| D  |  <-'                                     |
|____|                                          |
|                                               |
|_______________________________________________|

So in this case using clear:left on B forces it onto a new line below, clearing C forces D down etc. We don't want anything unexpected happening with wrapping so it is worth clearing both sides just for completeness so using clear:both will ensure that no two floated buttons are on the same line.

When your code has been condensed, it would look like this. 

<header>
    <h1>Caption Hover Effects</h1>
</header>

<ul class="grid cs-style-2">

    <li>
        <figure>
            <img src="http://domain/imagefile.jpc"/>
            <figcaption>                                      
              <div>
                  <div class="facebook share-buttons"></div>
                  <div class="twitter share-buttons"></div>
                  <div class="pinterest share-buttons"></div>
                  <div class="google_plus share-buttons"></div>
              </div>
            </figcaption>
        </figure>                                
    </li>
</ul>

With this CSS for all share-buttons 

.share-buttons{ 
    float:left;
    clear:both;
    height:32px;
    padding:2px;
    width:32px;
}

and the individual buttons as such

.share-buttons.facebook {
    background: url('images/facebook.png') no-repeat;
}
.share-buttons.twitter {
    background: url('images/twitter.png') no-repeat;
}
.share-buttons.pinterest {
    background: url('images/pinterest.png') no-repeat;
}
.share-buttons.google_plus {
    background: url('images/google_plus.png') no-repeat;
}

Upvotes: 3

John
John

Reputation: 312

First off, ids need to be unique, so I would change "share-buttons" to a class instead. Next, I see that you have three divs for social media icons, each with "share-buttons", but they are also wrapped in a wrapper with the same "share-buttons". I would remove that wrapper since you already have a wrapper div around all of that. Finally, give the newly created class "share-buttons" a "float: left;" and your images should align themselves like you're looking for. Also, make sure you clear your float "clear:both;" after this div.

Upvotes: 0

Related Questions