enavu webdevmania tutsvalley psdestination
visit the enavu network
26 Comments Article Title Overlay Article Title

Simple Cross Browser CSS Layouts (ie6+, ff3+,safari*,chrome*)

Simple Cross Browser CSS Layouts using Floats. Just a general overlook on modern day solutions for cross browser layouts.

There are more ways to accomplish what i outline in this tutorial i simply cannot list all of them without writing a book! The ways portrayed here have been cross-browser tested!
There are so many ways to accomplish [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Simple Cross Browser CSS Layouts using Floats. Just a general overlook on modern day solutions for cross browser layouts.

There are more ways to accomplish what i outline in this tutorial i simply cannot list all of them without writing a book! The ways portrayed here have been cross-browser tested!

There are so many ways to accomplish the same thing, whether you are making a 3 column fluid or 3 column fixed layout one wonders what the best way to code it is. Today I am going to cover all the ways i know how to accomplish most of the “complicated” layouts out there. So if you were unsure, come by every time and give this a quick browse. I will likely use this as a reference myself.

Fixed vs Fluid

So you can’t talk about layouts without explaining the difference between the two general fields of layouts. Really briefly, a fluid layout is one that will span across the page and a fixed is a design that will remain the same width. There is a hybrid that dig uses which will only stretch out so far and will remain a fixed after you try to go beyond a certain width. Now that you know about the different layout groups lets dive into some actual layouts and the corresponding coding.

2 Column fixed / 3 Column


2 column fixed

View Sample
(for the 3 column look at the last bullet point in the explanation)
Here is how I do this with floats. Let’s form our html structure:

Lorem Ipsum

Lorem ipsum

Two Column Fixed

Proin semper


So we have a left column and a right column wrapped inside of a wrap, you may call my naming off… i like it so i use it. Now the styling, i am going to make it a regular 800px width.

* {
margin:0;
padding:0;
}
.wrap {
width:800px; /* the overall width */
margin:0 auto; /* center the wrap */
position:relative; /* just in case */
background-color:#CCC;
border:1px solid #333;
}
.leftCol {
float:left; /* float it left */
margin-left:10px; /* push off the right */
width: 230px;
background-color:#999;
padding:10px;
display:inline; /* ie6 hack */
}
.rightCol {
float:left;
margin-left:10px;
margin-right:10px;
width:500px;
background-color:#666;
padding:10px;
display:inline;  /* ie6 hack */
}
.clear {
clear:both;
}

Important Notes about this method

  • Adding a header is simply adding a div above the two columns inside the wrap, sometimes you may need to add a div with a clear after it to make sure the columns don’t float above
  • You will need to figure out the width of the columns and the gutters (space between) before coding. You will also need to change the width once you decide the padding… padding WILL change the size of your column. Hence is your column was 250 pixels before you added a 10px overall padding it now needs to be 230px. Its not 240 because the padding will be both on the left and on the right.
  • Use clears all the time… why? Because it will save you much headache. Anywhere there is suppose to be an invisible break line add a clear div. In this example there MUST be a clear div under the two columns so that anything you add after it does not float up, and also so that the wrap stays around the columns.
  • Use the display:inline so that you don’t run into problems with Internet Explorer 6
  • Use a reset… i have the simple * which stands for “affect all elements” but you should likely use the Eric’s Reset
  • For a three column it’s as simple as adding a div called center column recalculating the width’s and margin’s and using everything else the same

2 Column Fluid (left col fixed right col fluid)


2 column fluid

View Sample
Here is the fun part, we can use the EXACT same html code. Why? Because when i wrote the html i wrote it in a semantic way that can be reused. Anyways here is the css styling for this layout:

* {
margin:0;
padding:0;
}
.wrap {
width:100%;
min-width:760px; /* important fix in case browser is re-sized too small */
}
.leftCol {
float:left;
width:200px;
padding:10px;
background-color:#CCC;
}
.rigthCol {
margin-left:220px;
background-color:#999;
}
.clear {
clear:both;
}

Important Notes about this method

  • Adding a header is simply adding a div above the two columns inside the wrap, sometimes you may need to add a div with a clear after it to make sure the columns don’t float above
  • We use a min-width property on the wrap so that if the browser is re-sized too small it still looks good.
  • Use clears all the time… why? Because it will save you much headache. Anywhere there is suppose to be an invisible break line add a clear div. In this example there MUST be a clear div under the two columns so that anything you add after it does not float up, and also so that the wrap stays around the columns.
  • The fluid column cannot contain any padding
  • Use a reset… i have the simple * which stands for “affect all elements” but you should likely use the Eric’s Reset

All of this seems too confusing? Use a CSS Grid Framework

Since I can see how all this can become tedious and frustrating I highly recommend the use of a CSS Grid Framework for your layout. Here is a list of my favorite frameworks:

Waiting for your comments, i will add any layout requests posted in the comments

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. How to structure a website (html, css)
  2. Simple Fast Easy make your website iPhone ready!
  3. The 6 don’ts of Web Development
  4. Web Forms: Semantic Mark Up in our Forms [part 2]
  5. Top 10 CSS Snippets

Did you absolutely LOVE this article... share it!

Comments

  • may also :
    - don’t delete ‘dotted border’ ( *{outline:none;} )
    - color contrast (background n text)
    - using attribute ‘alt’ in image
    - hierarchy heading (h1,h2,..)
    - distinguish between ‘internal links’, ‘exernal link’ and ‘link ads’

    I’m sorry if I’m wrong… thanks

  • I absolutely disagree on point 6. I’ve heard it more often but cannot believe people give this advice. Have you ever used a large resolution monitor? If so you’ll probably see that having fluid layouts cause texts to become unreadable because the large amount of words on one lines.

    Texts which have shorter lines are much easier to scan and read, and as such are much more usable. Just because you have the space doesn’t mean you have to use every little bit of it. Whitespace can be very pleasant to the eye, which improves usability too.

    Other then that, great article!

  • Libeco i do partially agree with you smile however, if a website is designed well, with enough whitespace between lines (line-height) any text can become nicely readable, and if the content as you say doesn’t permit for that then yes using a semi-fixed width layout can be beneficial. Thanks for the input.

    Choen all your suggestions are valid, i will add them to the main article smile thanks!

  • I’m not going to say number 3 is wrong, clearly there are times when that is needed, but a better way to do that usually is to set the anchor element to display:block; .

  • You know me and a friend argued over number 3 for a while, and after a bunch of testing… here is what i got out of it:

    First of all i distinctly explained “menu items and other navigational elements” that’s because its not a good idea so set a padding on normal anchors inside of paragraphs and such, that will simply mess things up. But for anchors in (usually the top or bottom portion of a website) using only padding will increase the clickable area. Usually i would agree with you, and when writing this article i did cross browser testing… now my thought is confirmed by basecamphq who use ONLY padding and no block on their anchors.

    Thanks for the comment, i hope my explanation helps.

  • Ha, nice expressionengine screenshot.  Jessie did a great job on that site.

  • Amazing post. thanks a lot

  • I have heard something about making a css fluid or solid will help!!!my question is there a way to add css fluid layout to my already site!!without remaking the whole thing, or is there another method to please all users??
    Animated Layouts

  • Great post! I’m just starting out in community management/marketing media and trying to learn how to do it well – resources like this article are incredibly helpful.
    Personal massager

  • You’ll never please everyone.Go look at other professional sites to see what they do. MSN.com uses a solid design. Google and Yahoo centers their content to help hide the ‘empty’ spots in larger resolutions.If there is a graphic design used in the header/logo of a site, I like to tile it across so it appears that something is at least in the area.tina

  • keyword research is the backbone of your organic SEO. if you choose and optimize for the wrong keywords, everything else suffers.
    best seo company

  • <a > google </a>
    google
    [LINK=http://www.google.com/]search engine[/LINK]

  • Thanks for taking the time to post such a detailed and informative article. It has given me a lot of inspiration and I look forward to more like this in the future..
    placemat

  • Sources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.
    promotional products

  • I can see that you are putting a lot of time and effort into your blog and detailed articles! I am deeply in love with every single piece of information you post here. Will be back often to read more updates!
    Search Engine Marketing

  • Thank you so much for starting this. I look forward to those yet to come. I thought the product was presented very throughly and the reviews were excellent. Way to go! Keep up the great work!
    car insurance companies

  • admire the valuable information you offer in your articles. I will bookmark your blog and have my children check up here often. I am quite sure they will learn lots of new stuff here than anybody else!
    Jumping Castle

  • I actually still need advice, myself!  I’m not qualified to answer that one, except to say – just film it! just keep doing it so that you develop the skills.
    beer coasters

  • You’re really thankful for this post, I really enjoy checking up this post. Looking forward to see future posts.

    SEO Training

  • Valuable information and excellent design you got here! I would like to thank you for sharing your thoughts and time into the stuff you post!!

  • You’re really thankful for this post, I’ve been really enjoying checking up your posts from time to time. Looking forward to see your future posts !!
    stubby holders

  • I appreciate your tips!

  • Thanks for your CSS layout tips. Cross browser CSS is important for CSS browser compatibility. I am learning CSS and will redesign my site to provide more aesthetics. Your CSS tips can surely help.

  • Great post !

    But the examples are not available anymore.

  • Excellent post. Many thanks for sharing this resource….

  • nice post! I’m just learning CSS after all these years of hardcoding formats into html. not that difficult!

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting