Why does the left column not reach bottom of the page?

HTML & CSS
1

Gudday all
I have a visual problem on my wife’s site at Applique, Bear, Cloth doll, Stitcherys, Stitcheries, Quilt, Bags patterns and kits - Petals & Patches.

It is set up as a 2 column site with the navigational buttons on the left. You will notice that the context of the right column wraps around under the bottom of the left column. I don’t wish to have that behaivour, rather the right column should stay in it’s own position.
I am sure that the solution is frightfully simple (I did a quick search but not knowing what to call the problem I found no obvious previous thread(s))

The code is question is


<body class="bodytext">
<div id="outer">
<div id="hdr" align="center"><img src="images/banner800.jpg" alt="" border="0" width="361" height="154" />
<h1>Bags</h1>
</div> <!-- end of hdr -->
<div id="bodyblock" align="right">
<div id="l-col">
<ul id="navbuttons">
<!-- buttons go here -->
</ul>
</div> <!-- end of l-col -->
<div id="cont">
<!-- content here -->
</div> <!-- end of cont -->
</div> <!-- end of bodyblock -->
<div id="ftr">
<p class="disclaimer">Every attempt has been made to ensure the accuracy of the information provided on this website. Please advise us if you have any concerns relating to this site.
Contact the webmaster for further information.</p>
<p class="webmaster">Site built and maintained by <a class='navlink' href='mailto:xxxx@petalsandpatches.com?subject=Request for the Webmaster of Petals and Patches'>TIGER TIM</a>.</p>
<script type="text/javascript">
//<![CDATA[
var now =  new Date();
document.write('<p class="webmaster">');
document.write("Site design &copy; Petals and Patches 2004 -" + now.getFullYear() + ".");
document.write('<p class="lastupdated">');
document.write("Last updated on " + document.lastModified.substring(3,5) + "/" + document.lastModified.substring(0,2)+ "/" + document.lastModified.substring(6,10) + "</p>");
//]]>
</script>
</div> <!-- end of ftr --->
</div> <!-- end of outer -->
</body>

There is an outer wrapper called ‘outer’ :rolleyes:. A header, bodyblock contains the l-col (the left column) & right column (cont) and a footer to finsish off.
Admittedly I sometimes wonder why I have both outer and bodyblock. It was a long time ago and maybe I don’t need both of them?

2

Add this:

#cont {
  background: none repeat scroll 0 0 #FFFFDF;
  border: 0 solid #00FFFF;
  color: #333333;
  text-align: left;
  [COLOR="Red"]width: 650px;
  float: right;[/COLOR]
}

You’ll also need to add

.webmaster {
  color: Red;
  font-family: Garamond,"Times New Roman";
  font-size: 11px;
  [COLOR="Red"]clear: both;[/COLOR]
}
3

Ralph
Thank you for that. They work fine though I am not entirely sure why.


#cont {
  width: 650px;
  float: right;
   ...
}

makes some sense but


.webmaster {
....
  clear: both;
}

has me puzzled.

4

Try the page without it. That element jumps up to the left side. If you want it at the bottom, you have to tell it not to wrap around the floated items above by saying—“make sure it stands clear of any floated items, both left and right”. Perhaps clear: right would have been enough in this case. Typing “both” was one fewer character, and I’m lazy. :smiley:

5

Gudday all
Rather than start this thread again I’ll reuse my existing one.

I have been fiddling around with my wife’s site, trying to ‘improve it’. As seems usual with my work any changes made have unforeseen effects that seem hard to rollback.

Looking at http://www.petalsandpatches.com/contactus.hm you will see that the content in the right column wraps around the bottom of the left column.
Whilst making the suggestions kindly suggested earlier and trying for some minor (!) formatting changes in the left column I arrived at what you see at http://www.petalsandpatches.com/contactusDec11-1.htm.
The left column is above that of the right and part of the right column, at the very end, seems to have disappeared.

contactus.htm uses petalsandpatches.css & petalsandpatches-layout.css
while
contactusDec11-1.htm uses petalsandpatches.css & petalsandpatches-layoutDec11.css

Looking back at the work I have done the only changes in the -layout.css between the versions is
petalsandpatches-layoutDec11.css


ul#navbuttons {
    padding:0;
    list-style:none;
    width:130px;
	margin:2px 0px 2px 0px; /* added 10/12/11 */
	border:0;   /* added 11/04/11 */
	height:30px;   /* added 10/12/11 */
}

#cont {
 background: #FFFFDF;
 color: #333333;
 border-width: 1 1 1 1;
 text-align: left;
 border: 0px solid #00FFFF;
 width: 650px;
 float: right;
 font-size: 14px; /* added 10/12/11 */
}

#hdr {
 /*height:60px;*/
 margin-left:auto;  /* added 10/12/11 */
 margin-right:auto;  /* added 10/12/11 */
 background:#FFFFDF;
 color: #333333;
 text-align: center; /* added 10/12/11 */
 /*border:1px solid #FF0000; */
 }

The changes are marked with /* added 10/12/11 */.

What have I done?

6

Not sure quite how you want this laid out now, but it would help to add this:

#bodyblock {
  background: none repeat scroll 0 0 #FFFFDF;
  border: 0 solid #FAAF00;
  color: #333333;
  float: right;
  padding: 0;
  position: relative;
  text-align: left;
  width: 800px;
  [COLOR="#FF0000"]overflow: hidden;[/COLOR]
}
7

After further mucking around and using ralph.m’s suggestions I am still no closer to resolving my visual problem.
If you go to http://www.petalsandpatches.com/indexSep12.htm you can see my latest attempts.
How do I get the LH column (green) to continue down until it reaches the bottom of the orange box so that the text does not wrap underneath the navigation column?

8

Hm, unless you’ve changed your HTML, I made a mistake above.

You could either do this:

#cont {
overflow:hidden;
}

or this, which looks a bit nicer:

#cont {
margin-left: 150px;
}
Off Topic:

I thought the tiges would make the finals this year. :frowning:

9

So did I. Thought I would buy finals tickets for the 1st time in a decade. Then those 3 close losses. :frowning: :nono:

10

O well, tere will be some good games anyway. :slight_smile:

Did those code options help/make sense?

11

Thanks Ralph.
That worked a treat. If you go to http://www.petalsandpatches.com/indexSep12.htm you can see the result.
Had me going for awhile though. I could see no change. Then remembered to hit refresh. :blush:

12

Cool. Glad that helped. (And yes, refreshing the page is often a crucial step that causes a lot of confusion. :slight_smile: )