“So what is it good for”, you say? One of the easiest uses of the float property is to wrap text around a html block-level element.

You can make an image or even a section on your webpage have text wrap around it. I will show you examples of both.

First, you will need a long paragraph

<div id="post-float-content"><p>This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. </p></div>

Next, you will need the element you want floated.

<span class="post-float-element">This is the html element being floated.</span>

If you want you can also use an image or any other element you want floated. Here is an example.

<img src="#" class="post-float-element" alt="Image Test for Float"  />

Any element you assign the float property to will become a block-level element.

Now put the code together, and you will soon be on your way to text wrapping bliss. For this example, I want my floated element to be near the top. So I will put it outside the paragraph tag. You can put it anywhere you like, even inside the paragraph. But you won’t see any wrapping if you put it at the end of the paragraph. Feel free to experiment until you get what you are looking to achieve.

Now for the CSS.

I’ve added some basic styling to the floated element. So that you can see how the block-level element is behaving inside the paragraph. It should be very apparent what is going on.

.post-float-element{
float:left;
width:100px;
height:50px;
border:1px solid #444;
padding:2px;
background-color:#dedede;
clear:left;
}

Here is the example in full. I hope you’ve enjoyed this basic post about the float property. There will be more to come integrating the float property into other parts of your website.

This is the html element being floated.This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property.

Books

The first book I ever purchased about CSS was very helpful at explaining why you do certain things with CSS.

[asa personal_post]1590596145[/asa]

Another book I have used many times on ways to work around old browsers or weird quirks was helpful in my CSS learning experience.

[asa personal_post]0764579851[/asa]

The book below is a great reference for terminology and rules. A must for those who don’t remember what a :pseudo-element refers to.

[asa personal_post]0596515057[/asa]

Website Links

One of the best CSS example websites out there.

Basic menu designs done in CSS.

Great list of CSS best practices.

CSS layouts done well for almost any situation.

Random Resources

Grid calculator for your layouts.

What you should know about CSS specificity.

An Em to Px calculator.

An example would be where you would need to make product links visually say “on sale”. And to do that without having to recreate thousands of images and reupload them.
A preview of what we are trying to achieve.

A few things that I want to keep in mind.

1. Usability for client
2. Reusable code/images
3. Accessibility
4. Valid xhtml

Note: Gladly you won’t need to compromise with any of these items to achieve the goal.

Let’s start with the basic html we will need.

Note: ‘ »»’ is for readability on this page, they are not part of the code.

<a href="#" title="View Item 602. On Sale Now!" class="box2">  »»<img src="/post-content/onsale/602.jpg" alt="View Item 602. On Sale Now!"  />  »»

<img src="/post-content/onsale/saleThmb.png" alt="This item is on sale!"   »»

height="0" width="0" class="sale" border="0"  /></a>

We have a link that has two images inside of it. The first image is the main image of the actual product we are trying to be linked. The second image is what we are going to use for the “on sale” part of the final link.

“Why does the second image have a height and width of 0″, you say? Ah, we’ll get to that in a bit.

Let’s get to the css first. We’ll start with the css for the link.

.box2 {height:120px;

margin:6px 6px 0px 0px;

width:120px;

z-index:50;

position:relative;

float:left;

}

We have a set height and width as well as a nice margin for the link. The margin is if there are going to be multiple links next to each other. They will line up nicely.

What we are using z-index for

I have set a z-index for the link. The reason that it is set at 50 is because I like to have some leeway with which way I can go on my z-index, and I don’t like to go into the negatives or go up or down by 1(it’s hard to check for errors). Also if you want z-index to work you will need to set a position for that element. I am using relative positioning.

Now the code for the images

Now let’s look at the css for the images. Starting with the first and then the second.

.box2 img{z-index:45;

position:relative;

height:120px;

width:120px;

border:0px;

}

.box2 img.sale{position:absolute;

z-index:55;

top:0px;

left:0px;

border:0px;

height:120px;

width:120px;

}

Now sense we didn’t want to recreate the image with the “on sale” on the original image we will need to put it on top of the other image. We accomplish this with a transparent png(or you could use gif) and z-index. We put the z-index for the image we want to be on top at a higher z-index, and the lower image to have a lower z-index. (Makes sense) We also set the position of the second image to absolute. This allows us to place that image wherever we want inside the link. And if we had not set the link to have a position the second image would not stay inside the link. Once we set the position we can place the image at the top and left of the link, with top and left set at 0. Finally we set the height and width of the second image with css.

Now the reason we set the height and width of the second image in the xhtml to 0 is so that if the css or images are disabled the image will not be visible. I would rather my layout break, and break the way I want it to, than have an extra image laying around on the html page.

Viola! You know have reusable images and code for your product links. This will work in IE, Safari, and Mozilla browsers. The xhtml validates, and it’s totally accessable.

You can view the final result and copy the code at this link.
View
Final Result

Download
Example Files

I am writing an article about a more advanced way to do this, and it will be posted soon. So check back within the next week!

Articles / Websites to Help you Learn More

• hasLayout (you should learn about this)
  • hasLayout explained
  • Microsoft documentation on hasLayout

• Testing Bugs
  • Simple live examples of issues involving IE
  • User submitted and Site related demos (Very well explained)
• What’s been fixed in IE 7
  • List on microsoft developer blog of known IE 6 bugs that are fixed (Not a comprehensive list)
• Lists of bugs/issues
  • Help on figuring out IE5 Mac bugs
  • Another list of IE bugs with a short description explaining each.
  • User submitted list of issues and bugs (kept current, not just IE)
  • List of links to sites about bugs
  • Guides on what to do and how to fix issues with IE
  • Not easy to navigate, but a good list of resources for issues with browsers
• CSS guides and tutorials
  • Clean and easy to read guides about CSS
  • Articles and Guides on how to solve IE bugs
  • How to figure out which IE bug you have
  • Some more current examples of how to solve bugs in IE
• Reporting Bugs/Forums about Bugs
  • Submit your finds, search for issues (quite comprehensive, very helpful)
  • Web Bug Track, user submitted (great rundown of specific issues)

I hope these provide you with a great resource for figuring out those ridiculous Internet Explorer bugs. They have helped me.

But first, my entry was the smallest size! I’d say I’m proud of that.

Most of the things I knew would be on there. Like, late, not working in safari, bad border on ratings, bad text-resizing, css not validating because of font instead of font-family(stupid mistake), basic browser inconsistencies, and hard to read code. ugh…thanks for pointing those out guys.

Some pluses that were given to my attempt, were much appreciated. Like, my use of tables(I used them for showing data, not layout), my integration of a print stylesheet, attempt at drop shadow on border of table, good use of header tags(h1, h3), and use of ems for font-size. I’m glad the judges paid so close attention to the details.

It was mentioned by one of the judges that the site didn’t work on the iPhone. That made me laugh. Now if only I had the money to buy an iPhone. But he did say that they were not judging the way it looked on the iPhone. Which I am glad they didn’t.

Well, after reading what they had to say, I had to take a step back and figure out why those things happened. And the first thing that came to mind was time. These competitions are becoming harder for me because of that. I love the challenge, but it’s so hard to take an entire day(usually a weekday) and make a website. I guess I want to be with my wife more than I want to spend my day doing this. (she doesn’t usually want me to spend my entire Saturday coding when I do that all day during the week)

I get so passionate when I am coding css. I love it. The diversity, the challenge, the unique ideas, the pain, and the attempt at perfection. I can’t help but enjoy every minute of it. This is what I love, and I think that’s weird.

Well if you want to see my entry, you can check it out here. Check it out, and look for to my next entry.

So I thought I would share a simple trick that creates a really clean effect. It’s what I call a double border. I don’t like adding borders onto the actual images I put on websites, so I’ve experimented with using css to create the borders. What I’ve found is that css rocks at doing this!

Basically you put a <div> tag around the image you want to add a border to. And add css to the div, not the image. That way we can still control the image, but we have much more variation with what we can do with borders.

Here is what the <div> and <img> html would look like.

<div class="border-cool-out">
<img src="/post-content/border/me.png" alt="Cool Border" »»
height="100" width="75" />
</div>

And then the really simple css for the double border. basically all you need to do is give the class the width of the image, and however much border you want. Than add a background-color and padding. That will create the extra border to give it a double border effect.

<style>
.border-cool-out{
  border:1px solid black;
  background-color:#efefef;
  width:75px;
  padding:2px;
}
</style>

I hope you enjoyed this really easy, but cool way to create stylish and great looking borders. Here is another example.

I thought it might be cool to show an interesting example of how this could be used. Other than as a double border. Enjoy!

This is the second part to the learning to create css layout series. This part focuses on how to make the menu. The last part left off here.

We are going to create the menu from an unordered list. The main reason we do this, is because of semantics. When css is disabled or someone is using a screen reader it’s helps in navigation. But also it is because the menu is a list or grouping of links.

So lets start with the xhtml.

<ul>
<li><a href="#" class="active">Main 1</a></li>
<li><a href="#">Main 2</a></li>
<li><a href="#">Main 3</a></li>
<li><a href="#">Main 4</a></li>
<li><a href="#" class="last">Main 5</a></li>
</ul>

Which is pretty simple. Much cleaner than separate <td> for each link. Each link is nested inside a list tag. And whichever page you are on the anchor tag has a class of {active} attributed to it. This is strictly for declaring css on that element to help distinguish it from the other menu items. And you might have noticed a class of {last}, which is being used for controlling graphical elements on the end anchor tag.

That’s pretty simple and it can be controlled quite extensively with css. Here is the css that controls the way the unordered list is setup and displayed.

#menu ul{
margin: 0;
padding: 0;
width: auto;
}
#menu ul li{
display:inline;
}

We have put the unordered list inside the {menu} div. We can set specific rules for just this div by attributing #menu before all of the elements we want to control inside that div. That way it won’t affect any other tags on the page that are not in that div.

We get rid of the default values that are atrributed to an unordered list by setting margin and padding to 0. Also each list item inside the unordered list is set to display inline instead of block. What this does is align the elements to sit beside each other instead of on top of each other.

Now here is the gritty part of the menu, and where you can really effect the colors, size and many other aspects.

#menu a{
border:1px solid #333;
border-right: none;
color: black;
display:block;
float:left;
margin-left:-1px;
padding:5px 0;
text-align:center;
text-decoration: none;
width:20%;
}
#menu a.last{
border-right:1px solid #333;
margin-right:-1px;
}
#menu a:hover{
background-color:#181818;
color:#EAEAEA;
}
#menu a.active{
background-color:#181818;
color:#EAEAEA;
}�

Okay, hopefully you are not overwhelmed. I will try and explain the important parts of what this css does. First we assign a border to each link as well as set the right border to be 0px by using the word none. This makes the border be the same width across the entire menu. And because we got rid of the right border, the last anchor tag needs to have it put back on. So that’s where a.last comes to play. We apply a 1px border back onto that element.

Normally anchor tags are inline elements, but we want them make them have cool hover states and have the entire height of the link clickable. So, we need to set display to block, and have them float left. What this does is allow you to set a height and makes the extra space on the element clickable, not just the text. Which is really user friendly, and allows for easier navigation.

When working with css and making things line up correctly you need to be aware of your elements width. Because we added a border to each link we need to offset the width of the element so that it is what it was before the border. Since each element has 1px extra, because of the border, we can set the margin-left to -1px. And on the a.last element we can add margin-right -1px (since it needs 2px taken off).

The biggest reason for this is so when we set the width of the links it is correct. Because we have 5 links we can set the width to %20. If we hadn’t taken off 1px with margin, the links would not display correctly.

Now we just add some simple decoration with padding. And we are using shorthand css here. The first number effects the top and bottom, and the second number effects left and right. Then we add some colors and set the :hover and :active pseudo elements. So, when you rollover the links, they behave like you expect.

It’s that simple. Once you have created a few sites using css. You will begin to understand how easy it is to effect entire websites.
Hopefully this tutorial has shed some light on how to create a css layout that you would normally have done with tables. The final example has some extra css thrown in to help show how to create a more complete look.

View Completed Example

If you have any suggestions or questions please feel free to share your thoughts.

So I whipped a few examples up. They aren’t like spectacular or anything, but I though that you might like to see them. I might make a few more entries later this month. Enjoy!

• White

• 
• Demo menu

• Blue

• 
• Demo menu

• Green

• 
• Demo menu

• Daisy

• 
• Demo menu

Convert a .psd into HTML making use of web standards, in 24 hours or less.
excerpt from CSS Off

So I entered their first contest and thought I did extremely well. Here was my entry. I didn’t win, but I thought that their feedback was very helpful and valid. All in all it was a great experience.

So I wanted to enter the next one, but I wasn’t until this month. I woke up yesterday and realized that the contest had started. So I began. I didn’t feel at all like I came near to completion, and I think that my entry was late (so it won’t count…argh!).

This is what is what they gave us to work with, and what it was supposed to be based on. We had some liberty to be creative with it.

But here are some things I’ve learned from this experience, and thought I would share.

1. Allow more time for looking over everything before you submit your files. I didn’t give myself room to breath. So in the end I forgot…
   That I needed to zip the files, to code correct ratings(actual stars, not a fake image), and verify my XHTML and CSS. Luckily my XHTML was fine, but I made a stupid mistake with my CSS. I used ‘font’ instead of ‘font-family’…ugh, a stupid mistake.
2. Don’t stress so much over the details
   I tend to be a perfectionist when it comes to .psd comps and css. I want everything to look exactly the same. But I am starting to realize that I am killing myself every time I try and do that. Hopefully I can learn to find some balance.
3. Lastly, know your limits.
   One of the challenges of this contest was that the footer design was left out of the comp. (argh!) So to say the least I was frustrated. I don’t always have a design touch, especially for someone else’s design. So to take it and make a footer for it was very difficult for me. I worked way to long on different variations, and wasted valuable time, that could have been spent verifying code, etc. So, in retrospect I will try and do my best, but I must know my limits and where to stop trying different ways over and over and over. (I think I shot myself in the foot trying to many ways)

So, here is the site I submitted. If you think it rocks, tell me! If you think it sucks, tell me! I wore myself out doing it, and probably won’t do the next unless I have more time in the day. Thanks CSS Off for the opportunity, and I hope my entry is at least looked at…

I will take you through a new thought process, and explain how you would do something in tables and then convert it to css.

Hopefully you will find this helpful. Here are the links providing the two examples in their entirety: table layout, css layout.

Let’s Begin

Let’s say you need to create a simple 2 column layout. Nothing fancy, but you want to apply css as much as possible because your new boss says it’s the only way to go.

Let’s start with a basic diagram of what you need.

• header
• menu
• body – with 2 columns
• footer

With tables you would probably break it up into 4 rows with tables inside each row representing each section. Like below.

You would have a row for the header, menu, content, and footer. There would be another table inside the menu with however many rows for the buttons. Inside the content row there would be a table with 2 rows, and a table in each of those rows. (these are the deepest tables, 3 tables deep) In the last row, another table for the footer so it aligned with the right column.

Now this is fine and dandy, but your boss – bless him – must have it done in css. So I will explain what we’ll need for the layout. You would probably break it up into 4 divs (instead of 4 rows within a table) Like below.

(This image is vaguely familiar) We can use the basic layout we thought of to guide our css layout. You would have a div for each part: the header, menu, content, and footer. Like so.

<div id=”header”>
</div>
<div id=”menu”>
</div>
<div id=”content”>
</div>
<div id=”footer”>
</div>

Example File. Here is the file you can start from if you want to follow along.

Now we will add divs inside those to help create the menu items and columns. Be sure when you use id’s {id=”header”} to not use the same name more than once on a page. This will help create more valid code. When you use class’s {class=”left”} you can use them as many times as you want.

Inside the content div add a div for each column, like so.

<div id=”content”>
<div id=”col_1”>
</div>
<div id=”col_2”>
</div>
</div>

Now that’s all the div’s we need. Hurrah!! We will add the menus and content soon. Now for some css. I know it doesn’t look like much now, but that’s the beauty of css. You can change the css and the html code doesn’t need to change. A good point to remember is that css is awesome at making it where all you need to do is change one file and all of your pages are changed.

Put this code right before the end of the head tag. We are creating css that will be used for computers so we set the style media attribute to screen. You would use the media attribute to apply css to print, handhelds, etc.

I will explain the reason for each bit of code below.

<style type="text/css" media="screen">/*set default values*/
body{
margin:0 auto;
width:756px;
}

To make the content align in the middle you can set the margin property in the body selector, like so {margin:0 auto} the first value represents the top and bottom margin and the second value the left and right. And we assign the width to be 756px.

a:link{
color:blue;
}
a:visited{
color:purple;
}
a:hover{
background-color:#ABABAB;
}
a:active{
color:red;
}

We also want to set some basic default styles that will apply to every link. CSS allows you to alter link states. These next few values are called psuedo classes, and I am using them on the anchor selectors. {a:link} is the unvisited state. {a:visited} is the visited state. {a:hover} is the rollover/hover state. {a:active} this is the on-click/activated state. Some of these rules can be applied to other html elements, but they are used primarily for the anchor tag. Here is a reference that explains this is much more detail.

.left{
float:left;
}
.right{
float:right;
}

I have created 2 class selectors called left & right. { I will explain what they do in a little bit.} In css, you use a dot in front of the class name, that’s called a class selector. With id’s you put a pound-sign in front of the name, that’s called an id selector.

/*set layout values*/
#container{
}
#header{
height:150px;
line-height:150px;
position:relative;text-align:center;
}
#menu{
position:relative;
background-color:#EAEAEA;
}
#content{
position:relative;
}
#col_1{
width:25%;
}
#col_2{
width:75%;
}
#footer{
color:#ccc;
font-size:10px;
padding-left:25%;
text-align:center;
}
</style>

Then I’ve applied id’s to all of the divs I made to create the layout. I won’t explain them in gross detail, but I will explain why I did certain parts. In the {#header} id selector I made the line-height property the same as the height. That is a very simple way of aligning text vertically. In {#col_1 & #col_2} I gave the divs their widths in percentages just like I did for the tables. But if you look at the page it doesn’t line up correctly. And that’s because we need to make them float next to each other. The easiest way to do this is to use the class selector that we just talked about, called {.left}. Apply this style to each column {put this in each column div tag » class=”left”}. This will make them line up next to each other. And since their widths don’t equal more than 100%, they will float perfectly next to each other. And lastly in {#footer} I added a padding-left:25%, since that’s the width of the 1st column, to the id selector so that it would align correctly with the second column.

Now this is where we are at. Example File 2.

You can view the finished html page here.

View Example

Here is part 2, where I explain how the menus work. Enjoy for now, and feel free to ask any questions.

Multiple layouts are included (left and right aligned).

• 2 column: 800×600 and 1024×768
• 3 column: 800×600 and 1024×768

There were a few things that I wanted as default personally.

• Font sizes as ‘em’ (so that everything would increase or decrease easily)
• The ability to easily use floating divs
• Basic css styles for form elements
• I didn’t end up creating a default css menu, since those change every time I do a site.My website is setup using these css files, with the id’s and such renamed to work with wordpress. I loosely based my default.css file on meyerweb.com’s example. Please feel free to use this set of files in any way. View ExamplesDownload FilesNow!