Nuno Silva

Wrapp a div around other div’s with float

Today i discovered something interesting with div’s.

Imagine that you have the following code:

<div id='mainDiv'>
   <div style='float:left'>Div #1</div>
   <div style='float:right'>Div #2</div>
</div>

And you wanted that the div named “mainDiv” to have a background color. Well in IE7 everything works fine with the xhtml code

above. But in FireFox the “mainDiv” there is an unusual behaviour.

Below is a image that ilustrates what you get in Firefox (on the left) and what you get using IE7 (on the right) with the xhtml code above:

Notice that the main div, in IE7, warps all content, but in Firefox the div remains with a minimum height.

Io solve the problem you could try (has i did) to put a height in the “mainDiv”. Although it worked (for the content that i

had inside the Div), you never know what the the height of the mainDiv is going to be.

The correct solution for the problem must be one that adapts the height the mainDiv to the maximum height of it’s content.

The solution is simple:

<div id='mainDiv'>
   <div style='float:left'>Div #1</div>
   <div style='float:right'>Div #2</div>
   <div style='clear:both'></div>
</div>

Adding the empty div with the style property “clear” set to “both” makes the mainDiv’s height extend to the full height of

it’s childs, making the xhtml generic for all browsers.

(UPDATE)
Due to the several solutions in the comments i will comment there here one by one.

Alternate Solution 1: the clearFix : thank to Joao A.

The solution in in fact very elegant and we only need to add something to your style sheet. The solution objective is to add

the pseudo element :after into that

“mainDiv”:

#mainDiv:after {
	content: ".";
	line-height: 0;
	height: 0;
	visibility: hidden;
	display: block;
	clear: both;
}

The pseudo element objective is to add some content after the element “mainDiv”. So the soluction passes by adding the

content “.”, removing the height of the content, hide that content and finnally clear both side of the div. in fact we are

doing the same has the original soluction without adding the extra div to the markup.

Alternate Solution 2: adding the float:left style to the “mainDiv” element : thanks to Vítor Pires.

This solution is actually very simple:

The solution is simple:

<div id='mainDiv' style='float:left' >
   <div style='float:left'>Div #1</div>
   <div style='float:right'>Div #2</div>
   <div style='clear:both'></div>
</div>

Alternate Solution 3: adding the overflow style to the “mainDiv” element : thanks to Jeff and href=’http://btm.anfo.pl/’ target=’_blank’>BTM.

very simple just like the previous one. Add the overflow style property with the value ‘hidden’ or ‘auto’.

The solution is simple:

<div id='mainDiv' style='overflow:hidden;' >
   <div style='float:left'>Div #1</div>
   <div style='float:right'>Div #2</div>
   <div style='clear:both'></div>
</div>

The only difference bettween the usage of overflow:hidden and overflow:auto is just that if you have a fixed height in the mainDiv, with overflow:hidden, the content will the content that surpasses the size of the div will be hidden, but with overflow:auto a sroll will appear.

The Solution 2 and the solution 3 are actually very good (and simple) to use in specific situation. if you want the content of the mainDiv to appear below it, than use solution 3 (or 1). Otherside, if you want the content to appear side by side with the div, use the float property in the main element.

I’m happy

At the end of my second day of full time development of the new version of Orion’s Belt, there is only one thing that i can say: I’m happy

My part is the battle (here is a shot for you that don’t know what the hell i am talking about). In some few words, the battle is no more than a chess like board game, with 8 different units on each side. Each one of them has it’s own attack, defense, range, special abilities and bonus.

In this 3rd version we decided not to change anything in terms of gameplay. The great optimizations will be in the Battle Core and in the Design. Why you ask? Because we consider that we have a pretty mature game, with a very strategic gameplay that our few (but very addicted) players love.

In the engine and in the design are our flaws.

The Engine is not extensible enough and all the Orion’s Belt Core is going to change. So, this is a good chance to upgrade all the code (meaning rewrite 90% of what we made in the past). Rewriting the code means:

• making the battle independent of everything else. If tomorrow we want to build a stand alone application with all this code, it will be possible (at least more possible than with the current version).
• making futures addictions to the core (like new units, new unit powers, new ultimate weapons) very easy to make. In our current version doing all of this is a synonym of making a lot of spaghetti code. In the new version we will simple extend some classes (one for each feature) and the engine will automatically use them.
• full support for 4 players in a single board.
• support for battles against an AI Agent.
• and much, much more

All of this using .NET 2.0 (the use of generics will boost the Battle Core performance).

The new design will also help a lot. We want to make the battle page one of the most cool pages of the new Orion’s Belt version (never forgetting that this page must be cool and usable at the same time). Must be something that the players see and say: WOOOOOOOO.

And who is the guy that going to make this happen? Marco Vale.

Visit his site: it’s worth the time spent

WebGames

Finally the new site of the zi-yu portal has been launched. It’s name is WebGames and it is a portal of web based games.

I think this portal can become a good reference of web based games for all players in the web.

Pre made a very good job. Speaking of Pre: Happy Birthday my friend!

And it’s Official…

.. Orion’s Belt 2.0 started it’s development…

Offline Application in asp.net

Some minutes ago, i used a wonderful new feature of ASP.NET 2.0+, the offline page.

We just need to create a file named app_offline.htm and put it in the root directory of our web application.

If the file exists, every request is redirected to that file. As simple as that

Blog Update

I added recently a new section to my blog (on the right) named projects with the list of all projects that i am currently working in.

The projects aren’t all mine. Pedro and Tiago are also part of them. And, in some of them, we have persons who insert all the content in the website (like Astroligia and 4Pilares).

Currently there are only 7 projects (because the other are under development):

• Orion’s Belt - a massive Multiplayer Browser based Game
• ziYU - it’s like our virtual company, where all the ideas come from.
• Sms - This website started has a prof of concept of a project we made. Here you can find Sms messages for all the occasions (Portuguese only).
• Centro e Cópias - is the website of my mother’s print store (Portuguese only).
• Bird Zone - This is a website where you can find a lot of information about birds.
• Astrologia - Everything you need to know about astrology (Portuguese only).
• 4Pilares - A webSite with a lot of information about child education (Portuguese only).

Centro de Copias, Bird Zone, Astrologia and 4 Pilares are still under construction. A lot of content is being added at the moment. Soon they will be at 100%.

Sms will soon be upgraded with a new design and new features.

The 2nd Version of Orion’s Belt will begin it’s development in january 2008. If everything goes well, in july, all of you can test (if you want of course) a new and improved version. We promise not to disappoint!

Moooo what?

The name is MooTools, a very cool Javascript Library with object oriented and Ajax support. It simplifies the way you write your scripts because it has a very simple syntax and a lot of features integrated (like effects, Drag and drops, scrolls, Tooltips, etc, etc).

To test the framework, I started yesterday an Star Rating control in ASP.NET. I Clearly needed 2 things

1. an css based rating system;
2. a framework that allowed me to do Ajax Posts

The first was easy. I made a little search and found 2 very simple that i recommend: Komodomedia and pmob.

For this example I used the second. Both are well done, so i just picked one of them.

The second: do some code using mootools (Also very easy like is expected of any javascript framework)).

First Step: The creation of the control

The first thing to do is to to create a control that renders the star rating. The method GetRating is something abstract because, according to your implementation (and context of usage) this information will come from a specific place.

Let's just suppose that the we are in a context of an blog and the rating goes to a database and get's the average rating of the current post.

NOTE: for test proposes the method can return the value '3' (just to see some stars).

After create this control, create and aspx and insert insert the control into an ASPX test page. Don't forget to add the css of the star rating to the aspx. This css is available at http://www.pmob.co.uk/temp/star-rating.htm ( or simply download the zip at the end of the page ).

then compile and run the project. You should see something like this:

Second Step: The javascript

Now that we have the control running, we need to add to each star and event onclick so we can handle the user rating. To do this, we will the following script:

The Ajax type has an event named "update". This is very useful because you can simply put the html element you want there (In the example above I inserted the element "ratingMessage') and the response of the request will simply be inserted into the element.

After this step you will not be able to see anything moving (yet!) because the page that handles the ajax request, Formatter.aspx, isn't created.

Third Step: Process the Ajax request

Finally the page responsible for receiving the ajax request, the Formatter.aspx (to make the example simple, I used an aspx page but you can also any type of file).

The page only receives the value of rating (to simplify the example) and returns a text indicating which rating we choose.

You can download this example here

I want one of these without reflection, please!

Some while ago, i saw the following code in a project i'm working:

string[] a = (string[])Array.CreateInstance(typeof(string), 10);

And then i became shocked... I called him every name in the book. And why? Because the complication above could be replaced simply by:

string[] a = new string[10];

And there are 2 reasons:

First: The IL generated by the CreateInstance is much more complex than the IL generated by the new operator:

Create Instance IL:

IL_0000: ldtoken [mscorlib]System.String
IL_0005: call class [mscorlib]System.Type [mscorlib]System.Type::GetTypeFromHandle(valuetype [mscorlib]System.RuntimeTypeHandle)
IL_000a: ldc.i4.s 10
IL_000c: call class [mscorlib]System.Array [mscorlib]System.Array::CreateInstance(class [mscorlib]System.Type,
int32)

new operator IL:

IL_0011: castclass string[]
IL_0016: stloc.0
IL_0017: ldc.i4.s 10
IL_0019: newarr [mscorlib]System.String

Second: because the CreateInstance uses reflection and, because of that, the operation is much more slow. Here are the times, in Miliseconds, for 1 million iterations of each operation:

CreateInstance: 406,2422 ms
New: 31,2494 ms

Has you can see, reflection is very expensive. In this case, just the line of code with CreateInstance is 13 times more expensive then the one with the new operator.

So, be careful where and when you use reflection. The bad use of it can result in a performance break of your application.

MSDN Event

Today was the day were i synchronized myself with the recent new products Microsoft has to offer in the Microsoft Conference (PT)

Starting in Visual Studio 2008 new features, passing by Sql Server 2008, Linq, Silverlight and ending with Windows Live Services.

The most interesting presentation of the day was indeed the one about Linq made by an old college teacher, although the subject of the day was Silverlight.

I liked it so much that i REALLY want to do export battles in Orion's Belt into Silverlight. Battles will be more rich and more eye candy.

Here is a preview of the battles as they are today:

Visual Studio 2008 and Framework 3.5

Yesterday Microsoft Visual Studio 2008 and Framework 3.5 shipped for the MSDN subscribers. You can have more detailed information about new features in ScottGu's blog.

This makes me wonder... Today I still work with framework 1.1 and VS2003 in my work. When will enterprises make the migration for the VS2008? Well, they must first pass by VS2005, right?

I think the migration will be made around year 2015 (give or take)...