SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 2-column layouts

    First problem
    Please see this link: http://www.hot.ee/sannu/spf/one.gif

    On this layout, I need to have right column same height as left Left column will have random pictures and whose height varies. And right column's content should be aligned to middle. Only thing i can not do is i don't know how to make right column 100% tall.

    Second problem
    Please see this link: http://www.hot.ee/sannu/spf/two.gif

    On this layout, I have the same problem, but at this time, left column should be same height as right.


    Thanks in advance,
    Sander

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    This type of layout is best handled by tables as css doesn't like equalising columns or vertical aligning sections of text.

    You can make 2 equalising columns and if you look at my 3 col demo you will see some examples.

    Here's another example where two columns will equalise. If you look at the top example in this link their heights will always be the same as each other.

    http://www.pmob.co.uk/temp/2equalisingfloats2.htm

    This is because they are in fact the same div with a background image making it look like 2 elements. This is the only way to do equalising columns when the columns are set away from each other. Look at my demo for other examples not using bg gifs but the columns need to be touching.

    In css you can't vertically align unless you know the height of the element beforehand unless you are just aligning inline elements in a single line or in a table cell.

    Your best bet is to use a table which will do what you want and should make sense if the text is related to the image. (ie one cell relates information directly to the next cell).

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sad to hear that. But can you give the explanation of the reason not having this feature and will CSS 3 have such a feature.

    As XHTML standard recommends to use tables only tabular data presentation, then why everything is not possible in CSS(only "almost everything is"). Would like to hear opinions on that subject.

    Thanx anyway,
    Sander

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Sad to hear that. But can you give the explanation of the reason not having this feature and will CSS 3 have such a feature
    Well css already has the feature its just that ie doesn't understand it. There is display:table and display:table-cell which give you similar characteristics to tables and if you look at the second example in the link from my first post you will see it working for mozilla in exactly the way you asked for.

    As a strange co-incidence there is a thread just started that shows how to vertical-align content of unknown height which may be worth looking at. It was posted this morning so just browse through the threads until you find it.

    Paul


Bookmarks

Posting Permissions

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