We love the vertical tabs, makes Drupal administration form looks much cleaner than without it.

But sometimes we want the full width of a page to be usable for our complex form and vertical tabs is eating up the left spaces with its tabs.

So what is the solution? Transform the vertical tabs into a horizontal tabs with a few line of css code is very much possible and it will retain the functionality.

Here is the css to achieve the horizontal tabs out of vertical tabs :

/**
  Transforming vertical tabs into a normal horizontal tabs
  We need this because color and region area plugin works
  better in a full width environment
  **/
  
.vtcore div.vertical-tabs .vertical-tabs-list {
  width: 100%;
  margin: 0;
  clear: both;
  border-bottom: none;
  margin-bottom: -1px;
}

.vtcore  div.vertical-tabs {
  background: #FFFFFF;
  border: none;
  border-radius: none;
  -moz-border-radius: none;
  -webkit-border-radius: none;
  -o-border-radius: none;
  margin: 10px 0;
  position: relative;
}

.vtcore div.vertical-tabs .vertical-tabs-panes {
  margin: 0;
  padding: 10px 15px;
  clear: both;
  border: 1px solid #ccc;
}

.vtcore div.vertical-tabs ul li.vertical-tab-button {
  float: left;
  margin: 0 3px 0 0;
  border: 1px solid #aaa;
  border-bottom: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  background: #ddd;
}

.vtcore div.vertical-tabs ul li.vertical-tab-button a {
  border-top: medium none;
  font-size: 0.917em;
  line-height: 120%;
  padding: 5px 9px 3px;
}

.vtcore div.vertical-tabs ul li.vertical-tab-button a:hover {
  background: none;
}

.vtcore div.vertical-tabs ul li.selected {
  border: 1px solid #ccc;
  border-bottom: 1px solid #fff;
  background: #fff;
}

.vtcore div.vertical-tabs ul li.selected a, 
.vtcore div.vertical-tabs ul li.selected a:hover, 
.vtcore div.vertical-tabs ul li.selected a:focus, 
.vtcore div.vertical-tabs ul li.selected a:active {
  background: none;
  border: none;
  text-decoration: none;
}

Notice the .vtcore class, it is my special class for a certain form since we don't want this css to transform all the available form. to add class to any form is very easy, you'll need to invoke hook_form_alter() in either your custom modules or from theme template.php.