New version of markdown. Playing with stylesheet. Testing line breaks.

This commit is contained in:
root 2012-02-19 22:47:32 +01:00
parent 064c843119
commit b6d7777226
3 changed files with 404 additions and 504 deletions

View File

@ -35,8 +35,7 @@ function diaspora2bb($s) {
$s = str_replace('#','#',$s);
// Again: too many new lines
//$s = str_replace("\n",'<br />',$s);
$s = str_replace("\n",'<br />',$s);
$s = html2bbcode($s);
// $s = str_replace('&#42;','*',$s);

318
library/markdown.php Executable file → Normal file
View File

@ -3,8 +3,8 @@
# Markdown Extra - A text-to-HTML conversion tool for web writers
#
# PHP Markdown & Extra
# Copyright (c) 2004-2008 Michel Fortin
# <http://www.michelf.com/projects/php-markdown/>
# Copyright (c) 2004-2012 Michel Fortin
# <http://michelf.com/projects/php-markdown/>
#
# Original Markdown
# Copyright (c) 2004-2006 John Gruber
@ -12,8 +12,8 @@
#
define( 'MARKDOWN_VERSION', "1.0.1m" ); # Sat 21 Jun 2008
define( 'MARKDOWNEXTRA_VERSION', "1.2.3" ); # Wed 31 Dec 2008
define( 'MARKDOWN_VERSION', "1.0.1o" ); # Sun 8 Jan 2012
define( 'MARKDOWNEXTRA_VERSION', "1.2.5" ); # Sun 8 Jan 2012
#
@ -34,17 +34,6 @@ define( 'MARKDOWNEXTRA_VERSION', "1.2.3" ); # Wed 31 Dec 2008
@define( 'MARKDOWN_FN_LINK_CLASS', "" );
@define( 'MARKDOWN_FN_BACKLINK_CLASS', "" );
# Enables special handling for links pointing outside of the current domain.
@define( 'MARKDOWN_EL_ENABLE', true); # Use this feature at all?
@define( 'MARKDOWN_EL_LOCAL_DOMAIN', null); # Leave as null to autodetect
@define( 'MARKDOWN_EL_NEW_WINDOW', true); # Open link in a new browser?
@define( 'MARKDOWN_EL_CSS_CLASS', 'external'); # Leave as null for no class
# Enables header auto-self-linking.
@define( 'MARKDOWN_HA_ENABLE', true ); # Use this feature at all?
@define( 'MARKDOWN_HA_CLASS', 'hidden-selflink' ); # Leave as null for no class
@define( 'MARKDOWN_HA_TEXT', '&larr;' ); # The text to use as the link
#
# WordPress settings:
@ -80,16 +69,16 @@ function Markdown($text) {
/*
Plugin Name: Markdown Extra
Plugin URI: http://www.michelf.com/projects/php-markdown/
Description: <a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a> allows you to write using an easy-to-read, easy-to-write plain text format. Based on the original Perl version by <a href="http://daringfireball.net/">John Gruber</a>. <a href="http://www.michelf.com/projects/php-markdown/">More...</a>
Version: 1.2.2
Plugin URI: http://michelf.com/projects/php-markdown/
Description: <a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a> allows you to write using an easy-to-read, easy-to-write plain text format. Based on the original Perl version by <a href="http://daringfireball.net/">John Gruber</a>. <a href="http://michelf.com/projects/php-markdown/">More...</a>
Version: 1.2.5
Author: Michel Fortin
Author URI: http://www.michelf.com/
Author URI: http://michelf.com/
*/
if (isset($wp_version)) {
# More details about how it works here:
# <http://www.michelf.com/weblog/2005/wordpress-text-flow-vs-markdown/>
# <http://michelf.com/weblog/2005/wordpress-text-flow-vs-markdown/>
# Post content and excerpts
# - Remove WordPress paragraph generator.
@ -182,7 +171,7 @@ function identify_modifier_markdown() {
'authors' => 'Michel Fortin and John Gruber',
'licence' => 'GPL',
'version' => MARKDOWNEXTRA_VERSION,
'help' => '<a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a> allows you to write using an easy-to-read, easy-to-write plain text format. Based on the original Perl version by <a href="http://daringfireball.net/">John Gruber</a>. <a href="http://www.michelf.com/projects/php-markdown/">More...</a>',
'help' => '<a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a> allows you to write using an easy-to-read, easy-to-write plain text format. Based on the original Perl version by <a href="http://daringfireball.net/">John Gruber</a>. <a href="http://michelf.com/projects/php-markdown/">More...</a>',
);
}
@ -367,14 +356,18 @@ class Markdown_Parser {
[ ]*
\n? # maybe *one* newline
[ ]*
<?(\S+?)>? # url = $2
(?:
<(.+?)> # url = $2
|
(\S+?) # url = $3
)
[ ]*
\n? # maybe one newline
[ ]*
(?:
(?<=\s) # lookbehind for whitespace
["(]
(.*?) # title = $3
(.*?) # title = $4
[")]
[ ]*
)? # title is optional
@ -386,8 +379,9 @@ class Markdown_Parser {
}
function _stripLinkDefinitions_callback($matches) {
$link_id = strtolower($matches[1]);
$this->urls[$link_id] = $matches[2];
$this->titles[$link_id] =& $matches[3];
$url = $matches[2] == '' ? $matches[3] : $matches[2];
$this->urls[$link_id] = $url;
$this->titles[$link_id] =& $matches[4];
return ''; # String that will replace the block
}
@ -412,7 +406,7 @@ class Markdown_Parser {
#
$block_tags_a_re = 'ins|del';
$block_tags_b_re = 'p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|address|'.
'script|noscript|form|fieldset|iframe|math|textarea';
'script|noscript|form|fieldset|iframe|math';
# Regular expression for the content of a block tag.
$nested_tags_level = 4;
@ -710,37 +704,37 @@ class Markdown_Parser {
('.$this->nested_brackets_re.') # link text = $2
\]
\( # literal paren
[ ]*
[ \n]*
(?:
<(\S*)> # href = $3
<(.+?)> # href = $3
|
('.$this->nested_url_parenthesis_re.') # href = $4
)
[ ]*
[ \n]*
( # $5
([\'"]) # quote char = $6
(.*?) # Title = $7
\6 # matching quote
[ ]* # ignore any spaces/tabs between closing quote and )
[ \n]* # ignore any spaces/tabs between closing quote and )
)? # title is optional
\)
)
}xs',
array(&$this, '_DoAnchors_inline_callback'), $text);
array(&$this, '_doAnchors_inline_callback'), $text);
#
# Last, handle reference-style shortcuts: [link text]
# These must come last in case you've also got [link test][1]
# or [link test](/foo)
# These must come last in case you've also got [link text][1]
# or [link text](/foo)
#
// $text = preg_replace_callback('{
// ( # wrap whole match in $1
// \[
// ([^\[\]]+) # link text = $2; can\'t contain [ or ]
// \]
// )
// }xs',
// array(&$this, '_doAnchors_reference_callback'), $text);
$text = preg_replace_callback('{
( # wrap whole match in $1
\[
([^\[\]]+) # link text = $2; can\'t contain [ or ]
\]
)
}xs',
array(&$this, '_doAnchors_reference_callback'), $text);
$this->in_anchor = false;
return $text;
@ -835,18 +829,18 @@ class Markdown_Parser {
\]
\s? # One optional whitespace character
\( # literal paren
[ ]*
[ \n]*
(?:
<(\S*)> # src url = $3
|
('.$this->nested_url_parenthesis_re.') # src url = $4
)
[ ]*
[ \n]*
( # $5
([\'"]) # quote char = $6
(.*?) # title = $7
\6 # matching quote
[ ]*
[ \n]*
)? # title is optional
\)
)
@ -956,22 +950,25 @@ class Markdown_Parser {
# Re-usable patterns to match list item bullets and number markers:
$marker_ul_re = '[*+-]';
$marker_ol_re = '\d+[.]';
$marker_ol_re = '\d+[\.]';
$marker_any_re = "(?:$marker_ul_re|$marker_ol_re)";
$markers_relist = array($marker_ul_re, $marker_ol_re);
$markers_relist = array(
$marker_ul_re => $marker_ol_re,
$marker_ol_re => $marker_ul_re,
);
foreach ($markers_relist as $marker_re) {
foreach ($markers_relist as $marker_re => $other_marker_re) {
# Re-usable pattern to match any entirel ul or ol list:
$whole_list_re = '
( # $1 = whole list
( # $2
[ ]{0,'.$less_than_tab.'}
('.$marker_re.') # $3 = first list item marker
([ ]{0,'.$less_than_tab.'}) # $3 = number of spaces
('.$marker_re.') # $4 = first list item marker
[ ]+
)
(?s:.+?)
( # $4
( # $5
\z
|
\n{2,}
@ -980,6 +977,12 @@ class Markdown_Parser {
[ ]*
'.$marker_re.'[ ]+
)
|
(?= # Lookahead for another kind of list
\n
\3 # Must have the same indentation
'.$other_marker_re.'[ ]+
)
)
)
'; // mx
@ -1008,11 +1011,11 @@ class Markdown_Parser {
function _doLists_callback($matches) {
# Re-usable patterns to match list item bullets and number markers:
$marker_ul_re = '[*+-]';
$marker_ol_re = '\d+[.]';
$marker_ol_re = '\d+[\.]';
$marker_any_re = "(?:$marker_ul_re|$marker_ol_re)";
$list = $matches[1];
$list_type = preg_match("/$marker_ul_re/", $matches[3]) ? "ul" : "ol";
$list_type = preg_match("/$marker_ul_re/", $matches[4]) ? "ul" : "ol";
$marker_any_re = ( $list_type == "ul" ? $marker_ul_re : $marker_ol_re );
@ -1138,25 +1141,25 @@ class Markdown_Parser {
var $em_relist = array(
'' => '(?:(?<!\*)\*(?!\*)|(?<!_)_(?!_))(?=\S)(?![.,:;]\s)',
'*' => '(?<=\S)(?<!\*)\*(?!\*)',
'_' => '(?<=\S)(?<!_)_(?!_)',
'' => '(?:(?<!\*)\*(?!\*)|(?<!_)_(?!_))(?=\S|$)(?![\.,:;]\s)',
'*' => '(?<=\S|^)(?<!\*)\*(?!\*)',
'_' => '(?<=\S|^)(?<!_)_(?!_)',
);
var $strong_relist = array(
'' => '(?:(?<!\*)\*\*(?!\*)|(?<!_)__(?!_))(?=\S)(?![.,:;]\s)',
'**' => '(?<=\S)(?<!\*)\*\*(?!\*)',
'__' => '(?<=\S)(?<!_)__(?!_)',
'' => '(?:(?<!\*)\*\*(?!\*)|(?<!_)__(?!_))(?=\S|$)(?![\.,:;]\s)',
'**' => '(?<=\S|^)(?<!\*)\*\*(?!\*)',
'__' => '(?<=\S|^)(?<!_)__(?!_)',
);
var $em_strong_relist = array(
'' => '(?:(?<!\*)\*\*\*(?!\*)|(?<!_)___(?!_))(?=\S)(?![.,:;]\s)',
'***' => '(?<=\S)(?<!\*)\*\*\*(?!\*)',
'___' => '(?<=\S)(?<!_)___(?!_)',
'' => '(?:(?<!\*)\*\*\*(?!\*)|(?<!_)___(?!_))(?=\S|$)(?![\.,:;]\s)',
'***' => '(?<=\S|^)(?<!\*)\*\*\*(?!\*)',
'___' => '(?<=\S|^)(?<!_)___(?!_)',
);
var $em_strong_prepared_relist;
function prepareItalicsAndBold() {
#
# Prepare regular expressions for seraching emphasis tokens in any
# Prepare regular expressions for searching emphasis tokens in any
# context.
#
foreach ($this->em_relist as $em => $em_re) {
@ -1191,7 +1194,7 @@ class Markdown_Parser {
$token_re = $this->em_strong_prepared_relist["$em$strong"];
#
# Each loop iteration seach for the next emphasis token.
# Each loop iteration search for the next emphasis token.
# Each token is then passed to handleSpanToken.
#
$parts = preg_split($token_re, $text, 2, PREG_SPLIT_DELIM_CAPTURE);
@ -1324,7 +1327,7 @@ class Markdown_Parser {
# These leading spaces cause problem with <pre> content,
# so we need to fix that:
$bq = preg_replace_callback('{(\s*<pre>.+?</pre>)}sx',
array(&$this, '_DoBlockQuotes_callback2'), $bq);
array(&$this, '_doBlockQuotes_callback2'), $bq);
return "\n". $this->hashBlock("<blockquote>\n$bq\n</blockquote>")."\n\n";
}
@ -1446,9 +1449,17 @@ class Markdown_Parser {
<
(?:mailto:)?
(
[-.\w\x80-\xFF]+
(?:
[-!#$%&\'*+/=?^_`.{|}~\w\x80-\xFF]+
|
".*?"
)
\@
(?:
[-a-z0-9\x80-\xFF]+(\.[-a-z0-9\x80-\xFF]+)*\.[a-z]+
|
\[[\d.a-fA-F:]+\] # IPv4 & IPv6
)
)
>
}xi',
@ -1676,15 +1687,6 @@ class MarkdownExtra_Parser extends Markdown_Parser {
var $fn_link_class = MARKDOWN_FN_LINK_CLASS;
var $fn_backlink_class = MARKDOWN_FN_BACKLINK_CLASS;
var $el_enable = MARKDOWN_EL_ENABLE;
var $el_local_domain = MARKDOWN_EL_LOCAL_DOMAIN;
var $el_new_window = MARKDOWN_EL_NEW_WINDOW;
var $el_css_class = MARKDOWN_EL_CSS_CLASS;
var $ha_enable = MARKDOWN_HA_ENABLE;
var $ha_class = MARKDOWN_HA_CLASS;
var $ha_text = MARKDOWN_HA_TEXT;
# Predefined abbreviations.
var $predef_abbr = array();
@ -1697,10 +1699,6 @@ class MarkdownExtra_Parser extends Markdown_Parser {
# initialize the table.
$this->escape_chars .= ':|';
if ($this->el_local_domain === null) {
$this->el_local_domain = $_SERVER['SERVER_NAME'];
}
# Insert extra document, block, and span transformations.
# Parent constructor will do the sorting.
$this->document_gamut += array(
@ -1879,7 +1877,7 @@ class MarkdownExtra_Parser extends Markdown_Parser {
'. ( !$span ? ' # If not in span.
|
# Indented code block
(?> ^[ ]*\n? | \n[ ]*\n )
(?: ^[ ]*\n | ^ | \n[ ]*\n )
[ ]{'.($indent+4).'}[^\n]* \n
(?>
(?: [ ]{'.($indent+4).'}[^\n]* | [ ]* ) \n
@ -1887,7 +1885,7 @@ class MarkdownExtra_Parser extends Markdown_Parser {
|
# Fenced code block marker
(?> ^ | \n )
[ ]{'.($indent).'}~~~+[ ]*\n
[ ]{0,'.($indent).'}~~~+[ ]*\n
' : '' ). ' # End (if not is span).
)
}xs';
@ -1949,18 +1947,12 @@ class MarkdownExtra_Parser extends Markdown_Parser {
}
}
#
# Check for: Indented code block or fenced code block marker.
# Check for: Fenced code block marker.
#
else if ($tag{0} == "\n" || $tag{0} == "~") {
if ($tag{1} == "\n" || $tag{1} == " ") {
# Indented code block: pass it unchanged, will be handled
# later.
$parsed .= $tag;
}
else {
else if (preg_match('{^\n?[ ]{0,'.($indent+3).'}~}', $tag)) {
# Fenced code block marker: find matching end marker.
$tag_re = preg_quote(trim($tag));
if (preg_match('{^(?>.*\n)+?'.$tag_re.' *\n}', $text,
if (preg_match('{^(?>.*\n)+?[ ]{0,'.($indent).'}'.$tag_re.'[ ]*\n}', $text,
$matches))
{
# End marker found: pass text unchanged until marker.
@ -1972,6 +1964,13 @@ class MarkdownExtra_Parser extends Markdown_Parser {
$parsed .= $tag;
}
}
#
# Check for: Indented code block.
#
else if ($tag{0} == "\n" || $tag{0} == " ") {
# Indented code block: pass it unchanged, will be handled
# later.
$parsed .= $tag;
}
#
# Check for: Opening Block level tag or
@ -2220,81 +2219,6 @@ class MarkdownExtra_Parser extends Markdown_Parser {
return $this->hashPart($text, 'C');
}
function _doAnchors_inline_callback($matches) {
// $whole_match = $matches[1];
$link_text = $this->runSpanGamut($matches[2]);
$url = $matches[3] == '' ? $matches[4] : $matches[3];
$title =& $matches[7];
$url = $this->encodeAttribute($url);
$result = "<a href=\"$url\"";
if (isset($title)) {
$title = $this->encodeAttribute($title);
$result .= " title=\"$title\"";
}
if ($this->el_enable && preg_match('/^https?\:\/\//', $url) && !preg_match('/^https?\:\/\/'.$this->el_local_domain.'/', $url)) {
if ($this->el_new_window) {
$result .= ' target="_blank"';
}
if ($this->el_css_class) {
$result .= ' class="'.$this->el_css_class.'"';
}
}
$link_text = $this->runSpanGamut($link_text);
$result .= ">$link_text</a>";
return $this->hashPart($result);
}
function _doAnchors_reference_callback($matches) {
$whole_match = $matches[1];
$link_text = $matches[2];
$link_id =& $matches[3];
$result = '';
if ($link_id == "") {
# for shortcut links like [this][] or [this].
$link_id = $link_text;
}
# lower-case and turn embedded newlines into spaces
$link_id = strtolower($link_id);
$link_id = preg_replace('{[ ]?\n}', ' ', $link_id);
if (isset($this->urls[$link_id])) {
$url = $this->urls[$link_id];
$url = $this->encodeAttribute($url);
$result = "<a href=\"$url\"";
if ( isset( $this->titles[$link_id] ) ) {
$title = $this->titles[$link_id];
$title = $this->encodeAttribute($title);
$result .= " title=\"$title\"";
}
if ($this->el_enable && preg_match('/^https?\:\/\//', $url) && !preg_match('/^https?\:\/\/'.$this->el_local_domain.'/', $url)) {
if ($this->el_new_window) {
$result .= ' target="_blank"';
}
if ($this->el_css_class) {
$result .= ' class="'.$this->el_css_class.'"';
}
}
$link_text = $this->runSpanGamut($link_text);
$result .= ">$link_text</a>";
$result = $this->hashPart($result);
}
else {
$result = $whole_match;
}
return $result;
}
function doHeaders($text) {
#
@ -2345,36 +2269,15 @@ class MarkdownExtra_Parser extends Markdown_Parser {
return $matches[0];
$level = $matches[3]{0} == '=' ? 1 : 2;
$attr = $this->_doHeaders_attr($id =& $matches[2]);
$body = $this->runSpanGamut($matches[1]);
$body = $this->_doHeaders_selflink($id, $body);
$block = "<h$level$attr>$body</h$level>";
$block = "<h$level$attr>".$this->runSpanGamut($matches[1])."</h$level>";
return "\n" . $this->hashBlock($block) . "\n\n";
}
function _doHeaders_callback_atx($matches) {
$level = strlen($matches[1]);
$attr = $this->_doHeaders_attr($id =& $matches[3]);
$body = $this->runSpanGamut($matches[2]);
$body = $this->_doHeaders_selflink($id, $body);
$block = "<h$level$attr>$body</h$level>";
$block = "<h$level$attr>".$this->runSpanGamut($matches[2])."</h$level>";
return "\n" . $this->hashBlock($block) . "\n\n";
}
function _doHeaders_selflink($id, $body) {
if (!empty($id)) {
$link = '<a href="#'.$id.'"';
if ($this->ha_class) {
$link .= ' class="'.$this->ha_class.'"';
}
$link .= '>'.$this->ha_text.'</a>';
$body .= $link;
}
return $body;
}
function doTables($text) {
@ -2596,7 +2499,7 @@ class MarkdownExtra_Parser extends Markdown_Parser {
(?= \n+ # stop at next definition mark,
(?: # next term or end of text
[ ]{0,'.$less_than_tab.'} [:][ ] |
<dt | \z
<dt> | \z
)
)
}xm',
@ -2605,24 +2508,11 @@ class MarkdownExtra_Parser extends Markdown_Parser {
return $list_str;
}
function _processDefListItems_callback_dt($matches) {
$anchor_regexp = '/\{\#([-_:a-zA-Z0-9]+)\}/';
$terms = explode("\n", trim($matches[1]));
$text = '';
$id = array();
foreach ($terms as $term) {
$id = '';
if (preg_match($anchor_regexp, $term, $id) > 0) {
$term = preg_replace($anchor_regexp, '', $term);
$id = ' id="'.trim($id[1]).'"';
}
if (count($id) === 0) {
$id = '';
}
$term = $this->runSpanGamut(trim($term));
$text .= "\n<dt$id>" . $term . "</dt>";
$text .= "\n<dt>" . $term . "</dt>";
}
return $text . "\n";
}
@ -2698,19 +2588,19 @@ class MarkdownExtra_Parser extends Markdown_Parser {
# work in the middle of a word.
#
var $em_relist = array(
'' => '(?:(?<!\*)\*(?!\*)|(?<![a-zA-Z0-9_])_(?!_))(?=\S)(?![.,:;]\s)',
'*' => '(?<=\S)(?<!\*)\*(?!\*)',
'_' => '(?<=\S)(?<!_)_(?![a-zA-Z0-9_])',
'' => '(?:(?<!\*)\*(?!\*)|(?<![a-zA-Z0-9_])_(?!_))(?=\S|$)(?![\.,:;]\s)',
'*' => '(?<=\S|^)(?<!\*)\*(?!\*)',
'_' => '(?<=\S|^)(?<!_)_(?![a-zA-Z0-9_])',
);
var $strong_relist = array(
'' => '(?:(?<!\*)\*\*(?!\*)|(?<![a-zA-Z0-9_])__(?!_))(?=\S)(?![.,:;]\s)',
'**' => '(?<=\S)(?<!\*)\*\*(?!\*)',
'__' => '(?<=\S)(?<!_)__(?![a-zA-Z0-9_])',
'' => '(?:(?<!\*)\*\*(?!\*)|(?<![a-zA-Z0-9_])__(?!_))(?=\S|$)(?![\.,:;]\s)',
'**' => '(?<=\S|^)(?<!\*)\*\*(?!\*)',
'__' => '(?<=\S|^)(?<!_)__(?![a-zA-Z0-9_])',
);
var $em_strong_relist = array(
'' => '(?:(?<!\*)\*\*\*(?!\*)|(?<![a-zA-Z0-9_])___(?!_))(?=\S)(?![.,:;]\s)',
'***' => '(?<=\S)(?<!\*)\*\*\*(?!\*)',
'___' => '(?<=\S)(?<!_)___(?![a-zA-Z0-9_])',
'' => '(?:(?<!\*)\*\*\*(?!\*)|(?<![a-zA-Z0-9_])___(?!_))(?=\S|$)(?![\.,:;]\s)',
'***' => '(?<=\S|^)(?<!\*)\*\*\*(?!\*)',
'___' => '(?<=\S|^)(?<!_)___(?![a-zA-Z0-9_])',
);
@ -2808,7 +2698,7 @@ class MarkdownExtra_Parser extends Markdown_Parser {
if (!empty($this->footnotes_ordered)) {
$text .= "\n\n";
$text .= "<div class=\"footnotes\">\n";
$text .= "<hr". MARKDOWN_EMPTY_ELEMENT_SUFFIX ."\n";
$text .= "<hr". $this->empty_element_suffix ."\n";
$text .= "<ol>\n\n";
$attr = " rev=\"footnote\"";
@ -3002,8 +2892,8 @@ Copyright and License
---------------------
PHP Markdown & Extra
Copyright (c) 2004-2008 Michel Fortin
<http://www.michelf.com/>
Copyright (c) 2004-2009 Michel Fortin
<http://michelf.com/>
All rights reserved.
Based on Markdown

View File

@ -122,6 +122,17 @@
.next { background-position: -110px -60px;}
.tagged { background-position: -130px -60px;}
.attachtype {
display: block; width: 20px; height: 23px;
background-image: url('../../../images/content-types.png');
}
.type-video { background-position: 0px 0px; }
.type-image { background-position: -20px 0px; }
.type-audio { background-position: -40px 0px; }
.type-text { background-position: -60px 0px; }
.type-unkn { background-position: -80px 0px; }
.icon.drop, .icon.drophide {
float: left;
}