Flexible Website Layout Tricks

In the past week I've spent quite a bit of time playing around with flexible layouts. Or to be more accurate, layouts with fixed elements on the edges a flexible center. Sites like Wikipedia utilize this category of layout very successfully, and I've been trying to figure out how it's done.

First, a review. Websites in general are built around containers. Containers within containers, each one's attributes can be control, from dimensions on the page to the way text inside looks. For the layout of the page, we are only concerned with three attributes. Size (height, width), extra spacing (margin, padding), and borders. CSS allows height and width to be set both as fixed lengths and as percentages of the parent container. The problem though, is that one can't use a combination.

Say you have a header, it needs to be exactly 50px in height. Then you have a content box, that should take up the rest of the page. Ideally, you'd tell the content box to by 100% minus 50px. But you can't combine % and px. They best way around this is not to set height at all. You instead use positioning.

position:absolute;
top:50px;
bottom:0px;

And suddenly, you have it going all the way to the bottom. But what happens if your content is longer than your page? Doesn't work anymore. In that case, you put another div inside the positioned one, and add your styling to it. Don't give it positioning information. Without it, it will just conform to the content inside it, and will apply the styling. But when the content is less than page length, the positioning of the main outside one will take precedence.

Another thing I've figured out recently is how to set inside borders. Borders, along with padding and margin, are set "in addition" to height. If you have a box that is 100px wide, with a 1px thick border around it, it's actually 102px wide total. If you set a box to be 100% wide, it will take up 100% of the screen. But you add a 1px border, and suddenly, it's exactly 2px wider than the screen, no matter how wide the screen is. There is a way around this though. Take the box below as an example.

<div style="height:100px; width:100px; text-align:center; background-color:lightblue;">
    Test
</div>

Test

Now, add a new div container, inside the one you wish to add a border to. Make it 1px wide, 100% tall, background-color whatever you want to the border color to be, and display:block, so that it displays with no text in it. Finally, set it to float to the left.

<div style="height:100px; width:100px; text-align:center; background-color:lightblue;">
    <div style="height:100%; width:1px; display:block; float:left; background-color:black;"></div>
    Test
</div>

Test

Now, add the same div, still inside the container, still before the text, and change it to float right instead of left.

<div style="height:100px; width:100px; text-align:center; background-color:lightblue;">
    <div style="height:100%; width:1px; display:block; float:left; background-color:black;"></div>
    Test
    <div style="height:100%; width:1px; display:block; float:right; background-color:black;"></div>
</div>

Test

And you have a border inside. In a real website of course, you'd place that styling in a css style sheet, and just give the border divs a class of something like leftborder, and rightborder. And it does make the HTML code look somewhat bulky, admittedly, but it's the best way I could find.

The same thing can be accomplished with padding, by just making the width thicker, and the background-color transparent. Margin I haven't figured out yet, but I'm working on it.

Know a better way? Leave a comment!
 

Romney Just Can't Seal The Deal

 

A Good Day

Yesterday was one of those days when everything lined up really nicely. Where I ended up going to bed thinking, that was really nice, nothing about it could have been better .. it was a good day.

I woke up at noon, sleeping in as I do every Tuesday. I went to my first class, my surveying lab, and got back the lab from last week. For the first two weeks I'd missed points on stupid errors, so looking at the 20/20 really raised my already high spirits. We proceeded to go over the work for next week, and it ended up being a much shorter lab than normal, so I got out after only 40 minutes instead of 2 hours.

I then took the bus down to the movie theater to ask them to donate a date for the CESAC Date Auction. I wasn't expecting much, because last year, only one place out of the five I went to actually gave me anything. Right away, the movie theater gave me enough free stuff for not one but really two dates. I then went to the next place on my list, Panera Bread, which said yes.

I stopped by the library, and the lady gave me a new library card for free, since it had been so long ago I'd lost my original. And I got a new book that I've been really looking forward to.

I then took a break, and with some coupons that I'd saved, I went to Arby's for a late lunch. Now, this might just by my local Arby's, but every time I go in, the experience is great. The staff is always super friendly, and half the time ends up upping my fries or sandwich size just because they're feelin' generous.

So I walked in, and to start with, they let me use two coupons, even though the coupons said only one per meal. Then, I sat down to wait, and the lady actually brought my food out to me, where I was sitting. Finally, after I finished, as I walked out the door, the closing door hit my hand, and I dropped my cup, spilling it everywhere. The staff member who was cleaning told me to go inside, grabbed me a new cup, and let me fill it up. It was wonderful. Great, great place.

