---
title: "Overlaying divs including div selector"  
description: "Overlaying divs including div selector"  
author: "Anonymous User"  
published: 2013-05-09  
updated: 2013-05-09  
canonical: https://www.mindstick.com/forum/844/overlaying-divs-including-div-selector  
category: "jquery"  
tags: ["jquery"]  
reading_time: 2 minutes  

---

# Overlaying divs including div selector

Hi Mindstickians!\
Inside a [container](https://www.mindstick.com/forum/159610/how-to-connect-a-windows-container-to-a-service-running-on-localhost) div I have four divs that I wish to [overlay](https://www.mindstick.com/blog/699/overlaying-the-action-bar-in-android-app) so that only one is visible at any time. Each of these four divs is the same [dimension](https://www.mindstick.com/articles/1508/dimension-and-metrics-in-google-analytics-api-using-asp-dot-net-mvc) - lets say \
200x200px. To the right of the overlayed divs I would like to have four vertically aligned smaller divs that are not overlayed lets say they are each 50 px high. \
These four vertically aligned divs will act as a simple menu so that when clicked the associated div of the four overlaid divs to the left is the one to be displayed.\
I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to find the simplest solution to this ideally using jquery. I have played around with some stuff but my [knowledge](https://www.mindstick.com/forum/156160/what-is-google-knowledge-graph) of jquery just isnt up to the job.\
Any hints as to a solution or simply a method to [explore](https://yourviews.mindstick.com/view/85472/man-of-iron-vallabhbhai-patel-explore-it-here) further would be much appreciated. This is to be deployed as part of a [wordpress theme](https://www.mindstick.com/articles/12253/30-stunning-homepage-layouts-from-circle-creative-shop-multipurpose-wordpress-theme) so if anyone knows of \
a [plugin](https://www.mindstick.com/articles/23236/institute-management-for-wordpress-plugin) that does exactly this then that would be awesome but I suspect unlikely.\
please help me!\
Thanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)!

## Replies

### Reply by AVADHESH PATEL

Hi Samuel!\
Try as following\
$(function() { $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" ); $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" ); });\
CSS\
.ui-tabs-vertical { width: 55em; } .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } .ui-tabs-vertical .ui-tabs-nav li a { display:block; } .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}\
I hope it resolve your problem!


---

Original Source: https://www.mindstick.com/forum/844/overlaying-divs-including-div-selector

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.