All posts tagged “Column”

Walt Mossberg’s final Wall Street Journal column looks back on two decades of tech

After 22 years of insightful and important commentary on consumer technology, Walt Mossberg has written his final column for The Wall Street Journal and its All Things D tech blog. In it, Mossberg picks out the twelve most influential products from his time as the newspaper’s tech reviewer, identifying each one as something that changed the course of digital history. Included among his dozen are Windows 95, the Palm Pilot, Google’s search engine, and the iPhone.

The products chosen weren’t necessarily big sellers — his first choice on his chronological list, the Newton MessagePad, was an “outright flop” — but Mossberg believes each of his selections improved ease of use and added value for the average consumer. His tastes and…

Continue reading…

The Verge – All Posts

Bang & Olufsen BeoLab 18: A stunning wood and aluminum wireless sound column inspired by David Lewis’ iconic BeoLab 8000

Bang & Olufsen BeoLab 18


A celebrated innovator in material design and a pioneer in the school of thought that designers should work side-by-side with engineers, over the last 88 years Bang & Olufsen has released some of the most iconic…

Continue Reading…


Cool Hunting

40 Beautiful 3 Column WordPress Themes For Free Download

WordPress themes are everywhere and there is literally a huge plethora of themes available for the WordPress users to choose from. One of the main reasons of WordPress popularity is the availability of high quality and quite flexible themes that can make any website truly captivating.

In this day and age, 3 column WordPress themes are getting very popular and this is the reason why we have compiled this collection of 40 excellent 3 column WordPress themes for you.

We have already published a post about 3 Column WordPress Themes and today’s collection also will be useful for you. All the themes presented in this collection are free to download. So, enjoy everyone!

Travelzine

( Demo | Download )

eFinance

( Demo | Download )

Imprezz

( Demo | Download )

Sparks

( Demo | Download )

Ink Stain

( Demo | Download )

Sunset Farm

( Demo | Download )

Serge

( Demo | Download )

Guidebook Gold Coast

( Demo | Download )

Lined

( Demo | Download )

Worn Wall

( Demo | Download )

Wooden Wall

( Demo | Download )

Magazine Basic

( Demo | Download )

Nodex

( Demo | Download )

Darix

( Demo | Download )

Gamehub

( Demo | Download )

Douched

( Demo | Download )

LimoPress

( Demo | Download )

Techozoic Fluid

( Demo | Download )

Fresco theme

( Demo | Download )

Red Light

( Demo | Download )

Grey Opaque

( Demo | Download )

Clear Line

( Demo | Download )

Easel

( Demo | Download )

Mainam Vintage – Multi color

( Demo | Download )

Theater Room

( Demo | Download )

Bulletin Board

( Demo | Download )

Film Thoughts

( Demo | Download )

Fragrance

( Demo | Download )

EchoPress

( Demo | Download )

One Room

( Demo | Download )

Worn Wall

( Demo | Download )

Aristo

( Demo | Download )

Note Paper

( Demo | Download )

Fantomalist

( Demo | Download )

Liliya

( Demo | Download )

Riviera Magazine

( Demo | Download )

Belesermo Magazine

( Demo | Download )

Wooden Fence

( Demo | Download )

Azpismis

( Demo | Download )

Funky Green

( Demo | Download )

TechWP

( Demo | Download )


Free and Useful Online Resources for Designers and Developers

Web Design: Equal Column Height With CSS

Ttraditionally, a website consists of the main section and a sidebar on the layout. Commonly, the content that is contained in the main section could be longer than the sidebar, which makes the height of these two sections unequal.

In some cases, we want the height to be equal. There are actually some solutions to this situation, and one that is frequently recommended is the Faux Column technique.

Faux Column

Dan Cederholm firstly introduced the term Faux Column in his post over at A List Apart. The idea of this technique is to create an illusion of equal height by adding background color or image to the container instead of to the sidebar itself.

Alright, let’s see the following example to see how this technique works.

<div class="container clearfix">
	<div class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
	Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. 
	Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, 
	lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, 
	dictum vitae mi. Donec sed bibendum ante.</div>

	<div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
	Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.</div>
</div>

As you can see, we have three div that contain the main section and the sidebar. We also put more (random) content than in the sidebar.

Afterward, we apply a few styles for the main section and the sidebar to be displayed side by side in the browser and we also add different background colors to them.

.container {
	/* none */
}
.main, .sidebar {
	float: left;
	padding: 20px;
}
.main {
	width: 400px;
	background-color: LightSlateGrey;
}
.sidebar {
	width: 200px;
	background-color: Tomato;
}

This will result into something as shown in the following screenshot, as expected the height is not equal.

Let’s apply the Faux Column technique; we simply remove the background color from the sidebar and add it to the container, like so:

.container {
	background-color: Tomato;
}
.main, .sidebar {
	float: left;
	padding: 20px;
}
.main {
	width: 400px;
	background-color: LightSlateGrey;
}
.sidebar {
	width: 200px;
}

The sidebar height now “looks equal” to the main section.

I’m not against this technique. In particular situation it just works fine. But there are some other situation when this illusion will just fail, such as when add a margin to the main section. This screenshot below shows how it turns out.

CSS Table

Alternatively, we can achieve the same result using the CSS Table technique. This technique uses CSS display property to set the HTML elements to act like a table, and this is my favourite approach when this situation rises.

Let’s see the following example to see how it works.

The HTML sturcture is the same as the above example, only we now alter the CSS. We start off by setting the container display to be a table. Then, we set the .main and .sidebar to display as the table-cell and we also need to remove the float declaration from them, otherwise the table-cell will simply fail as well.

.main, .sidebar {
	float: none;
	padding: 20px;
	vertical-align: top;
}
.container {
	display: table;
}
.main {
	width: 400px;
	background-color: LightSlateGrey;
	display: table-cell;
}
.sidebar {
	width: 200px;
	display: table-cell;
	background-color: Tomato;
}

As we mentioned, this will output the same result as shown below. But, unlike the Faux Column, this technique does not deliver an illusion. We just set the div to act like a table. As we may already knew, the columns height is relative to the tallest.

Do you have another way to create similar effect? Do share it in the comment box below. We would love to see your tip.


hongkiat.com

10 Best Free 3 Column WordPress Themes

Here we have put together an amazing collection of 3 column WordPress themes for you. All these 3 column themes are completely free to download. WordPress is a great platform for blogging as well as promoting your business online and the availability of huge range of themes that can set each WordPress blog apart from others makes WordPress the most preferred choice of the bloggers.

In this round up, we are presenting for you some amazing and professional 3 column WordPress themes that you can download for free. Such types of themes are ideal for the online magazines and related websites.

Academica: Theme For Educational Websites

This theme is designed for educational websites that you can easily modify according to your needs and it is a completely free WordPress theme. Any school, college or university and non-profit organization can easily use this theme because it is not only flexible, multipurpose but and versatile too. You can see the features.

Main Features of The Theme

  • The theme was developed for WordPress 3.0 (compatible with 3.0.1)
  • Modern, three-column clean design
  • 5 built-in icons to share and link to your profiles on Twitter, Flickr, Facebook, LinkedIn and YouTube
  • The theme allows enabling/disabling of a jQuery-based content slider on the homepage for showing your photos
  • Academica Theme uses a jQuery-based drop-down menu with a fade-in effect
  • 9 sidebars (widget areas) and 3 custom widgets developed for this theme
  • Dynamic image resizing (TimThumb script)

Screenshots


Drop-down navigation menu


Content blocks in the sidebar, defined with a custom widget.


News archive page.

Paragrams

Paragams theme is a good option for any journalistic-type website because it was made by special techniques that fit the needs of any journalistic-type website whether it is a news-blog or some kind of online-mag. This theme is a lightweight grid-based theme that contains almost no images. With its number of custom advanced features, you can easily use this theme for your website.

Main Features of The Theme

  • Custom Homepage
  • Special Homepage design adds some originality to your site. You will be able to use your template both for Magazine and for Blog.
  • Modern layout
  • Artistic modern design brightens your site at all times.
  • Drop Down Multi-Level Menu

Screenshots


Drop-down navigation menu.


Content Block

Global News WordPress News Theme

This awesome theme of WordPress is named as Global News Theme and it gives your website a newspaper style look, furthermore this theme comes with all the necessary features. You can use this theme for any project and it proves to be the best for news-related projects. The target of this theme is to present your content in a unique style so that your website looks stunning and superb. In this package, you will also get PSD source file of the logo image and this theme has a 3-column-based layout. Following are the some important features of this theme. Enjoy everyone!

Main Features of The Theme

  • Modern and beautiful web typefaces in use
  • Tableless design and 100% CSS-based layout
  • 3 columns of fixed width
  • Widget Ready

Screenshots


News flash


Comments style

NeueGrafik

NeueGrafik theme is especially designed for the graphic designers and developers. This theme shows incredible result it is simple, elegant and professional manner and also sets your website aside from the others websites. This WordPress theme makes your work exciting and remarkable. Scroll through this amazing collection and have fun.

Main Features of The Theme

The Theme Features has many interesting and nice features. It comes with some extra features which have a detailed video overview. Video overview will help you to easily install and modify this theme according to your own needs. Following are the best features of this theme.

  • Valid XHTML+CSS
  • WordPress 3+ Compatible
  • Support and Updates
  • Embraces Social Media
  • Firefox, IE7+8, Safari compatible
  • Video Overview

Screenshots


Content Block

Splendio

Splendio theme is based upon the Twenty Ten WordPress theme and it comes with many brilliant features. This theme works well on WordPress 3.0. The theme is available for free use for personal and commercial use as well. This theme is ideal for Ad agency, designers and portfolios; and it is released under GPL. So, try and enjoy.

Screenshots


Content Block


The comments area.

Themolio

Themolio is an elegant and simple WordPress theme but it contains some very powerful features which astonish you as well as inspire you. Themolio is a grid based theme which is inspired by Pinterest and you can easily customize this theme from its options page. Using options page to customize the theme is also very easy to use. You can use this theme for design blogs, designer portfolios or other related filed.

Main Features of The Theme

  • Elegant grid and traditional layout Fully responsive
  • Custom logo
  • Custom favicon
  • Custom background
  • Multiple post format support

Screenshots


Content Block


Drop-down navigation menu

Bello

Bello is a free WordPress theme that is simple yet elegant enough to be used for professional purposes as well. This theme showcases some beautiful and wonderful images in a clean and open space. Furthermore, it includes post type templates 1, 2, 3 and 4 column portfolio galleries, social media links, a custom admin panel and documentation. Several jQuery enhancements, such as… Fading background image, slideshow gallery posts, drop down menus, and more are also the plus points of this theme.

Screenshots


Navigation Style


Bottom Area

BlueBubble WordPress Theme

BlueBubble is one of the WordPress themes which is designed especially for the creative minds like designers, developers and photographers. Under GPLv3 BlueBubble theme is released. BlueBubble comes with very clean, fresh and amazing features which help you to present your work in an easy and professional way as well as look stunning.

Main Features of The Theme

  • 8 Different Styles/Colors
  • New User Profile Fields – add Facebook, Twitter, Skype, etc.
  • Advanced Theme Options Panel – Control everything from one location.
  • Updated design using CSS and new CSS3 elements.
  • Author Details box with list of their posts – all in one place!
  • Custom color for author comments.
  • JQuery Form Field Validation
  • Animated thank-you message when email successfully sends.
  • Connect your Twitter account and show latest posts.
  • Support for Search Engine Optimization in Theme Options – add Meta content and more!

Screenshots


Content Block

CarZilla

CarZilla is packed with some stunning visual elements that are the key points of this theme. This WordPress theme is a cutting edge theme with an automatically updating slideshow which is free to download. CarZilla is a fresh and new car theme with incorporated social widgets.

Main Features of The Theme

  • Easy to use options page
  • Featured Image Ready
  • 125×125 banners ready (easy editable from admin options)
  • Widgets Ready
  • SEO Optimizedy
  • Fixed width
  • Compatible with latest WordPress versions

Screenshots


Navigation Style


Image Slider

MaglossV2

Magloss V2 is the latest and enhanced version of Magloss theme. This theme is developed by MagPress and it is a 3 columns fluid flexible width WordPress theme. This theme is integrated with amazing and sizzling features like content slider, latest posts from category with thumb, customize single page with thumbnail related posts, Adsense ready, Twitter ready, enable user to insert up to 5 YouTube videos, etc. Do not worry; you can easily control all these setting with easy to use theme options.

Main Features of The Theme

  • 3 Columns Fluid Width
  • Featured Content Slider
  • Featured Content Slider
  • Customized Breadcrumbs
  • Adsense Ready (Loops, Single and Sidebar)
  • YouTube Video Ready
  • Threaded Comments With Gravatar Enabled

Screenshots


Navigation Style


Comment Section

Conclusion:
We hope that you will find this collection useful for you. Do let us know what you think about this collection and feel free to download as many themes as you want. Enjoy!


Free and Useful Online Resources for Designers and Developers

4 column Portfolio Template for Business Theme

40 Excellent 3 Column WordPress Themes For Free Download