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 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS div positionings

    in general, say if we have "sections" on a page and each section is in a div.
    how do we align the divs so that the divs/sections appear one after the other?

    Example, i have a search page.
    the top div section basically has columns for a heading section and a values section:

    Code:
    #divAdvSearchHeadingsColumn
    {
    	float:left;
    	width:15em;	
    	padding-top: 5px;
    	padding-bottom:5px;	
    }
    
    .divAdvSearchHeadings
    {
    	width:15em;
    }
    
    
    .divAdvSearchValues
    {
    	width:25em; 	
    	padding-top: 2px;	
    	padding-bottom:6px;
    }
    
    .divAdvSearchValuesColumn
    {
    	width:30em; 		
    	padding-bottom:4px;
    }
    
    
    #divSortByOptions
    {	
    	position:relative;
    }
    
    #divAdvSearchFields
    {
    	position:absolute;
    	
    }
    
    #divAdvSearchCommands
    {
    	position:absolute;
    	top:32em;	
    }
    this displays fine. (or so I think)

    And then after all this, I have a div for showing the results.

    Code:
    .divSearchItems
    {
    	position:relative;
    	top:32em;	
    }

    this *seems* to show correctly.

    I now want to add a pager div however, it does not appear to sit at the bottom of the page AFTER the divSearchItems but rather on the right about a quarter up from the bottom of the page!

    Code:
    .divFooterPaging
    {
    	position:relative;
    	float:right;
    }


    i am not a stylist but just a pure backend developer so what am I doing wrong and any tips here?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello firehawk,
    It's hard to tell much when all we get is the CSS. You need a DocType, the order you present elements in your markup matters... there could be other errors in code you don't give us.

    Normally to float an element you need 3 things:
    1. a DocType
    2. an element with a width
    3. float
    left/right set on that element

    If that little bit of info is not enough help, quote your enitre code here or, even better, link us to the test site.
    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

  • #3
    New Coder
    Join Date
    Feb 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks. sorry about this.
    unfortunately dont have link to the test site as its internal only.

    there IS a doctype.

    I am using ASP.NET and master pages/content pages/usercontrols.
    the master page has a doctype:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    when I view the source of the page, I see it clearly also.


    as for the HTML code. hmm. this would be tricky somewhat. so bear with this and ask me questions if you dont understand:

    Code:
    <asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Advanced Publication Search</h2>
    
        <div id="divAdvSearchFields">
            <div id="divAdvSearchHeadingsColumn">
                <div class="divAdvSearchHeadings">        
                    <b><asp:Literal runat="server" ID="litPublicationNumber" Text="Publication Number " /></b> 
                </div>
                <br />
                <div class="divAdvSearchHeadings">        
                    <b><asp:Literal runat="server" ID="litPublicationName" Text="Publication Name " /></b>        
                </div>
                <br />
                <div class="divAdvSearchHeadings">        
                    <b><asp:Literal runat="server" ID="litCourseCode" Text="Course Code " /></b>        
                </div>
                <br />
                <div class="divAdvSearchHeadings">        
                    <b><asp:Literal runat="server" ID="litVersionNo" Text="Version No " /></b>
                </div>
                <br />
                <div class="divAdvSearchHeadings">            
                    <b><asp:Literal runat="server" ID="litPubStatus" Text="Publication Status " /></b>            
                </div>  
            </div>
              
              
            <div class="divAdvSearchValuesColumn">
                <div class="divAdvSearchValues">
                    <asp:TextBox runat="server" ID="txtPublicationNumber" Width="110px" />
                </div>
                <div class="divAdvSearchValues">
                    <asp:TextBox runat="server" ID="txtPublicationName" Width="110px" />        
                </div>
                <div class="divAdvSearchValues">
                    <asp:TextBox runat="server" ID="txtCourseCode" Width="110px" />
                </div>
                <div class="divAdvSearchValues">
                    <asp:TextBox runat="server" ID="txtVersionNo" Width="110px" />
                </div>
                <div class="divAdvSearchValues">
                    <asp:DropDownList runat="server" ID="ddlPublicationStatus" Width="120px" />
                </div>
                
            </div>   
                    
            
            <div id="divSortByOptions">
                <b><asp:Literal runat="server" ID="litSortBy" Text="Sort By" /></b>            
                <br />
                <asp:RadioButton runat="server" ID="rdoBtnPublicationName" GroupName="SortBy" Text="Publication Name" />
                <br />
                <asp:RadioButton runat="server" ID="rdoBtnPublicationNumber" GroupName="SortBy" Text="Publication Number" Checked="true" />
                <br />
                <asp:RadioButton runat="server" ID="rdoBtnCourseCode" GroupName="SortBy" Text="Course Code" />
                <br />
                <asp:RadioButton runat="server" ID="rdoBtnDateModified" GroupName="SortBy" Text="Date Modified" />
                <br />
                <asp:RadioButton runat="server" ID="rdoBtnDateLastOrdered" GroupName="SortBy" Text="Last Ordered" />                        
            </div>
            
            
            <div id="divAdvSearchSortOrder">
                <b><asp:Literal runat="server" ID="litSortByHeading" Text="Sort Order" /></b>
                <br />
                <asp:DropDownList runat="server" ID="ddlSortBy">
                    <asp:ListItem Text="ASC" Value="ASC" />
                    <asp:ListItem Text="DESC" Value="DESC" />
                </asp:DropDownList>
            </div>
            
        </div>
        
        <div id="divAdvSearchCommands">
                <asp:Button runat="server" ID="cmdSearch" Text="Search" OnClick="cmdSearch_Click" /> 
                <br /> 
                <asp:Label runat="server" ID="lblError" ForeColor="Red" />        
        </div>
            
        
        
        <br /><br /><br />
        <div id="divSearchItems" runat="server" class="divSearchItems">
            <asp:Repeater runat="server" ID="rptSearchItems" OnItemCommand="rptSearchItems_OnItemCommand" OnItemDataBound="rptSearchItems_OnItemDataBound">
                
                <ItemTemplate>
                    <div class="divAvailablePubRow"> 
                                <div>
                                    <asp:Image CssClass="divImageThumbnail" runat="server" ID="imgPublicationThumbnail" />                
                                </div> 
                                
                                <div>
                                    <b>Cust-Code: </b>
                                    <asp:Label runat="server" ID="lblCustomerCode" />                
                                </div>   
                                <div>
                                <b>Pub Name: </b>
                                    <asp:Label runat="server" ID="lblPublicationName" />
                                </div> 
                                <div>
                                 <b>Price: </b>
                                    <asp:Label runat="server" ID="lblPublicationPrice" />
                                </div>  
                                <div>             
                                    <asp:LinkButton runat="server" ID="lnkViewPublication" CommandName="View" Text="View" />
                                </div>  
                        <div class="divRowGap"></div>              
                    </div>
                </ItemTemplate>   
            </asp:Repeater>
            
            <br />
            <div id="divFooterPaging" class="divFooterPaging" runat="server" visible="false">     
                <uc:PagerControl runat="server" ID="ucPager" />                
            </div>
        </div>
    
    <div id="divSearchNoItems" class="divAdvSearchNoItems" runat="server" visible="false">
        Sorry, no items found based on your search critera
    </div>
    
    </asp:Content>

    the uc:PagerControl is just a custom usercontrol that displays page numbers in a dropdownlist. no styling at all on that control.


  •  

    Posting Permissions

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