The Basic Meeting List Toolbox

The [[BMLT_SIMPLE]] Shortcode Example 2

In this example, we’ll do exactly the same thing as in the first example, but with block (<div>) elements. I’ll skip the interim steps, and just show you the results (and the CSS used to achieve them).

The shortcode we’re using looks like this:

[<i></i>[bmlt_simple(1339674838##-##switcher=GetSearchResults&amp;services=1045<strong style="color: red;">&amp;block_mode=1</strong>)]]

.

[[bmlt_simple(1339674838##-##switcher=GetSearchResults&services=1045&block_mode=1)]]

The CSS for this is a bit more involved than for the <table>-based display:

div#bmlt_simple_shortcode_demo_div span.c_comdef_search_results_province,
div#bmlt_simple_shortcode_demo_div span.c_comdef_search_results_nation,
div#bmlt_simple_shortcode_demo_div span.c_comdef_search_results_zip
{
    display:none;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_format_div
{
    text-align:right;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meetings_div div.bmlt_alt_0
{
    background-color:#efefef;
}

div#bmlt_simple_shortcode_demo_div div
{
    font-family:"Papyrus";
    font-size:small;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_div
{
    display:table;
    width:100%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_div div
{
    float:left;
    padding:0.5em;
    display:table;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_town_div
{
    width:10%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_town_div
{
    width:10%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_town_div
{
    width:10%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_name_div
{
    width:20%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_time_div
{
    width:5%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_weekday_div
{
    width:5%;
}
    
div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_address_div
{
    width:30%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_format_div
{
    width:10%;
}

The

display:table;

rules tell the <div> elements to react to their content; not their context. That means they won’t let the content overflow, like regular <div> (

display:block;

) elements behave.