Results 1 to 3 of 3

Thread: Newbie needs help with dropped content

  1. #1
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Newbie needs help with dropped content

    I have been following the tutorial at Max Design on creating a web page layout. My side-by-side DIVs aren't working though. The first one called, displays as it should and the other drops down below it. Uncertain how to fix this. See it here. The yellow "content box" is dropped below where the "menu box" ends.

    It would seem that the widths of the two DIVs exceeds the page width but when I reduce them to half that width, the problem persists.

    Can anyone help?

    Derek

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,412
    Thanks
    78
    Thanked 3,432 Times in 3,393 Posts
    Blog Entries
    12

    Default

    I don't know anything about Max Design but, adding these two property/value pairs to the menu definitions seems to do the trick:

    Code:
    	#menu {
    	  margin: 0px 0px 2px 0px;
    	  float:left;
    	  clear:left;
    	  padding: 10px;
    		height: auto;
    	  width: 430px;
    	  background-color: aqua;
    		border: 1px solid black;
    	}
    However, as it is being used by multiple elements, it should technically be a class, not an id. Not changing this will cause the page to fail w3c validation and also cause problems with properly written javascript (if any) designed to work with that id. Other problems could also arise. To make it a class:

    Code:
    	.menu {
    	  margin: 0px 0px 2px 0px;
    	  float:left;
    	  clear:left;
    	  padding: 10px;
    		height: auto;
    	  width: 430px;
    	  background-color: aqua;
    		border: 1px solid black;
    	}
    and the elements that use it would be class="menu" not id="menu":

    HTML Code:
        <div class="menu">menu1</div>
        <div class="menu">menu2<p>and some more content<br>to test the auto height</div>
        <div class="menu">menu3</div>
        <div class="menu">menu4</div>
    Note: Due to a 1 in 100 IE only bug, style definition opening braces ({) should have one space before them:

    .menu {

    not:

    .menu{
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes, that corrected the problem and I've followed your advice on the other items as well. Thanks for the quick reply.

    Derek

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •