Align two elements horizontally

Question

I'm having problems placing two elements on the same line inside a container. I think I'd better to show you what I mean: http://fillobottosw.altervista.org/

After the expansion is performed, a sort of description is shown on the right side, but out the box, instead of being displayed inside the gray border. This is what I wrote down so far:

HTML CODE

<div class="tile">
                  <div id="main" width="509" style="float: left;">
                    <img src="images/rbf.png" width="509" height="188">                 
                  </div>

                  <div id="second" width="509" style="float: left;">
                     <p class="description">...text...</p>         
                  </div>

</div>

CSS CODE

p.description {
    display: none;
    color: #999;
    float:right; 
    margin-left: 520px;
}

.tile {
    border-style:solid;
    border-color: #999;
    border-width: 1px;

    height: 188px;
    width: 509px;

    margin-right: auto;
    margin-left: auto;

}

JAVASCRIPT (for expansion)

$('.tile').hover(   
  function() {  
        $(this).filter(':not(:animated)').animate({ width: '1100px'}, 600, 'swing',
             function() { $(this).find('.description').fadeIn(700);
         });
  },
  function() {  
     $(this).find('.description').hide();
     $(this).animate({width: '509px'}, 200);  

  }
);

Can you please tell me the error I keep doing? Thanks in advance

Answer 1

You have some issues with your HTML and CSS. For one, you have more than one element with the same id value. You should probably switch these to classes, or create a unique id value for each element. In your CSS, you are floating elements that probably don't need to be floated...and you are mixing inline styles with your external CSS. That's not exactly an issue, but it can cause headaches when trying to troubleshoot.

You're also getting some wonky behavior on your .hover event, because the event can fire multiple times before your animation sequences complete.

Here's a working example: http://jsfiddle.net/kbgsP/11/

HTML:

<div class="tile">
    <div class="main">
        <img src="http://placehold.it/509x188" width="509" height="188" alt="roboform">
    </div>
    <div id="boo" class="second">
        <p class="description"> <b>Roboform Bot</b>
            <br>This bot will speed up the addition process of new idetities. All the identities will match to a fake Italian person. If you don't know the usage of Roboform like to know that it's a software that fill registration fields for you. The trial version lasts for one day only. The full version is priced 4&euro;.</p>
        <div class="LinkButton" onclick="location.href='http://www.fillobottosw.altervista.org/apps/roboform/Roboform_Bot.exe';"></div>
    </div>
</div>

<div class="tile">
    <div class="main">
        <img src="http://placehold.it/509x188" width="509" height="188" alt="roboform">
    </div>
    <div id="boo" class="second">
        <p class="description"> <b>Roboform Bot</b>
            <br>This bot will speed up the addition process of new idetities. All the identities will match to a fake Italian person. If you don't know the usage of Roboform like to know that it's a software that fill registration fields for you. The trial version lasts for one day only. The full version is priced 4&euro;.</p>
        <div class="LinkButton" onclick="location.href='http://www.fillobottosw.altervista.org/apps/roboform/Roboform_Bot.exe';"></div>
    </div>
</div>

CSS:

.tile {
    overflow:hidden;
    border:1px solid #999;
    height: 188px;
    width: 509px;
    margin: 4px auto 12px auto;
    cursor: pointer;
}
.main, .second {float:left; width:509px;}
.second {margin-left: 12px;}
.second p {color: #999;}

JS:

// hide your descriptions
$('.description').hide();

// track whether or not the user really wants to see the description
var checkIntent = '';
// how long should the user have to hover before you show them the description (in milliseconds)
var waitTime = 500; 

// bind the hover event to all `.tile` elements.
$('.tile').hover(showDescription, hideDescription);

function showDescription(e){
    // wait X seconds before starting the animation sequence
    checkIntent = setTimeout(function() {
        var tile = $(e.currentTarget);
        var descriptionContainer = tile.find('.description');
        descriptionContainer.data('showing', true);
        tile.animate({width:'1100px'}, 300, function(){
            descriptionContainer.fadeIn(300);
        });
    }, waitTime);
}
function hideDescription(e){
    // if the user's mouse leaves the bound element and the timer has not fired,
    // cancel the animation sequence to show the description
    clearTimeout(checkIntent);
    var tile = $(e.currentTarget);
    var descriptionContainer = tile.find('.description');
    // if the description is showing - hide it
    if(descriptionContainer.data('showing')) {
        descriptionContainer.fadeOut(300, function(){
            tile.animate({width:'509px'}, 300);
        });
        descriptionContainer.data('showing',false);
    }

}

Answer 2

I could not repair your code, so I positioned .description as relative to .tile and it works.
And also I observed that if the content of .description is just one word, then your code seems to work. Dunno why. Anyway, here's the codepen page for edited code.

Answer 3

So just having a quick look, looks like you should add/remove the following

.second
{
  float: right;
  width: 509px;
}

Then remove

margin-left: 520px

from p.description so p.description should read

p.description
{
  display: none;
  color: #999;
  float: right;
}

Then add some padding or something to description to make it sit better,

Hope this helps some what :)

P.S

main div should be float left, second should be float right, no need for display: inline-block