Vertical Views Tabs layout with teaser to the right of the tabs

It takes only two changes to the tabs.css to accomplish this.
This assumes that you already have a view with horizontal tabs (as opposed to list or teaser or full nodes) in place.

For whichever particular view you want to do this for (assuming you don't
want to do it for every instance of views tabs), just add this bit of css
to your style.css (replacing the myview with the name of your own view):

.view-content-myview ul.anchors {
float: left;
}

.view-content-myview .anchors li {
float: none;
}

My teaser was rendered a little bit high relative to my tabs so I also added this:

.view-content-myview .fragment {
padding-top: 20px;
}

If you make a page view of your tabbed view, then you can study the source code in your browser and learn where you might further customize your css.

For example, I thought the boxes around each tab looked clunky in this layout so I replaced them with just a single vertical divider between the tab and the teaser:

.view-content-myview .anchors a{
border-left: none;
border-top: none;
border-bottom: none;
padding-bottom: 10px;
padding-right: 15px;
}

 
 

Drupal is a registered trademark of Dries Buytaert.