divs within a div. not properly aligned.

rleahong · 12-11-2012, 02:47 PM

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>

VIPStephan · 12-11-2012, 02:49 PM

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?

Excavator · 12-11-2012, 04:57 PM

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.

rleahong · 12-14-2012, 03:39 PM

I am using float

<STYLE type="text/css">

</STYLE>

Excavator · 12-14-2012, 04:51 PM

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?

rleahong · 01-08-2013, 03:00 PM

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>
<%

Excavator · 01-11-2013, 07:46 PM

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.

rleahong · 01-30-2013, 08:58 AM

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;
}

Excavator · 01-30-2013, 09:38 AM

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.

.