Help: How do I stack my div boxes?

[DannyM]

Evening folks,

I'm doing a website for a module at Uni and I'm having a little trouble just now. I'm trying to create a separate div for my left navigation that goes above the box to create a little login section, however, this happens when I try to add it:



I tried:

clear: both

But that just does this (see right):



My CSS for my "leftnav" section:

/* Left Nav */



#leftnav {

	padding: 0;

	background: #DDD;

	margin: 0 0 0 10px;

	min-height: 50px;

	height: 100%;

	border: 1px solid #999;

	float: left; 

	width: 180px;

}



#leftnavlogin {

	padding: 0;

	background: #DDD;
	
	margin: 10px 0 0 10px;

	min-height: 50px;

	height: 100%;

	border: 1px solid #999;

	float: left; 

	width: 180px;
	
	clear: both;

}



div.leftnavcontainer {

	margin: 10px 10px 10px 10px;

	background: #f4f4f4;

	height: 100%;

}

My leftnav.php file:

	<!-- Left column Section -->



    <div id="leftnav">
    
        <div class="leftnavcontainer">
        
        <form name="search" action="search.php" method="get" class="form1">
          
                <span class="leftnav">Search</span>
                <table>

                        <tr valign="top">
                       
                        <td align="left"><input type="text" name="searchTitle" title="Search for news articles" id="searchTitle" size="18" /></td>

                    </tr>
                    
                        <tr valign="top">

                        <td align="left"> <input type="submit" name="submit" id="submit" value="Submit" />

                        </td>

                    </tr>

                </table>

        </form>

          <p class="leftnav">Quick-Links</p>

            <ul id="leftnavlist">

                <li><a href="index.php">News</a></li>

                <li><a href="./results.html">Results</a></li>

                <li><a href="./fixtures.html">Fixtures</a></li>

                <li><a href="./squad.html">Squad</a></li>

                <li><a href="./images.html">Images</a></li>

                <li><a href="./video.html">Video</a></li>

            </ul><br />

        </div>
        
    </div>
    
    <div id="leftnavlogin">
		
        <div class="leftnavcontainer">
        
        <p>Login BOX</p>
    
    	</div>
        
    </div>

Apologies for any 'noobness' but asides from just starting the whole layout again, I'm a little lost just now.

Thanks for any help

[Mblaster]

Ummm, move the 'leftnavlogin' div to before the 'leftnav' div in the HTML!

I'm assuming you want to get what you have in the second screenshot, but with the login box above the navigation.

[DannyM]

Ummm, move the 'leftnavlogin' div to before the 'leftnav' div in the HTML!

I'm assuming you want to get what you have in the second screenshot, but with the login box above the navigation.

Yes I do, but I want the rightnav bit to be inline with the top of the middle and leftnav if that makes sense?

[scaryjim]

The positioning of floats is complex in HTML and not particularly consistently implemented either!! The best way of acheiving what you're after is not to have both the leftnav and login boxes floating, but to put them both in a containing div that is floating - so you'd have something like:

#leftnavcontainer { float: left; }

in your CSS and

<div id="leftnavcontainer">
  <div id="leftnavlogin">
  ...
  </div>
  <div id="leftnav">
  ...
  </div>
</div>

- this should be much easier to manage than using several floats.

However, I'd personally recommend that you use either fixed or absolute positioning instead of floats, which are in many ways easier to control.

[DannyM]

The positioning of floats is complex in HTML and not particularly consistently implemented either!! The best way of acheiving what you're after is not to have both the leftnav and login boxes floating, but to put them both in a containing div that is floating - so you'd have something like:

#leftnavcontainer { float: left; }

in your CSS and

<div id="leftnavcontainer">
  <div id="leftnavlogin">
  ...
  </div>
  <div id="leftnav">
  ...
  </div>
</div>

- this should be much easier to manage than using several floats.

However, I'd personally recommend that you use either fixed or absolute positioning instead of floats, which are in many ways easier to control.

That makes so much sense, I feel like a right noob now, ha!

I will try that, but I don't see how it wouldn't work, thank you very much!

[DannyM]

Did the trick jim!



Thanks again

[scaryjim]

No worries It's a good rule of thumb to have as few floats as possible on any given page, because they do interact with each other in an odd way

[jim]

Todays is?

Tut tut.

[DannyM]

Todays is?

Tut tut.

Tut tut, you actually noticed

I'm stripping that out soon. Going to put it in the login section, welcome joe blogs today is the xx/xx/xx and it's xx:xx

Thanks for the spot though