Category Archives: Uncategorized

by

Div with floated child nodes doesnt grow to fit them

This was a week of learning. I hit upon an strange issue in my UI page – though the content was fitting absolutely fine – it was having an unnecessary horizontal scroll bar.

After much deliberation with the layout tab in firebug – I found that this div (with no explicit height set) was not expanding  to accommodate the children inside. Further investigation pointed to the fact that the child nodes in question were actually floated & therefore they were outgrowing the parent.

http://www.tangible.ca/article_resources/expanding_divs_around_floats/ had described this exact problem succintly & provided an simple solution.

Consider the code snippet

<div id=”parent”>

<div id=”floatedchild1″></div>

………………..

<div id=”floatedchildn”></div>

</div><!– parent node ends –>

Before the parent div is closed – we would need to introduce

<div style=”clear:both”></div>

that would solve this seemingly complex issue. 🙂

Happy Coding & learning!!!!

by

Console API in Firebug

Other than the console.log, console.dir, console.info, console.warn, console.error that developers are used to, I found more useful ones like

1. console.exception(error object) – to print stack trace

2. console.time(“some message”);…..piece of code to measure time…..console.timeEnd(“some message”); – to print the time taken of the code in between

3. console.group & console.groupEnd – print messages in Hierarchy/Groups

More such functions in Console API Documentation of Firebug