CSS Equal Columns with a twist?

I need equal column heights for 2 DIVs, but here's the twist
- the
content in each must be bottom-aligned. All the hacks and JS
code I
found to make equal heights adds the extra space to the
bottom, meaning
content can't shift down to be bottom-aligned. Is this
possible (with
pure DIVs and no tables)?
Alec Fehl, MCSE, A+, ACE, ACI
Adobe Community Expert
AUTHOR:
Microsoft Office 2007 PowerPoint: Comprehensive Course
(Labyrinth
Publications)
Welcome to Web Design and HTML (Labyrinth Publications)
CO-AUTHOR:
Microsoft Office 2007: Essentials (Labyrinth Publications)
Computer Concepts and Vista (Labyrinth Publications)
Mike Meyers' A+ Guide to Managing and Troubleshooting PCs
(McGraw-Hill)
Internet Systems and Applications (EMC Paradigm)

Alec Fehl wrote:
> I need equal column heights for 2 DIVs, but here's the
twist - the
> content in each must be bottom-aligned. All the hacks
and JS code I
> found to make equal heights adds the extra space to the
bottom, meaning
> content can't shift down to be bottom-aligned. Is this
possible (with
> pure DIVs and no tables)?
>
>
Hummmm...... you may be able to use absolutely positioned
layers in
association with the Project Seven equal height javascript to
achieve
this...but it's a bit hit and miss I would say. Probably not
worth the
effort.
I don't particularly know of a bullet proof method unless the
content is
images in which case you can use background images.
Tables are king :)....in some instances.

Similar Messages

  • How do I create Equal Height Columns with my Background Images?

    Hi there,
    here is my page http://www.allthingsprintuk.co.uk/ATPHome.html
    My problem is that the side bar HTML list is coming off the page in IE. & also the html  in the header can look awful due to browser settings.
    My question is how do I create Equal Height Columns with my Background Images so that they fit with the HTML text? Is there a good link you can point me to, or a tutorial?
    The only way I can see by doing it is slicing my images up into 3 (top middle & bottom) & then setting the middle to repeat y????
    Or does anyone know of a way to create rounded corners WITH drop shadows in CSS that will work on all browsers?
    Thanks in advance
    Louisa

    Try these http://www.pixelan.com/

  • How to change the css behaviour of af:table column with rowheader

    Hi
    Can we change the css look and feel of the af:column with rowheader attribute set true ? Currently I am getting a projected look with shades in the left side. I want it to be like normal af:column style. If there any specific styleClass I need to put please provide the details
    THanks
    Suneesh

    Hi,
    you can use skinning for this. The skin selectors are shown here:
    http://download.oracle.com/docs/cd/E15523_01/apirefs.1111/e15862/toc.htm
    Frank

  • I want to compare two columns and replace any equal values with the value in a specific cell

    I want to compare the numbers in two columns and replace all matching numbers in the second columns with the corresponding value from a cell in the same row as the matching number. 

    Me too.
    Barry

  • How can I update a Site Column with the content of an array with javascript CSOM?

    I'm relative new to Sharepoint 2013, I'm trying to update the content of a Site column with the content of an array, I can retrieve and visualize the content of my site column, the user is able to change and save the necessary part and the changes are
    saved into an array, now I have to update the content of the site column with the content of the array, but for some kind of reasons I can't accomplish that, any suggestion/example? This is my code so far to retrieve, visualize the site column and store the
    mofication into my array.
        <body>
                <select id="dropdown" name="dropdown" onchange="optSelect()">
                    <option value="EngineType_Cylinders">EngineType_Cylinders</option>
                    <option value="EngineType_EngineCycle">EngineType_EngineCycle</option>
                    <option value="EngineType_EngineFamily">EngineType_EngineFamily</option>
                    <option value="EngineType_Euro">EngineType_Euro</option>
                    <option value="EngineType_FamilyEvolution">EngineType_FamilyEvolution</option>
                    <option value="EngineType_GasEmissionLevel">EngineType_GasEmissionLevel</option>
                    <option value="EngineType_Power">EngineType_Power</option>
                    <option value="EngineType_PowerSupply">EngineType_PowerSupply</option>
                    <option value="EngineType_Use">EngineType_Use</option>
                </select><br />
                <textarea id="textareadisplay" rows="25" cols="23"></textarea><br />
                <input type ="button" value="Update values" onclick="addItemsToColumns()" />
            </body>
    My Javascript
        $(function () {
            SP.SOD.executeOrDelayUntilScriptLoaded(Function.createDelegate(this, function () {
               var select = document.getElementById('dropdown').value;
                console.log(select);
                getSiteColumns(select);
            }), 'SP.js');
        var fieldChoice;
        var choices;
        var addFields = [];
        var slc;
        var clientContext;
        function optSelect() {
            slc = document.getElementById('dropdown').value;
            getSiteColumns(slc);
        function getSiteColumns(selection) {
           clientContext = SP.ClientContext.get_current();
            if (clientContext != undefined && clientContext != null) {
                var web = clientContext.get_web();
                fieldChoice = clientContext.castTo(web.get_availableFields().getByTitle(selection), SP.FieldChoice);
                clientContext.load(this.fieldChoice);
                clientContext.executeQueryAsync(Function.createDelegate(this, this.OnLoadSuccess), Function.createDelegate(this, this.OnLoadFailed));
        function OnLoadSuccess(sender, args) {
            choices = fieldChoice.get_choices();
            var textarea = document.getElementById("textareadisplay");
            textarea.value = choices.join("\n");
        function OnLoadFailed(sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        function addItemsToColumns() {
            clientC = SP.ClientContext.get_current();
            var arrayForUpdate = $('#textareadisplay').val().split('\n');
            fieldChoice.set_item(, arrayForUpdate);
            fieldChoice.update();
            clientContext.executeQueryAsync(function () { }, function () { });
        function OnUpdateSuccess(sender, args) {
            var newchoices = fieldChoice.get_choices();
    My problem is on the function addItemsToColumns() please help! Thanks in advance.

    Let's look at your stylesheet -
    <style type="text/css">
    body {
    background-image: url(assets/images/Business%20Men%20In%20Reception%20Col.2.jpg);
    background-repeat: no-repeat;
    background-color: #003;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    width: 960px;
    It's a good idea not to use spaces or any punctuation in your filenames when working for the web.
    #header {
    margin-left:auto;
    margin-right:auto;
    position: relative;
    width: 960px;
    #heading {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 36px;
    font-style: italic;
    font-variant: normal;
    margin-left:auto;
    margin-right:auto;
    There's no need to specify the default values (font-variant:normal) or to specify auto margins for any block element without an explicitly defined width. And wouldn't it make more sense to put the font style on the body tag, where it will inherit into the rest of the page than to restate it as you have done in the next rule?
    #bodytext {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    line-height: 25px;
    font-variant: normal;
    width: 300px;
    #container {
    width: 960px;
    position: relative;
    margin-left:auto;
    margin-right:auto;
    .rightimg {
    float: right;
    margin-left: auto;
    padding-right: 40px;
    #heading #navbar ul li {
    padding: 30px;
    </style>
    Margin-left:auto can't work without knowing what the width of the element is....  Keep your CSS lean and targeted - it will help you to debug your layouts.

  • How to make text columns with adobe muse

    Hi,How to make text columns with adobe muse (like InDesign)?

    Multiple columns can be acheived with CSS - http://www.w3schools.com/css/css3_multiple_columns.asp
    div
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    I'm surprised that Muse does not support text columns yet, but perhaps the custom CSS can be added in style tags on page properties. Haven't tried it, but don't see why it wouldn't work.

  • Equal columns in user_tab_columns

    Hi,
    I created a cluster "MyClusterOrTable" with column "mycolumn" (varchar), then, I created a table "MyClusterOrTable" with column "mycolumn" (number)
    Select * from user_tab_columns
    showed two equal columns. Including table_name, column_name and column_id.
    So, who knows how to distinguish them later? What column is for cluster and what is for table?
    I am looking for the correct SQL script. It has to be more complex than "Select * from user_tab_columns".
    P.S. Desc "MyClusterOrTable" works correctly, unlike many GUI tools including Manager Console.

    OK the only problem is that you cannot map columns to the object. From user/all/dba_objects you can get object_id. Unfortunately user_tab_columns hasn't it. To avoid that you can get the text from dba_views for all/user/dba_tab_cols and create your all/user/dba_tab_cols2 view containing the object_id for table/cluster/whatever.
    And then grant select on the created object to whatever you need.
    It is of course a bit clumsy and won't work on another db's where you haven't your very special view, but for me it seems usable solution.
    And then raise SR for Oracle to include object_id column in user/dba/all_tab_cols view :)
    Of course the another possibility is not to create objects with the same names ;)
    Gints Plivna
    http://www.gplivna.eu

  • Making columns with a long list

    I preformed a query and got a long list.  The output doesn't take up that much horizontal space and so I'd like to make two columns with it to save on scrolling.  Is that possible with CSS?
    Here's my list looks like this:
    Name: Snowfresh
    Brewer: Edelweiss
    Overall: 3.5
    Name: Zepplin
    Brewer: Leibringer
    Overall: 3
    And the code:
    <p>German List:</p>
    <table width="182" height="145" border="0">
      <?php
    //Puts it into an array
    while($info = mysql_fetch_array( $data )) {
    //Outputs the image and other data ?>
      <tr>
        <td><?php echo  "<img src=http://localhost/beer_diary/images/beer_tasted_profile/".$info['image_id'] ."><br/>";?></td>
        <td><?php echo "<b>Name:</b> ".$info['beer_name']. "<br> ";
        echo "<b>Brewer:</b> ".$info['brewer']. "<br> ";
        echo "<b>Overall:</b> ".$info['overall_id']; }?></td>
      </tr>
    </table>
    <p> </p>

    Yea, CSS3 columns are about as helpful as CSS3 regions at this point.  I'd recommend this article for turning a list into columns:
    http://www.alistapart.com/articles/multicolumnlists/

  • ALV column with variable number of decimals to be displayed

    Hi,
    I've an ALV where I need to display a numeric column with a variable number of decimal row-by-row, from 0 (no decimals) to 4.
    I've declared the numeric field as TYPE P DECIMALS 4.
    I've tried with DECMLFIELD in ALV catalog, and this works for 1 to n decimals, but when  I leave the field indicated in DECMLFIELD equal to 0, ALV shows the default number of decimals of the field (4 in that case).
    Any help will be very appreciated.
    Thanks.
    Jordi

    No, I didn't try EDIT_MASK.
    How should I use it to format output to display decimals or not depending on the row?
    I have 2 kinds of values, all stored in a TYPE P DECIMALS 4: Those that really are an integer (decimals should not be displayed for that ones) and the values that really have 4 decimals (which should be displayed with decimals in ALV).
    Example:
    13,0000 should be displayed as 13
    0,4567 should be displayed as 0,4567
    With EDIT_MASK could I do that?
    Thank you very much.

  • CS4: Automatically resize textfield to get equal columns?

    Hello,
    is there a option (or possible with a script) to resize a textfield in the vertical length to get equal column heights with such a result?
    Thanks, Carlos

    Adobe has discovered a usability issue associated with running Adobe InDesign  CS5 and InCopy CS5 GERMAN versions and all suites that include InDesign CS5 on  the Mac OS X platform. We are addressing this issue as quickly as possible to  ensure the best experience for our customers. For customers who currently have  the German version of InDesign CS5, InCopy CS5, Design Standard CS5, Design  Premium CS5 or Master Collection CS5 installed on the Mac platform, please  reference the Adobe Knowledge Base article which provides a further description  of the issue and manual workaround.
    English - http://go.adobe.com/kb/ts_cpsid_84345_en-us
    German -  http://go.adobe.com/kb/ts_cpsid_84345_de-de
    Swedish -  http://go.adobe.com/kb/ts_cpsid_84345_sv-se (not live yet, but will be soon)
    Message was edited by: Peter Spier

  • Document library view: Group by a column with multiple values

    I have a document library which has a managed metadata column.
    I would like to create a view which groups the documents by this managed metadata column.
    The managed metadata column can have multiple values.
    I know that this is not possible with SharePoint's group by, since it only accepts those columns which can have only one single value.
    But is this possible to accomplish by some other means, e.g. Content query web part? Or is there perhaps a 3rd party solution to this?
    Is it possible to change the group by settings somehow to allow Group by to function with columns with multiple values? <- this may be far fetched...

    Hi Pekch,
    I'm assuming you have VS2010 to build the custom web part. From there you will need to figure out the following:
    Get a SPList object for the Document Library (See below for code example)
    Loop through all the documents in the SPList object 
    If you have audience targetting enabled, then you'll need to determine if the user has access to the document by checking the "Target_x0020_Audiences" column)
    As you also want to group by metadata, you'll need to populate 2 datatables (one table with a column containing unique metadata values and another table with a metadata column and other document related columns).  Link these two tables via a dataset
    relation.
    Set the dataset as the datasource for a repeater, add in some css and javascript for the group expand/collaspe and it should be close to what you need.
    This will be a time consuming task if you don't know where to start or have problems figuring out how to perform a certain operation.  So you may want to determine if the functionality you want is required or just a "nice to have".  Good
    luck and if I have some spare time, I'll create a blog post outlining how to do all the above.
    I got the below code from a sharepoint blog sometime in the past and you can use it to retrieve a list.
    You can use it like this: GetListByUrl(http://servername/Shared%20Documents/Forms/AllItems.aspx)
    using    Microsoft.SharePoint;
    public SPList GetListByUrl(string listURL)
    SPList list = null;
    try
    using (SPSite site = new SPSite(listURL))
    if (site != null)
    // Strip off the site url, leaving the rest
    // We'll use this to open the web
    string webUrl = listURL.Substring(site.Url.Length);
    // Strip off anything after /forms/
    int formsPos = webUrl.IndexOf("/forms/", 0, StringComparison.InvariantCultureIgnoreCase);
    if (formsPos >= 0)
    webUrl = webUrl.Substring(0, webUrl.LastIndexOf('/', formsPos));
    // Strip off anything after /lists/
    int listPos = webUrl.IndexOf("/lists/", 0, StringComparison.InvariantCultureIgnoreCase);
    if (listPos >= 0)
    // Must be a custom list
    // Strip off anything after /lists/
    webUrl = webUrl.Substring(0, webUrl.LastIndexOf('/', listPos));
    else
    // No lists, must be a document library.
    // Strip off the document library name
    webUrl = webUrl.Substring(0, webUrl.LastIndexOf('/'));
    // Get the web site
    using (SPWeb web = site.OpenWeb(webUrl))
    if (web != null)
    // Initialize the web (avoids COM exceptions)
    string title = web.Title;
    // Strip off the relative list Url
    // Form the full path to the list
    //string relativelistURL = listURL.Substring(web.Url.Length);
    //string url = SPUrlUtility.CombineUrl(web.Url, relativelistURL);
    // Get the list
    list = web.GetList(listURL);
    catch { }
    return list;

  • Compare column to another column with a specific value?

    What i need to do is compare a column that holds the SiteNames of holidays to another column with the DifficultyDescription of holidays.
    I want to show that sites that are not included in boldANY*bold* holiday with an “easy” or “moderate” rating.
    Some of my SiteNames have holidays with different difficulty ratings....
    e.g Yellowstone National Park(SiteName) - H2 - Moderate(DifficultyDescrip)
    Yellowstone National Park(SiteName - H3 - Strenuous(DifficultyDescrip)
    In this example i would want Yellowstone not to be in the results of my query as one of its results is 'moderate'.
    I want to show holidays that are not in boldANY*bold* holiday with 'easy' or 'moderate'
    Here is my attempt so far...
    select it220_holdet.holcode.holcode as holcode
             it220_holdet.diffdetails.diffdescrip as diffdescrip
             it220_sitedetails.sitename as sitename
    from it220_holidaydetails it220_holidaydetails,
    etc....
    where it220_sitedetails.sitename != it220_diffdetails.diffdescrip = 'Easy' <<<< where the sitename is not equal to a difficulty description of 'Easy'
    and     it220_sitedetails.sitename != it220_diffdetails.diffdescrip = 'Moderate' <<<< where the sitename is not equal to a difficulty description of 'Moderate'
    Is the logic of this correct? The error message i am getting is SQL command not properly ended.
    Is this more of a syntax problem than logic. Any help would be great.
    Thanks in advance!
    Edited by: Jay on 19-Nov-2010 02:47
    Edited by: Jay on 19-Nov-2010 02:47

    Hi,
    Ok,
    Problem is in this part of query
    where   "IT220_HOLIDAYDETAILS"."DIFFRATING"="IT220_DIFFDETAILS"."DIFFCODE"
    and      "IT220_HOLIDAYDETAILS"."HOLCODE"="IT220_LOOKUP_SITEHOLIDAY"."HOLCODE"
    and      "IT220_LOOKUP_SITEHOLIDAY"."SITECODE"="IT220_SITEDETAILS"."SITECODE"
    and "IT220_SITEDETAILS"."SITENAME" = "IT220_DIFFDETAILS"."DIFFDESCRIP"
    and "IT220_SITEDETAILS"."SITENAME" =  "IT220_DIFFDETAILS"."DIFFDESCRIP"
    Check are you joining correct columns.
    And remove possibility that tables values are in different cases
    SELECT "IT220_HOLIDAYDETAILS"."HOLCODE" AS "HOLCODE",
      "IT220_HOLIDAYDETAILS"."COUNTRYVIS"   AS "COUNTRYVIS",
      "IT220_DIFFDETAILS"."DIFFDESCRIP"     AS "DIFFDESCRIP",
      "IT220_SITEDETAILS"."SITENAME"        AS "SITENAME"
    FROM "IT220_SITEDETAILS" "IT220_SITEDETAILS",
      "IT220_LOOKUP_SITEHOLIDAY" "IT220_LOOKUP_SITEHOLIDAY",
      "IT220_DIFFDETAILS" "IT220_DIFFDETAILS",
      "IT220_HOLIDAYDETAILS" "IT220_HOLIDAYDETAILS"
    WHERE UPPER("IT220_HOLIDAYDETAILS"."DIFFRATING")  = UPPER("IT220_DIFFDETAILS"."DIFFCODE")
    AND UPPER("IT220_HOLIDAYDETAILS"."HOLCODE")       = UPPER("IT220_LOOKUP_SITEHOLIDAY"."HOLCODE")
    AND UPPER("IT220_LOOKUP_SITEHOLIDAY"."SITECODE")  = UPPER("IT220_SITEDETAILS"."SITECODE")
    AND UPPER("IT220_SITEDETAILS"."SITENAME")         = UPPER("IT220_DIFFDETAILS"."DIFFDESCRIP")
    AND UPPER("IT220_DIFFDETAILS"."DIFFDESCRIP") NOT IN('EASY','MODERATE')Regards,
    Jari

  • Multiple row selection in ADF Table using addition column with checkbox

    I am using ADF table(Jdeveloper11g) and i want to selecte multiple rows it may be more than one OR all rows.
    For that i added one Column to the table with Header Delete and checkbox
    <af:table....
    <af:column sortProperty="Delete" headerText="Delete" width="100"
    sortable="false">
    <af:selectBooleanCheckbox label="#{row.favoriteId}"
    valueChangeListener="#{Mybean.onCheck}"
    id="checkbox" autoSubmit="true">
    </af:selectBooleanCheckbox>
    </af:column>
    </af:table>
    backing bean:Here i added code to get Value of one column with id favoriteId and use an arrayList(listForDelete) to monitor the state of the checkboxes
    public void onCheck(ValueChangeEvent valueChangeEvent) {
    BindingContainer bindings = getBindings();
    DCBindingContainer dcBindings =
    (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry();
    DCIteratorBinding iterBind =
    (DCIteratorBinding)bindings.get("getUserFavoritesByUserIDIterator");
    if (iterBind != null && iterBind.getCurrentRow() != null) {
    RichSelectBooleanCheckbox ch = (RichSelectBooleanCheckbox)valueChangeEvent.getSource();
    if (!ch.isSelected()) {
    Long issueId = (Long)iterBind.getCurrentRow().getAttribute("favoriteId");
    listForDelete.add(issueId);
    else
    Long issueId = (Long)iterBind.getCurrentRow().getAttribute("favoriteId");
    listForDelete.remove(issueId);
    Problem is that when i select single row checkBox, onCheck() method of backing bean gets called multiple times(equals to the number of rows)
    I think this is beacuse of <af:selectBooleanCheckbox id is same that is "checkbox" but i am not sure.Even i tried to assign some unique id but no any success in assigning Id with value Expression.
    I also find related post
    Re: ADF Table Multiple row selection by Managed Bean
    but that is related to Select All rows or Deselect all rows from table.
    From the simillar post i follow the steps given by Frank.but problem with below step
    ->have an af:clientAttribute assigned to the checkbox with the following EL #{row.key} ,here I added <af:clientAttribute name="#{row.key}"></af:clientAttribute> and i am getting error
    Error(64,37):  Static attribute must be a String literal, its illegal to specify an expression.
    Please let me know if any one had already implemented same test case.
    Thanks for all help
    Jaydeep
    Edited by: JaydeepJ on Aug 7, 2009 4:42 AM

    just to update after the rollback is called in the cancel button i wrote following code which does not change the row focus to the first row
    DCBindingContainer bc =
    (DCBindingContainer)BindingUtils.getBindingContext().getCurrentBindingsEntry();
    DCIteratorBinding profItr =
    bc.findIteratorBinding("ProfileSearchInstIterator");
    Row cRow = profItr.getRowAtRangeIndex(0);
    if(cRow != null){
    System.out.println("Current row is not null so fixed ");
    profItr.setCurrentRowIndexInRange(0);
    RowKeySetImpl rks = new RowKeySetImpl();
    ArrayList keyList = new ArrayList();
    keyList.add(cRow.getKey());
    rks.add(keyList);
    profileTable.setSelectedRowKeys(rks);
    AdfFacesContext.getCurrentInstance().addPartialTarget(profileTable);
    }

  • Labels and inputfields in equal columns

    Hi, I have a hard time making my application look good. I want Labels and Inputfields to be sorted one under another in equal columns. Mostly I have a MatrixFlow with two labels and inputfields in a row. F.e:
    Label1         Inputfield1            Label2         Inputfield2
    Label2.1      Inputfield2.1          Label2.1      Inputfield2.1
    and this is how I want it to be, now it looks more like that
    Label1                Inputfield1             Label2                     Inputfield2
        Label2.1      Inputfield2.1                    Label2.1      Inputfield2.1
    and so on. Im aware of Padding left/right but since every single label or IF has different lenght it is hard to mach them in columns. thinking about setting it by pixels makes me sick as well. Ive been looking on example projects and there was no such problem like not even column so there must be some tool sorting it out and Im not aware of its existance. Please help

    Thanks for response. Im using Grid layout in some Transparent Containers but it does not solve the problem, making whole app as Grid would take way to much space Manoj.
    I tried to put 1.1 and 2.1 labels in one Transparent and it worked well, made it stuck to the left side, problem began again with inputfields, seems they are dependand on label lenght that way. Funny thing is when you see at example from sap it all looks fine in simple MatrixFlow and that's it.
    Screenshot below so you can see how it looks atm and I warn you it can make your eyes bleed
    (sorry for blackened fields but Im not allowed to show it to people yet. Black field has same lengt as label)
    [url]http://img147.imageshack.us/my.php?image=notitlehz5.jpg
    Edited by: Wojtek G on Jan 28, 2008 9:37 AM
    Edited by: Wojtek G on Jan 28, 2008 9:37 AM
    Edited by: Wojtek G on Jan 28, 2008 9:39 AM

  • IF statement (Compare column with String)

    Hi all,
    i want to compare the Content of a Column with a text but i always get an error message because of a Syntax error.
    It the Content of the column Approval Status is Approved the System should write in the calculated column the String "Approved"
    my code:
    =IF([ApprovalStatus]="Approved","Approved"," ")
    can you help me ? what is wrong here?
    thank you in advance

    Hi
    yes, because  you should numeric values
    Approval Status
    Value
    Approved
    0
    Rejected
    1
    Pending
    2
    Draft
    3
    Schedule
    4
    https://farhanfaiz.wordpress.com/2010/12/17/sharepoint-approval-status-value-of-publishing-pages/
    Romeo Donca, Orange Romania (MCSE, MCITP, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

Maybe you are looking for