WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Positioning custom widgets (5 posts)

  1. beachdogz
    Member
    Posted 11 months ago #

    I successfully created 3 custom widget areas to go on the home page of my site. Theme is twenty twelve and I am working with a child theme. Link is here:
    http://js.beachdogz.com/

    I want the three custom widgets to be exactly where they are, below the main content and above the footer. So far, so good. But I want them to line up horizontally, not stack as they do. I added styles that I thought would take care of it:

    textwidget	{
    	width: 30%;
    	line-height: 1.2;
    	{
    
    #text-2  {
    	float: left;
    	clear: none;
    	}
    
    #text-4 {
    	float: right;
    	clear: none;
    	}

    The CSS for width and line-height are fine, but the CSS for the floats on the first and third text widgets are not working. Many thanks in advance for any suggestions to fix it.

  2. Hakkim P Ahammed
    Member
    Posted 11 months ago #

    When I had a quick look on the HTML structure of the section, it seems like HTML tags are not closed properly. Some tags gone inside of some another. So its not easy to fix via CSS only, you should make the HTML structure correct. See example:- all the other two widget areas (custom-widget-area2 and custom-widget-area3) coming inside the first 'custom-widget-area' . All those should be separate, I think.

  3. beachdogz
    Member
    Posted 11 months ago #

    Thank you so much for your response. I did clean up the messy HTML but it didn't help. Here's how it looks now:

    <div id="custom-widget-area">
       			<?php dynamic_sidebar( 'Custom Widget Area' ); ?>
       			</div>
       		<div id="custom-widget-area2">
       			<?php dynamic_sidebar( 'Custom Area Two' ); ?>
       			</div>
       		<div id="custom-widget-area3">
       			<?php dynamic_sidebar( 'Custom Widget Three' ); ?>
       			</div>

    I keep wondering about the selectors I was using. I got them by looking at the text with Firebug, which shows "text-2" etc. But the HTML above uses "custom-widget-area" etc. But changing that didn't help either. Any other ideas? Thanks again.

  4. Evan Herman
    Member
    Posted 11 months ago #

    Try something like this:
    HTML/PHP:

    <div id="widget-holder">
                    <div id="custom-widget-area">
       			<?php dynamic_sidebar( 'Custom Widget Area' ); ?>
       		</div>
       		<div id="custom-widget-area2">
       			<?php dynamic_sidebar( 'Custom Area Two' ); ?>
       		</div>
       		<div id="custom-widget-area3">
       			<?php dynamic_sidebar( 'Custom Widget Three' ); ?>
       	        </div>
    </div>

    CSS

    #widget-holder{ display:inline; width: 100%;}
    #custom-widget-area { float:left; width: 33%; }
    #custom-widget-area2 { float:left; width: 33%; }
    custom-widget-area3 { float:left; width: 33%; }

    Also forgot to mention, take out

    .text-widget: { width: 30%; }

  5. beachdogz
    Member
    Posted 11 months ago #

    Yes! It made perfect sense and worked beautifully. Thank you!

Reply

You must log in to post.

About this Topic