I had my second class of the day at the point, and it was an exam. One which, I hadn't really studied for at all, given how easy a class it is. Social Psychology, I was making a bet that the exam would be as easy as the class had seemed, and I was right. With no studying, I'm almost sure I Ace'd it.

I then went to the first ITaP Student Advisory Council meeting, which always makes me feel good. Everyone's dressed up, there's 6 or 7 students, and 4 or 5 really high up people from ITaP. It's a place where you can actually have a big impact, because everyone uses the computer systems, and if your ideas are good, they get implemented, not lost in the bureaucracy.

Finally I walked home, and checked Facebook, then settled down with my new book until sleep.

A good day.
 

Corning’s Second Day of Glass

Nearly a year ago, Corning (maker of Gorilla Glass), released a video encapsulating it’s vision of the future. It’s since gotten 17 million views on youtube, and started numerous discussions and responses.

In the video, Corning predicted large scale desktop touchscreen displays, bigger video screens, and dynamic billboards. And while much of the video is still in the future, the OLED TV’s shown by LG at this year’s CES do seem to bring the video to life.

Read my full article at TekGoblin.com.
 

Flexible Layout Problems

As I said yesterday, I'm working on a new project for CESAC. It will automate our date auction nomination process, letting students enter their nominations via a laptop, instead of a sheet of paper.

Yesterday I drew some logic chains to figure out what all I'd need to do, if I wanted to do it right and include proper validation. I then started working on it, and immediately got stuck on the design of the submission page.

The design is fixed width at 1000px, but I wanted it to be flexible vertically, so that it always fills the page up and down, but without a scroll bar. The problem is that the bottom section is comprised of 4 small images, all of which are different heights. Having them change in height would be a mess.

So I decided, they'd be fixed. The top picture though, would change. It would need to be 100% of the height of the page, minus 384px of the bottom section. Then slap in the CSS3 border-size:cover; style, and you've got a winner.

Simple no? No. Problems abound. First, there's no easy way to specify a percentage minus pixels. A gross oversite of CSS I believe. Second, any solution is only going to work in modern browsers. Firefox 4+, IE9+, Opera, Chrome. The big problems being IE7 and IE8, which are still very widespread. If you want to do it though, without javascript though, you'll have to abandon the older browsers.

As off CSS3, if you specify "height:100%-384px;", along with "top:0; bottom:384px;", if works. Having "top" before "bottom" fixes the position from the top, and having "bottom:384px;" does the same thing as a "margin-bottom:384px;". But you need all 3 of those, along with "position:absolute", or it won't work. Seems repetitive, I know.

Anyway, while the PHP still hasn't been created (my plans for today until the Super Bowl tonight), the design is finalize .. I think. Check it out below. If if goes longer than your page, causes scroll bars, please leave a comment and let me know what browser you are using. (Unless it's IE7 or 8, in which case do a better job reading).

Nomination Page

PS. Thoughts on the submit button? I designed the the images myself with Photoshop.
 

Date Auction Nominating

CESAC hosts a date auction each year, for charity. And each year, we ask CE students to nominate the students they want to be auctioned off. We then tally up the nominations, and ask the top 10 men and women. If one says no, we move to the next person on the list.

The problem is that to do this, we have students write down names on a piece of paper, and then one CESAC members sits in front of Excel for several hours tallying them all up. I've decided to try and address this (even though I'll be gone by the time the next Date Auction takes place).

The idea is, we have a laptop set up, and students come in, type in the name of the student they are nominating, and then click submit. What I hope to do is get access to the CE database of CE students, so that the PHP can quickly check it, match the name entered vs the list, and validate that it really is a CE student. If it's not, the PHP would grab the 5 closest last names, and give an error message, along with the possible corrections.

I did the first step today, creating the portal. Put in some pictures from past CE events, and made sure that it would fit on any screen and look right, which took a bit of time. The next step is getting access to the CE database, which will have to wait until Monday.

In other news, I've finished overhauling the main CESAC website, so it's now up to code. Should be possible to look into widening it now, and even trying out different styles and looks. That I might pass off to the next guy though.
 

Musical Memory

Ever notice how songs are tied into specific memories? Or to ... general memories, like few months that were very memorable? Nearly every day last summer, I'd wake up and go to work, I'd walk the exact same path, and I'd almost always listen to one song to wake me up. Now every time I listen to it, I think of that place, that walk, and the job I had at the time.

(Slow at the beginning, how does it wake one up? Wait until 50 seconds in.)