Blog

Blog Updates

Change Your Thesis Site to a Fluid Layout

June 10, 2010 · 17 comments

Thesis comes packed with plenty of configuration options, but I’m going to show you how to create a fluid layout for your site by only editing custom.css.

Not sure what a fluid layout even is? Basically it’s just means the site width is determined by the size of the users browser window. If you resize, the content resizes as well. W3C’s site is a good example of a fluid/liquid layout. Google “Fluid Layout” and you’ll find plenty of info on it!

Making this change is actually pretty easy, but it should also be noted that you’ll lose the functionality inside Thesis to define column sizes. Also, with the code provided you can only use the 2 columns option (without making extra changes on your own).

Anyways, lets get to it- open up the custom.css file found inside the Thesis custom folder and add the code below:

#container { width: 100%; }
	#content_box { background-position: 70% 0; }
		#content { width: 70%; }
			.teasers_box { width: auto; }
				.teaser { width: 48%; }
		#sidebars { width: 30%; }
			#image_box { text-align: center; overflow: hidden; }
				#image_box img { display: inline-block; border: none; background: none; }

That’s going to give you your fluid design with no other steps and you should have something that looks like the site in the image below:

Thesis Fluid Screenshot

Of course you can take things into your own hands and edit the different % values to come up with different sidebar / content ratios (make sure it equals 100%). If you’re using interior lines (the default) make sure the background the #content_box and #content values match up. If you want to use your sidebar on the left column, have the #content_box value equal your #sidebars value.

Need more padding on the sides? Thesis has an option found in Design Options called Outer Page Padding, which you can tweak to your fancy.

I didn’t do extensive testing, but from the looks of things it works in IE6+ and all major browsers. Let me know any different.

Leave your questions, comments, and issues after the break!

{ 15 comments… read them below or add one }

kristarella June 10, 2010 at 11:35 pm

Smooth moves. That didn’t take as much CSS as I thought it would.

For readability’s sake it’s usually a good idea to have min and max widths for fluid content, otherwise it can get a little ridiculous, but this is a great start.

Reply

Jon Brown July 2, 2010 at 5:58 am

Matt – Thanks for this, it’s very clean and simple.

Krista Good point! I also appreciate how W3C’s fluid layout magically switches to a mobile site layout if it get really really narrow. I’ve been meaning to look into that very feature of fluid layouts myself lately… haven’t yet, but soon. Assuming it’s just a different style sheet altogether, although I’d assume it was called via JScript, but it looks to be in the header…
.-= Jon Brown´s last blog ..Hello world- =-.

Reply

Rob McCance October 31, 2010 at 9:33 pm

That’s what I was thinking before I made it to the bottom of the article. Need minimums, at a minimum.

Ha ha!

Reply

Dr. Lawrence Kindo August 12, 2010 at 7:07 pm

I have been looking for a tutorial on customizing thesis skins with this functionality. I have been trying to customize my Thesis Skin and the results are good, but it shows poorly on most small screen computers in low resolution. I hope this solution works its wonders on my site.

Reply

Alan Vallis December 7, 2010 at 1:29 pm

I agree about the maximum width issue. Sadly, many visitors to your site won’t have enough computer savvy to realise that they can resize the window. Many others also have their browser window permanently maximized.

For readers who are not familiar with CSS, just change the first line of the Matt’s code to this:
#container { width: 100%; max-width:1250px;}
1250 pixels seems to me to be about the right maximum for comfortable reading without having to scan. What do others think?

And of course you do you can add:
min-width:400px;
or whatever if that is your heart’s desire.

🙂

Reply

Talkblogger December 11, 2010 at 3:49 am

Thanks for the quick tutorial Matt. I have been facing this issue with my site in recent times and I think this code snippet would enhance my readers’ experience.

Reply

RYAN March 9, 2011 at 6:14 pm

Do you happen to have any code for a fluid custom header with thesis? Having a terrible time sizing this correctly for different resolutions! thank you !

Reply

Beth January 14, 2012 at 2:51 am

Padding option worked ^^ Thanks for the tip. I’m a codeless wp builder and help such as these keeps me in business.

Reply

zuhri February 22, 2012 at 4:25 pm

i wonder if you can make tutorial so its fit mobile phone screen. i’ve been looking for this kinda tutorial but never find it

Reply

Matt Hodder February 22, 2012 at 5:44 pm

Themedy has a theme coming out for Thesis (and Genesis) called Reactiv that uses a responsive design to fit all kinds of screens. We’ll have it available soon here: http://themedy.com/demos/?theme=reactiv

Reply

Pierre Bastien March 7, 2012 at 1:06 pm

Oh that is TIGHT. Just because I’m crazy like that, I want to see what <a href="“>it looks like with no max or min width. I can’t seem to get my SVG img to expand beyond 634px. I think this is because there’s a width property embedded into the SVG file itself. Will have to play around with that. Anyway, very cool, thanks Matt.

Reply

Pierre Bastien March 7, 2012 at 1:09 pm

Er, I didn’t link my example correctly. Whoops.

Reply

Raj April 7, 2012 at 9:03 am

so simple, couldn’t believe that we can make it fluid-ic with very few lines of code.. awesome..

Reply

Saurabh Saha April 8, 2012 at 10:53 pm

Thanks !!!
Very Simple. I’d apply this in my website and it gave me the same.
Thanks again.

Reply

Cheryl Johnson February 17, 2013 at 10:33 pm

…AND in Thesis Design Options, set your HTML Framework to Page framework, NOT Full-width framework… even though that seems counter-intuitive……. and yes, this little snippet of CSS was just what I needed……

Reply

{ 2 trackbacks }

Leave a Comment