Home Mid-Page Widgets are misaligned

Community Forums Forums Design Tips and Tricks Home Mid-Page Widgets are misaligned

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  SoZo 1 year, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #16838

    ellenstevens
    Participant
    Post count: 32

    Using Prose.

    I’ve created a home.php file to support register widgets for the front page.

    In the middle section, I’ve added three widgets. Everything looks good, except the first and third sections are placed correctly (Left and Right) while the second section (center) is stacked under the first. What am I doing wrong?

    Example:

    Widget Left          Widget Right
    Widget Center

     

    Here’s the php code:
    // Wrap middle, so extra before div
    genesis_widget_area( ‘home-mid-l’, array( ‘before’ => ‘<div id=”home-mid-l”><div class=”home-mid-l widget-area”>’ ) );

    genesis_widget_area( ‘home-mid-m’, array( ‘before’ => ‘<div class=”home-mid-m widget-area”>’ ) );

    // End wrap middle, so extra close div
    genesis_widget_area( ‘home-mid-r’, array( ‘before’ => ‘<div class=”home-mid-r widget-area”>’, ‘after’ => ‘</div></div><!– home middle –>’ ) );

    Here’s the css code:

    #home-mid-l {
    overflow: hidden;
    padding: 15px 0;
    }

    .home-mid-l {
    float: left;
    width: 30%;
    }

    #home-mid-m {
    overflow: hidden;
    padding: 15px 0;
    }

    .home-mid-m {
    align: center;
    width: 30%;
    }

    .home-mid-r {
    float: right;
    width: 30%;
    }

    Any ideas?

    #16859

    SoZo
    Moderator
    Post count: 1573

    Please include a link to your site with all questions so that people can see what is going on.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16884

    ellenstevens
    Participant
    Post count: 32
    #16905

    SoZo
    Moderator
    Post count: 1573

    There’s no such property as “align: center;” in CSS (would be nice if there was). You need to use float, i.e. .home-mid-m { float: left; width: 300px; }


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.