ConnorMiddleton.com

I just read a great article over at

SmashingMagazine.com

for keeping your code relevant and clean. take a look at it and let me know what you think.

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.

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