How to make these video links on the same line?

Question

Please view the Wordpress video gallery here: http://milabalami.com

I want the two videos to be on the same line. They are both in the same paragraph and I have not added a <br> tag. As far as I know, the CSS should be correct, but I am suspecting that I am missing something here? Anyone who can solve this puzzle for me?

score 1 · Accepted Answer · answered Jan 16 '11 at 13:52

1

You can simply do this:

.floatbox {
    float: left;
}

answered Jan 16 '11 at 13:52

David Tang

92,262
30
167
149

Yay that worked, thank you! I will accept this as the answer in a minute. – StarTrekkier Jan 16 '11 at 13:55
@StarTrekkier, you're welcome. It helps to use FireBug or Chrome's developer tools, to inspect element. It will automatically highlight the dimensions of whichever element you hover over, and from there the problem is pretty easy to spot. – David Tang Jan 16 '11 at 14:01
@StarTrekkier, ah I forgot to mention this: http://www.quirksmode.org/css/clearing.html – David Tang Jan 16 '11 at 14:10
@StarTrekkier, basically floating elements causes the container element's dimensions to shrink as if the content wasn't there. To fix this, you need to add to the container element: `overflow: auto;`, and some width (if you don't have a width already specified for the container, then use `width: 100%`). The width rule is just to fix an IE bug. – David Tang Jan 16 '11 at 14:17

score 1 · Answer 2 · answered Jan 16 '11 at 13:55

The problem is that in you <a> you have a <span> that has the style display:block

you can solve this by either floating you <a>:

.floatbox {
    float: left;
}

alternatively, by styling you <a> with display:inline-block

.floatbox {
    display:inline-block;
}

How to make these video links on the same line?

2 Answers2