ConnorMiddleton.com

When working on some recent projects I ran across a problem with nested divs. Basically the Main content Div did not stretch when the nested divs stretched, causing the nested divs to flow out of the main div.

After many minutes of playing around with the multitude of "hacks" and "fixes", I determined that by simply adding a paragraph tag to the bottom with a non-breaking space, the container, all of the sudden knew how to adjust the size.

<p>&nbsp;</p>

I further "googled" my way around the net searching for a better alternative and the proper reasoning behind what was happening and stumbled upon a great discussion over at thescripts.com. I had never visited the site previously, but the help that was floating around was greatly appreciated. 

"Ben C" and "Diogenes" together answered the how and why and offered multiple soultions: 

According to "Ben C":

"It looks like the div inside it is a float. Floats do overflow their
containers, unless their containers are block formatting context roots.

See

http://groups.google.co.uk/group/co...6622d5c5?hl=en&

Solutions: make the container a BFC root (float it left for example, but
watch out for sideffects). Or put something after the float, inside the
container, with clear: right set on it. "

Well that helps to make better sense of the situation, and a smart solution, then I saw "Diogenes" answer:

"The container DIV only grows in vertical size with the
content it encloses. You have other DIVs inside the
container which also size themselves according to content.

But the container DIV does not care how large the contained
DIV's are unless there is some content following the
contained DIVS. The contained DIV's are responsible for
there own sizing.

2 possible solutions:

1) set the height or min-height attribute of the container
element (note - min-height does not work in IE6)

2)add some content after the last contained DIV so the
container has to figure out how large the contained DIVs are.

for example, just before the closing </divtag insert the
following:

«br style="clear:both" />
&nbsp; <-- this is a non break space -->

One last tip - to see the container DIV, add a temp border
attribute like this ...

<div id="container" style="border:thin dotted blue">

and you will see where the DIV is.

You will discover that a DIV that contains nothing but other
DIV will appear like a one dimensional container; width but
no height. Add some text after the last contained DIV to
'force' it to calculate its new height.

Cheers
Jim "

Well obviusly, my little trick of using a paragraph tag with a non-breaking space was a least a good solution to the problem, even though he suggested using a <br> tag. So if anyone has a better suggestion on the best solution to this problem, let me know.

Alot of geeks change jobs every year or so in hopes of better pay, better management, or simply because their current situation sucks. Not every company out there knows how to treat their IT resources. Developers like to be comfortable when they code, IT personnel like to wear sneakers, etc. Of course this doesn't apply to everyone, but this is a list based on my experience.

1. Relaxed dress code. Nothing bugs me more than having to dress up for nobody on a daily basis.

2. Access to current computer hardware/software. It's great they are paying be X dollars, but could I get a monitor that actually goes up to 1024 x 768.

3. Sunlight. Sure the mojority of coders will probably disagree with this one, but I like being able to tell what time of day it is without a clock. Also serotonin makes me happy :)

4. Working from home. Being able to remote in to tweak some code or just work from home makes life much easier. Ideas come at random times and being able to use them is important.

5. Knowledgable Boss. Does the boss/supervisor have a clue about your job? This can be good or bad. I prefer to have someone with more knowledge than me, otherwise, why is he the boss.

6. Flexable Work hours. Creative minds are not alike. Some people perform better in the evening.

7. Reimbursable Learning Costs. Do they support you learning the new software/methods/updates. They should be willing to take an active investment in you continuing to improve yourself especially when it will benefit them as well. Nobody like a stale worker.

8. Great Co-Workers. Nothing is worse than spending 8 hours cubicle hell than spending it with a monotonous boring person with no common interests. I like to have fun outside work whether it be drnking, gaming, or rec league sports.

9. Challenges. Who wants to do the same old thing day in and day out. I want some challenges.

10. Fun environment. I like to know that the other people play pranks on one another and generally make things active and exciting.

I most often work with designs from other creative developers and I am tasked with converting it into a workable site with CSS. I recently ran into an issue where there were several designs layered over each other. A quick and dirty approach would have been to just cut up the design and use the graphics like normally, but the aesthetics of it would have been lost in translation.

Here is what the original design looked like:


As you will see it included several different layers with varying levels of opacity. If it were just this page, I could have just made it a background element without worrying about it. But this was a template to use for every page throughout the site. The interior pages would have to allow for growing vertically, because the content was of variable heights.

The first thing i did was determine how I would setup the background. Taking the gradient of dark orange to light orange, I created a small sliver from top to bottom and repeated it in the background only on the x-axis:

body {
background:#FEBF24;
background-image:url(../images/background.gif);
background-repeat:repeat-x;
}

As you'll notice I also made the background color the same as the bottom most color. If you look at the comp I worked with, you'll see that there are some images that are not in the "main div" that overlay on the background. Working with the art director, we decided to eliminate these images. We could have done it I know, but on to other things.

To allow for vertical expansion I divided the image into several sections. The top "header", the top of the "container", and the bottom of the container. I chose a seperation line in the middle of the image straight through the middle of the two swirls on the right side.

This is the Header image:

The top of the "container":

The bottom of the "container":

From the header image I made a "logo image" and the right side. This would allow me to change the logo whenever needed.

I took the top and bottom images and faded them into the background color to prevent any hard lines in the images.

The overall result would have been easy to accomplish if there were ways of assigning a top image and bottom image for a background. Since there is not, here is how I accomplished it.

<body id="interior">
<div id="container">
	<div id="logo"> <a href="index.cfm"><img border="0" src="Sheraton/images/logo.jpg"  /></a> </div>
	<div id="header">
	
	
		<table cellpadding="0" cellspacing="0"><tr><Td width="100px" valign="top" ></td><td>
		<tr><td></td><td></td></tr>
		<tr><td></td><td align="right"  style="padding-top:3px;"></Td></tr></table>

</div>
<div class="clearall">&nbsp;</div>
<div id="navigation">
</div>
<div id="containerbottom">&nbsp;</div>
<div class="clearall">&nbsp;</div>
</div>
</div>
</div>
</body>

#container {
margin:0 auto;
text-align:left;
width:866px !important;
background-image:url(images/topbg.jpg);
background-repeat:no-repeat;
background-position:0px 110px;
background-color:#F37421;
z-index:1;
position:relative;
}

#containerbottom {
width:866px;
height:327px;
background-image:url(images/bottombg.jpg);
background-repeat:no-repeat;
background-position:bottom left;
float:left;
margin:-297px 0 0 0;
position:relative;
z-index:0;
}

#header {
background-image:url(images/headerbg.jpg);
height:100px;
float:right;
width:666px;
text-align:left;
margin:10px 0 -5px 0;
font-size:11px;
}
#navigation {
fl