Title: Positioning custom widgets
Last modified: August 21, 2016

---

# Positioning custom widgets

 *  Resolved [beachdogz](https://wordpress.org/support/users/beachdogz/)
 * (@beachdogz)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/positioning-custom-widgets/)
 * 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/](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.

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

 *  [Hakkim](https://wordpress.org/support/users/hakkimpahammed/)
 * (@hakkimpahammed)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/positioning-custom-widgets/#post-4047107)
 * 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.
 *  Thread Starter [beachdogz](https://wordpress.org/support/users/beachdogz/)
 * (@beachdogz)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/positioning-custom-widgets/#post-4047141)
 * 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.
 *  [Evan Herman](https://wordpress.org/support/users/eherman24/)
 * (@eherman24)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/positioning-custom-widgets/#post-4047143)
 * 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%; }`
 *  Thread Starter [beachdogz](https://wordpress.org/support/users/beachdogz/)
 * (@beachdogz)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/positioning-custom-widgets/#post-4047156)
 * Yes! It made perfect sense and worked beautifully. Thank you!

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

The topic ‘Positioning custom widgets’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [float](https://wordpress.org/support/topic-tag/float/)
 * [widgets](https://wordpress.org/support/topic-tag/widgets/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 3 participants
 * Last reply from: [beachdogz](https://wordpress.org/support/users/beachdogz/)
 * Last activity: [12 years, 9 months ago](https://wordpress.org/support/topic/positioning-custom-widgets/#post-4047156)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics