...

View Full Version : CSS div positionings



firehawk
12-01-2009, 11:29 PM
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:



#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.



.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!



.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?

Excavator
12-01-2009, 11:40 PM
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:

a DocType
an element with a width
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.

firehawk
12-01-2009, 11:48 PM
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:



<!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:



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum