[solved] css trouble - making div appear under dynamic menu?

ladyr0gue · **Joined:** Fri Feb 17, 2012 4:25 pm **Posts:** 89

Hi! at present I have a div to wrap my Left column

Code:

#divLeftColWrapper{float: left; }

and in it appears the div with the menu in it

Code:

#navcontainer { width:200px; float: left; margin: 0 0 60px 40px; padding: 0; display: inline; }

and below that a content div

Code:

#divLeftCol {margin: 280px 0 0 40px; padding: 15px 0 0 0; width:200px; border: none;}

As you can see I have to either specify the height of the #navcontainer or as I am doing at the moment specify a large margin-top on #divLeftCol - or the #divLeftCol appears behind the menu div #navcontainer instead of below it. I would ideally like to specify min-height: 100% or height: 100% on #navcontainer but it doesn't seem to work. Have also tried float:left; clear:left on #divLeftCol.

So how do I make #divLeftCol always appear just below #navcontainer, no matter how big the menu grows?

atdesign · **Joined:** Fri Feb 24, 2012 12:57 pm **Posts:** 21

Try removing:
float: left; and display: inline;
from your #navcontainer css

ladyr0gue · **Joined:** Fri Feb 17, 2012 4:25 pm **Posts:** 89

atdesign wrote:

Try removing:
float: left; and display: inline;
from your #navcontainer css

eep - thought it had done it but still doesn't work if I remove the margin... :/

Dr.CSS · **Posted:** Sun Apr 22, 2012 5:41 pm

Float all divs left?...

ladyr0gue · **Joined:** Fri Feb 17, 2012 4:25 pm **Posts:** 89

Dr.CSS wrote:

Float all divs left?...

