Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    divs within a div. not properly aligned.

    CAN YOU HELP ME PLEASE

    I have 2 div inside a container div
    (which are to appear side by side to the left and right ).

    The div that is to be to the right side of the inner div ("srchform), is
    positioned below the left div("srchform") although right aligned.

    Also the inner div ("srchform") has CSS property set as "fixed"; yet does not
    remain in fixed position while scrolling down the web page.

    <div id="CONTAINER" name="CONTAINER">

    <div id="SRCHFORM" name="SRCHFORM">



    </div>
    <div id="RESULTS" name="RESULTS">


    </div>

    </div>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,662
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Remove these name attributes, they are invalid. And then show us your complete code please. How should we know what you’re doing wrong if you don’t show the CSS that is applied?

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello rleahong,
    It sounds like you are trying to use align to position div elements into a two column layout. That's not going to work very well. We typically use floats to put elements beside each other... see a float tutorial here.

    Here is an example of a simple 2 column layout that may help.

    And VIP is right, we need all the information (both CSS and Markup) to be able to answer your question.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Jul 2010
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am using float


    <STYLE type="text/css">
    <!--

    #CONTAINER{
    background-color:#FFCCC;
    position: absolute;
    left :0;
    top : 600;
    width : 930;
    text-align : left;
    margin-left: auto;
    margin-right: auto;
    }

    #RESULTS{
    background-color:#FFCCC;
    float : left;
    position: absolute;
    top: 600;
    width: 600;
    }
    #SRCHFORM{
    background-color: #FFCCC;
    float : left;
    position: fixed;
    top: 600;
    width: 300;
    }
    -->
    </STYLE>

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Your use of positioning is over-riding your float. You have no px measurement on your widths.
    You should show us your entire code, there are so many basic mistakes in what you've shown us so far that there are surely more in what you haven't shown us.

    Did you look at that example on building a 2 column layout?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Jul 2010
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is the full Information you requested. I have deviated a little to explain the whole matter so you would not be confused ( I hope ) when you see everything at once.



    The "SRCHFORM" div was placed at the bottom of web page originally with CSS property
    #SRCHFORM {
    position : absolute;
    top : 3000;
    left : 5;
    width : 700;

    }

    to make space for "ADDROYALTYCREDITOR" and "ROYALTYCREDITOR" div to appear aboce left and right respectively
    using CSS property .

    The "ADDROYALTYCREDITOR" and "ROYALTYCREDITOR" div was to appear above "SRCHFORM" div but below the
    "ROYALTYALBUM" div when the "ROYALTY SETUP" menu link was clicked. However on clicking the "SETUP" menu
    link , the "ADDROYALTYCREDITOR" and "ROYALTYCREDITOR" div did not appear, leaving me to think that the
    actual height of web page needed to show the contents of these div caused it to overlap with "SRCHFORM"
    div below.

    Also the "SRCHCREDITOR" div which should have appeared along with the "SRCHFORM" div
    ( as mentioned before ) further below , did not appear.


    So , with the "ADDROYALTYCREDITOR" and "ROYALTYCREDITOR" div not appearing , I decided to
    change the CSS property of the "SRCHFORM" div so as to make it pop up on the Side Bar , rather than
    below. It was at this point I tried to experiment with putting the "SRCHFORM" and the "RESULTS"
    div within a container div inorder to let them appear side by side to the left and right of the
    Web page , hence making space for the "ADDROYALTYCREDITOR" and "ROYALTYCREDITOR" div to appear
    when the "ROYALTY SETUP" Menu link is clicked.

    In doing so, the full ROYALTY SETUP started to display on the web page.

    Now I got the problem with the "SRCHFORM" div and "RESULTS" div within the container div appearing
    as in the message I posted in this CSS Forum.









    Code:
    %>
            <STYLE type="text/css">
            <!--
                   #LOGGO{
                          background-color:#FFCCC;
                          height: 30;
                          left:  1%;
                          position: absolute;
                          top:   5;
                          width: 30%;
                   }
    	           #ANIMATION{
                          background-color:#FFCCC;
                          height: 30;
                          left:  30%;
                          position: absolute;
                          top:   5;
                          width: 30%;
                   }
                   #BANNERADS{
                          background-color:#FFCCC;
                          height: 30;
                          left:  60%;
                          position: fixed;
                          top:   5;
                          width: 40%;
                   }
                   #MENUBAR{
                          background-color:#FFCCC;
                          height: 30;
                          left:  1;
                          position: absolute;
                          top:   250;
                          width: 40%;
                   }
                  #MENU{
                          background-color:#FFCCC;
                          height: 30;
                          left:  1;
                          position: absolute;
                          top:   300;
                          width: 100%;
                   }
    
                   #ADDROYALTYCREDITOR{
                          background-color:  #FFCCC;
                          left:  50;
                          position: absolute;
                          top:   2000;
                          width: 300;
                   }
    
                   #ROYALTYCREDITOR{
                          background-color:  #FFCCC;
                          left:  500;
                          position: absolute;
                          top:   2000;
                          width: 300;
                   }
    
                   #ROYALTYSONG{
                          background-color:  #FFCCC;
                          left:  50;
                          position: absolute;
                          top:   1300;
                          width: 300;
                   }
    
                   #ROYALTYALBUM{
                          background-color:  #FFCCC;
                          left:  50;
                          position: absolute;
                          top:   1300;
                          width: 300;
                   }
                   
    
                   #SRCHCREDITOR{
                          background-color:  #FFCCC;
                          left:  0;
                          position: absolute;
                          top:   4000;
                          width: 300;
    	         height: 400;
                   }
                   #CONTAINER{
                          background-color:#FFCCC;
                          position: absolute;
    	         left    :0;
                          top     :  600;
                          width   : 930;
    	         text-align : left;
    	         margin-left: auto;
    	         margin-right: auto;
                   }
                   
                   #BOTTOM{
                          background-color:#FFCCC;
                          float   : left;
                          position: absolute;
                          top:  600;
                          width: 600;
                   }
                   #SRCHFORM{
                          background-color:  #FFCCC;
                          float   : left;
                          position: fixed;
                          top:   600;
                          width: 300;
    		        }
    
                   #WIRETRANSFER{
                          background-color:#FFCCC;
                          height: 30;
                          left:   50;
                          position: absolute;
                          top:   2200;
                          width: 400;
                   }
    
             -->    
             </STYLE> 
    
    		 
    		 
    	<DIV ID="LOGGO" NAME="LOGGO">
    	       <IMG SRC="business-clipart-opportunity.jpg" WIDTH="300" HEIGHT="200">
    	</DIV>
    	 
         <div id="BANNERADS" NAME="BANNERADS">
    	      <a href="http://www.freelancer.com/affiliates/rleahong" id="ADVERTISER"><img src="NUCLEARWAR.GIF" id="BANNER" width="400" height="200"></a>		
    	 </div>
        
         <DIV ID="ANIMATION" NAME="ANIMATION">
    	       <IMG SRC="REGGAESITEFORSALE.GIF" ID="IMAGES" WIDTH="300" HEIGHT="200">
    	 </DIV>
    
    %>
        <DIV ID="MENUBAR" NAME="MENUBAR">
    <%
         RESPONSE.WRITE("<HTML>")
         RESPONSE.WRITE("<HEAD>")
         RESPONSE.WRITE("</HEAD>")
         RESPONSE.WRITE("<BODY BGCOLOR='#FFCCC'>")
    
        
       %>
        </DIV>
      
    
    %>   
        <DIV ID="MENU" NAME="MENU">
      <%
         RESPONSE.WRITE("<TABLE BORDER='10' BGCOLOR='BLUE'>")
         RESPONSE.WRITE("<TR>")
         RESPONSE.WRITE("<TD BGCOLOR='YELLOW'>")
         %>     
              <A HREF="ROYALTY.ASP?ROYALTYCREDITOR=DISTRIBUTOR"><B><FONT FACE='ALGERIAN' SIZE='8' COLOR='RED'>DISTRIBUTOR</FONT></B></A>
         <%
         RESPONSE.WRITE("</TD>")
         RESPONSE.WRITE("<TD BGCOLOR='RED'>")
         %>     
              <A HREF="ROYALTY.ASP?ROYALTYCREDITOR=PRODUCER"><B><FONT FACE='ALGERIAN' SIZE='8' COLOR='YELLOW'>PRODUCER</FONT></B></A>
         <%
         RESPONSE.WRITE("</TD>")
         RESPONSE.WRITE("<TD BGCOLOR='YELLOW'>")
         %>     
              <A HREF="ROYALTY.ASP?ROYALTYCREDITOR=WRITER"><B><FONT FACE='ALGERIAN' SIZE='8' COLOR='GREEN'>WRITER</FONT></B></A>
         <%
         RESPONSE.WRITE("</TD>")
         RESPONSE.WRITE("<TD BGCOLOR='YELLOW'>")
         %>     
              <A HREF="ROYALTY.ASP?ROYALTYCREDITOR=GROUP"><B><FONT FACE='ALGERIAN' SIZE='8' COLOR='RED'>GROUP</FONT></B></A>
         <%
         RESPONSE.WRITE("</TD>")
    
         RESPONSE.WRITE("<TD BGCOLOR='RED'>")
         %>     
              <A HREF="ROYALTY.ASP?ROYALTYCREDITOR=SINGER&COMMAND=<%=HCOMMAND%>&ACTION=<%=HACTION%>"><B><FONT FACE='ALGERIAN' SIZE='8' COLOR='YELLOW'><B>SINGER</FONT></B></A>
         <%
         RESPONSE.WRITE("</TD>")
        
     
         RESPONSE.WRITE("</TR>")
         RESPONSE.WRITE("</TABLE>")
    
    
         RESPONSE.WRITE("<TABLE BORDER='10'  BGCOLOR='BLUE'>")
         RESPONSE.WRITE("<TR>")
         RESPONSE.WRITE("<TD BGCOLOR='YELLOW'>")
         %>     
              <A HREF="ROYALTY.ASP?ROYALTYCREDITOR=<%=HHROYALTYCREDITOR%>&COMMAND=CALCULATE&ACTION=PRINT"><B><FONT FACE='ALGERIAN' SIZE='5' COLOR='RED'>CALCULATE ROYALTY</FONT></B></A>
         <%
         RESPONSE.WRITE("</TD>")
         RESPONSE.WRITE("<TD BGCOLOR='RED'>")
         %>     
              <A HREF="ROYALTY.ASP?ROYALTYCREDITOR=<%=HHROYALTYCREDITOR%>&OKBUTTON=FIRST&COMMAND=SETUP&DESCRIPTION=ALBUM&ROYALTYCREDITOR=DISTRIBUTOR&ALBUMCOD=4"><B><FONT FACE='ALGERIAN' SIZE='5' COLOR='YELLOW'>ROYALTY SETUP</FONT></B></A>
         <%
         RESPONSE.WRITE("</TD>")
         RESPONSE.WRITE("<TD BGCOLOR='YELLOW'>")
         %>     
              <A HREF="ROYALTY.ASP?ROYALTYCREDITOR=<%=HHROYALTYCREDITOR%>&COMMAND=EMAIL&ACTION=PRINT"><B><FONT FACE='ALGERIAN' SIZE='5' COLOR='GREEN'><B>EMAIL ROYALTY STATEMENT</FONT></B></A>
         <%
         RESPONSE.WRITE("</TD>")
         RESPONSE.WRITE("<TD BGCOLOR='YELLOW'>")
         %>     
              <A HREF="ROYALTY.ASP?ROYALTYCREDITOR=<%=HHROYALTYCREDITOR%>&COMMAND=PAYMENT&ACTION=GENERATE&PAYMENTMETHOD=PAYPAL"><B><FONT FACE='ALGERIAN' SIZE='5' COLOR='RED'>ROYALTY PAYMENT</FONT</B></A>
         <%
         RESPONSE.WRITE("</TD>")
         RESPONSE.WRITE("</TR>")
         RESPONSE.WRITE("</TABLE>")
    
    
       
     %>
     </DIV>       
    
     <DIV ID="CONTAINER"   NAME="CONTAINER">
        <%
    
                   RESPONSE.WRITE("<TABLE BORDER='10' WIDTH='600'>")
                   RESPONSE.WRITE("<TR>")
                   RESPONSE.WRITE("<TD BGCOLOR='YELLOW'>")
                   %>     
                           <A HREF="ROYALTY.ASP?ACTION=SEARCH&ROYALTYCREDITOR=<%=HHROYALTYCREDITOR%>&COMMAND=<%=HCOMMAND%>#SEARCH_ROYALTY"><B><FONT FACE='ALGERIAN' SIZE='6' COLOR='RED'><B>SEARCH ROYALTY DATABASE</FONT><B></A>
                   <%
                   RESPONSE.WRITE("</TD>")
                   RESPONSE.WRITE("</TR>")
                   RESPONSE.WRITE("</TABLE>")
                
            %> 
               <DIV ID="RESULTS"   NAME="RESULTS">
            <%
        	   IF HCOMMAND="CALCULATE"   THEN
                         IF    HACTION="CALCULATE"   THEN
                         
                         END IF
                    END IF    
                    IF   HCOMMAND= "SETUP"     THEN
    				
    	   END IF
                    IF   HCOMMAND="EMAIL"  THEN
                        IF   HACTION="EMAIL"   THEN
                               EMAIL_ROYALTYLEDGER_CHECKBOX
                        END IF
                    END IF
               
                    IF     HCOMMAND = "PAYMENT"     THEN
                      
                    END IF
        %>			
           </DIV>
    	   <DIV ID="SRCHFORM" NAME="SRCHFORM">
           <% 
    			
           %>
    	   
           </DIV>
    
    </DIV>
    %>
     <DIV  ID="SRCHCREDITOR" NAME="SRCHCREDITOR">
     
     
     </DIV
    
        <DIV ID="ROYALTYALBUM" NAME="ROYALTYALBUM">
    <%
            IF HCOMMAND="SETUP"   THEN
                    IF HDESCRIPTION="ALBUM"   THEN
                          MANAGE_ROYALTYALBUM
                    END IF
            END IF
    %>
        </DIV>
    <%
    %>
        <DIV ID="ADDROYALTYCREDITOR"  NAME="ADDROYALTYCREDITOR">
    <%
             IF HCOMMAND="SETUP"    THEN
    
                     IF  HHROYALTYCREDITOR="DISTRIBUTOR"   THEN
                     
                     END IF
                     IF  HHROYALTYCREDITOR="WRITER"        THEN
                                   
    
                     END IF
                     IF  HHROYALTYCREDITOR="PRODUCER"      THEN
                     
    
                     END IF
            END IF
    %>
       </DIV>
    <%
    
    
    %>
        <DIV ID="ROYALTYCREDITOR"  NAME="ROYALTYCREDITOR">
    <%
               IF HCOMMAND="SETUP"     THEN
                       MANAGE_ROYALTYCREDITOR
               END IF
    
    %>
       </DIV>
    <%
    Last edited by VIPStephan; 01-08-2013 at 06:22 PM. Reason: added code BB tags

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Wow, that is a bit of a mess.
    You try to position everything but your invalid way of doing it isn't working. top: 5; and height: 30; don't mean anything. You need some form of measurement there.

    I would suggest validating this code first. See the links about validation in my signature line. There is a validator for CSS and one for markup.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Jul 2010
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    VALIDATED ROYALTY.CSS


    #LOGGO{
    height: 200px;
    left: 1px;
    position: absolute;
    top: 5px;
    width: 300px;
    }
    #ANIMATION{
    height: 200px;
    left: 300px;
    position: absolute;
    top: 5px;
    width: 300px;
    }
    #BANNERADS{
    height: 200px;
    left :600px;
    position: fixed;
    top: 5px;
    width: 300px;
    }
    #MENUBAR{
    height: 30px;
    left: 1px;
    position: absolute;
    top: 250px;
    width: 800px;
    }
    #MENU{
    height: 30px;
    left: 1px;
    position: absolute;
    top: 300px;
    width: 900px;
    }

    #ADDROYALTYCREDITOR{
    left: 5px;
    position: absolute;
    top: 2000px;
    width: 300px;
    }

    #ROYALTYCREDITOR{
    left: 500px;
    position: absolute;
    top: 2000px;
    width: 300px;
    }

    #ROYALTYSONG{
    left: 50px;
    position: absolute;
    top: 1300px;
    width: 300px;
    }

    #ROYALTYALBUM{
    left: 50px;
    position: absolute;
    top: 1300px;
    width: 300px;
    }


    #MIDDLE{
    left: 1px;
    position: absolute;
    top: 4000px;
    width: 300px;
    height: 400px;
    }
    #CONTAINER{
    position: absolute;
    left :0px;
    top : 600px;
    width : 930px;
    text-align : left;
    margin-left: auto;
    margin-right: auto;
    }

    #BOTTOM{
    float : left;
    position: absolute;
    top: 600px;
    width: 600px;
    }
    #SRCHFORM{
    float : left;
    position: fixed;
    top: 600px;
    width: 300px;
    }

    #WIRETRANSFER{
    height: 30px;
    left: 50px;
    position: absolute;
    top: 2200px;
    width: 400px;
    }

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    All this stuff:
    Code:
    <% IF HCOMMAND="CALCULATE" THEN IF HACTION="CALCULATE" THEN END IF END IF IF HCOMMAND= "SETUP" THEN END IF IF HCOMMAND="EMAIL" THEN IF HACTION="EMAIL" THEN EMAIL_ROYALTYLEDGER_CHECKBOX END IF END IF IF HCOMMAND = "PAYMENT" THEN END IF %>
    That's not html and makes your code hard to edit. I think it might be easier if you post a rendered version of your code. --view your site in a browser then copy the source from the View Source menu selection.

    ...

    I still say you should not use so much ap. http://www.tyssendesign.com.au/artic...ning-pitfalls/

    You have several cascading problems that I can see right off though. You have #menu set at a height of 30px but you put two tables in it that are easily 300px high.

    Then #container, at 930px wide, holds a 600px wide table and 930px wide #results. To make those two elements go beside each other, their total width can't be more than the 930px wide parent.

    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.


    You would use float to put them side by side. http://css.maxdesign.com.au/floatutorial/

    ...

    Maybe looking at a very basic 2-column layout would give you a start.

    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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