I tried that - need to add clear: left to the bottom div too (or specify width of #divLeftColWrapper as 240px)- but still need to specify menu height or margin height of #divLeftCol for it to appear below as they seem to be on top of one another! I have mucked it up somewhere haven't I...
here's the way the divs are nested

Code:

<div id="divLeftColWrapper">
<div id="navcontainer">{menu template='nav-menu'}</div>
<div id="divLeftCol">
<div class="news">{news}</div>
{content}
</div> </div>

here's what I'm trying to do wit the css
css nav-menu

Code:

#navcontainer { width:200px; min-height: 100%;margin: 0 0 60px 40px; padding: 0;float:left;}

css main template

Code:

#divLeftColWrapper{float: left; }
#divLeftCol {margin: 0 0 0 40px; padding: 15px 0 0 0; width:200px; border: none; float:left; clear:left;}

but for some reason it can't tell what 100% of the menu div height is.

Dr.CSS · **Posted:** Sun Apr 22, 2012 8:08 pm

Sorry, I should have told you first off that it really helps to be able to see the page having trouble as there may be something else making it not work...

ladyr0gue · **Joined:** Fri Feb 17, 2012 4:25 pm **Posts:** 89

Dr.CSS wrote:

Sorry, I should have told you first off that it really helps to be able to see the page having trouble as there may be something else making it not work...

ah you're too good. did you mean template or just whole page? sorry the project isn't live yet so can't send link but but my view source is as follows

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="canonical" href="http://localhost/cmsms/welcome.html" />
<title>example</title>

<base href="http://localhost/cmsms/" />
<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-11 Ted Kulp. All rights reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<link rel="stylesheet" type="text/css" href="http://localhost/cmsms/tmp/cache/stylesheet_562dc4221f2af867c580d1e1f9550839.css" media="all"/>
<link rel="stylesheet" type="text/css" href="http://localhost/cmsms/tmp/cache/stylesheet_909f07ce1704465e5cbbf7152b0f4422.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="http://localhost/cmsms/tmp/cache/stylesheet_6c3a7cea4db916cb77c06fe10ff1ecb4.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="http://localhost/cmsms/tmp/cache/stylesheet_622e4d76be73abc695269fc8bf954923.css" media="screen"/>

<link rel="start" title="Home" href="http://localhost/cmsms/" />
<link rel="prev" title="Home" href="http://localhost/cmsms/" />
<link rel="next" title="About Us" href="http://localhost/cmsms/about-us.html" />

<!--[if IE 6]>
<script type="text/javascript" src="modules/MenuManager/CSSMenu.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-example']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</head><body>
<div id="divWrapper"><a name="top"></a>
<div id="divHeader"><div id="clickHome"> <a href="http://localhost/cmsms/" title="Home" ></a></div> 

  
<ul>

                    <li class="menuactive menuparent parent"><a class="menuactive menuparent parent" href="http://localhost/cmsms/"><span>Home</span></a>


<ul>

        <li class="menuactive"><a class="menuactive" href="http://localhost/cmsms/welcome.html"><span>Welcome</span></a>


</li></ul>
</li>

<li class="parent"><a class="parent" href="http://localhost/cmsms/about-us.html"><span>About Us</span></a>


<ul>

<li><a href="http://localhost/cmsms/example.html"><span>example</span></a>


</li></ul>
</li>

<li><a href="http://localhost/cmsms/news.html"><span>News</span></a>


</li>

<li><a href="http://localhost/cmsms/contact.html"><span>Contact</span></a>


</li>
</ul>
</div>
<div id="divInnerContainer">
<div id="divLeftColWrapper"><div id="navcontainer">
 


<ul>

<li class="parent"><a class="parent" href="http://localhost/cmsms/services.html"><span>Services</span></a>


<ul>

<li class="parent"><a class="parent" href="http://localhost/cmsms/example.html"><span>example</span></a>


<ul>

<li><a href="http://localhost/cmsms/example.html"><span>example</span></a>


</li></ul>
</li>

<li class="parent"><a class="parent" href="http://localhost/cmsms/example.html"><span>example</span></a>

<ul>

<li><a href="http://localhost/cmsms/example.html"><span>example</span></a>


</li></ul>
</li>

<li><a href="http://localhost/cmsms/example.html"><span>example</span></a>


</li>

<li class="parent"><a class="parent" href="http://localhost/cmsms/example.html"><span>example</span></a>


<ul>

<li><a href="http://localhost/cmsms/services/example.html"><span>example</span></a>


</li></ul>
</li>

<li><a href="http://localhost/cmsms/services/example.html"><span>example</span></a>


</li>

<li><a href="http://localhost/cmsms/example.html"><span>example</span></a>


</li>

<li><a href="http://localhost/cmsms/services/example.html"><span>example</span></a>


</li></ul></li>
</ul>

</div><div id="divLeftCol">
<div class="news"><!-- Displaying News Module -->
  <!-- Start News Display Template -->

<a href="http://localhost/cmsms/news.html"><h2 class="h21">Latest News</h2></a>
<ul class="list1">
<li class="firstnewscat">
   <a href="http://localhost/cmsms/index.php?mact=News,cntnt01,default,0&amp;cntnt01number=1&amp;cntnt01detailpage=66&amp;cntnt01category_id=1&amp;cntnt01returnid=66">example</a></li>
</ul>



<div class="NewsSummary">

   <div class="NewsSummaryPostdate">
      Apr 21, 2012
   </div>

<div class="NewsSummaryLink">
<a href="http://localhost/cmsms/news/1/66/example.html" title="example">example</a>
</div>

<div class="NewsSummaryCategory">
   Category: example
</div>

   <div class="NewsSummaryAuthor">
      Posted by: example
   </div>

   <div class="NewsSummarySummary">
      This is example text.
   </div>

   <div class="NewsSummaryMorelink">
      [<a href="http://localhost/cmsms/news/1/66/example.html">More</a>]
   </div>


  
</div>
<!-- End News Display Template -->

</div>

</div> </div>          
<div id="divMidCol"><h1>Header</h1>
<p></p>
<!-- Add code here that should appear in the content block of all new pages --></div>
<div id="divRightCol"><div id="rColTitle"></div>
<img src="http://localhost/cmsms/uploads/images/example.jpg" name="Image1" alt="example" /><div class="rightColContent">
</div> <div id="address">
<div id="socA">
<a class="fb" title="Find us on Facebook" href="http://www.facebook.com/pages/example" target="_blank"></a><a class="tw" title="Follow us on Twitter" href="http://twitter.com/example" target="_blank"></a></div></div></div>
<div id="divFooter">
</div></div></div>
</body>
</html>

and the template is here

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
{if isset($canonical)}
<link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}
<link rel="canonical" href="{$content_obj->GetURL()}" />
{/if}
<title>{title}</title>
{metadata}
{cms_stylesheet}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}
{literal}
<!--[if IE 6]>
<script type="text/javascript" src="modules/MenuManager/CSSMenu.js"></script>
<![endif]-->{/literal}
{global_content name='Google Analytics'}
</head><body>
<div id="divWrapper"><a name="top"></a>
<div id="divHeader"><div id="clickHome">{cms_selflink dir="start" text=""}</div>{menu template='header-menu'}</div>
<div id="divInnerContainer">
<div id="divLeftColWrapper"><div id="navcontainer">
{menu template='nav-menu'}</div><div id="divLeftCol">
<div class="news">{if $page_alias != 'news'}
{news number="1" detailpage="news"}
{/if}
</div>
{content block='Left content block'}
</div> </div>          
<div id="divMidCol">{if isset($pagetitle)}{$pagetitle}{/if}
{content}{content block='main module' label='This box is for module calls only, no other text etc.' oneline='true'}</div>
<div id="divRightCol"><div id="rColTitle">{content block='Right Content Title' label='(Right content header - Only used on contact page at present)' oneline='true'}</div>{content block='Image1 alt text' oneline='true' assign='alt'}
{assign var='alt' value=$alt|strip_tags|cms_escape}{* in case users enter wonky stuff *}
{content_image block='Image1' dir='images' alt=$alt}<div class="rightColContent">
{content block='Right content block'}</div>{content block='modules' label='This box is for module calls only, no other text etc' oneline='true'} {global_content name='contact'}</div>
<div id="divFooter">
</div></div></div>
</body>
</html>

thanks for taking the time to look

mcDavid · **Posted:** Sun Apr 22, 2012 9:47 pm

The answer is not in here, so there's definitely something else going on. It's very hard to tackle these kind of problems without using webbrowser development tools so a live example would really help.

ladyr0gue · **Joined:** Fri Feb 17, 2012 4:25 pm **Posts:** 89

mcDavid wrote:

The answer is not in here, so there's definitely something else going on. It's very hard to tackle these kind of problems without using webbrowser development tools so a live example would really help.

sure, thanks anyway - I will carry on thinking and if I still haven't figured it out will post a link when its live

Its not a major issue as I can make the user able to modify pages and just edit the margin by hand when I add pages, but it's a niggle nonetheless

ladyr0gue · **Joined:** Fri Feb 17, 2012 4:25 pm **Posts:** 89

Hello my dears, just to say that I haven't yet found an answer to my problem - but I have just uploaded the site onto a folder on the live server so if you wouldn't mind having a look -

The div in question is divLeftCol, which contains div.news and sometimes images and it sits behind or on top of, rather than below the dynamic menu in the left column. As you can see I have had to give it's container divLeftCol a ridiculous top margin of 277px and should the user add any pages this will need to be edited manually or the menu will cover it.

it's not on the front page but on all of the following pages
edit: deleted url

thanks

Dr.CSS · **Posted:** Tue May 01, 2012 4:31 pm

At the bottom of the nav div add <div style='clear:both;'></div>...

When you use 'position' on an element it may pull it above the layout, in your case it is the UL, when this happens the container it is in, #navcontainer, contracts till it hits something to hold it's shape and anything below it will slide up/slip under it...

Think of each 'box' as being stretchy like a rubber band that holds all of it's content in the 'box', when you float or position anything in it it's like you pull that item out of the box and hold it in place above the 'box' and the 'box' shrinks/contracts letting anything below it to move up, if you put a clear div at the bottom of the 'box' under the floated or positioned items it will hold it's shape...

ladyr0gue · **Joined:** Fri Feb 17, 2012 4:25 pm **Posts:** 89

I got all excited there and tried it - but for some strange reason its still not having it. tried putting it in the menu template, in the nav container div, and below it. both with "double quotes" and without. as you can see here, with only a 10px margin it's still hiding!
edit: deleted url

have I applied too much positioning in the menu css? I'm getting really stuck! help me please Dr....

Dr.CSS · **Posted:** Tue May 01, 2012 5:35 pm

Don't float the #navcontainer li and remove the position from the first #navcontainer ul ul under it...

ladyr0gue · **Joined:** Fri Feb 17, 2012 4:25 pm **Posts:** 89

Dr.CSS wrote:

Don't float the #navcontainer li and remove the position from the first #navcontainer ul ul under it...

You, Sir, are my personal hero. Thank you once again :-*

Dr.CSS · **Posted:** Tue May 01, 2012 7:25 pm

Just a humble css Dr. making my rounds...

[solved] css trouble - making div appear under dynamic menu?

Who is online