SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% screen CSS Layout Problem

    Hi all

    I need a completely liquid layout (100% width and height). I have found this layout on the web.

    http://www.pmob.co.uk/temp/2col-columnonright2.htm

    This is exactly what I'm looking for but I really need the column in % - Left column 25% and right column 75%. I cannot make it work.

    I notice that there is a message clearly mentioning that margin-righ must be 1px less than width otherwise won't push footer down.

    Any suggestion? Help? Another layout that you think will help me out? Again, it has to be 100% of screeen with equal columns.

    Thanks in advance!

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

    Fluid columns like that can be very fragile but here's a couple of examples with a 25% and 75% column.

    The first one use negative margins and is a little complicated to understand due to the percentages.

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

    The second one is pretty simple because it uses a background image for the columns. You can do this by making and image that has the correct percentage of colour to what you need. e.g. I have made an image that is 2600px wide (to cover all monitors) and then coloured 25% of it (650px) with a different colour for the left column. The image is then place at a position of 25% 0 in the background of the outer so that it always reveals only 25%.

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

    You must be careful with fluid columns in that you allow the content to contract easily. If you place a great big image in the side column then you are asking for trouble.

    Hope that was what you wanted.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Oh Man! Thank you so much.

    BTW, in the beginning the column or content will be one, then the div on the right will appear dynamically (toogle) and can be minimize/close again.

    Do you think I will have an issue with this by using this layout?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Not if you use the second version as the structure is simpler.

    You could even change it to a margin left method for the right column and do something like this.

    http://www.pmob.co.uk/temp/2col-toggle.htm

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Paul!


  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh man

    I'm using the percentage one, but I need the column to float to the right, not to the left... since thats the content Im gonna toogle. But I cannot make it 75% percent. I changed the 33.333 and 33.222 % to 75.333 and 75.222 but didnt work. What else do I need to change?

    Thanks in advance!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    In post one you said you want column 1 at 25% and column 2 at 75%, which is the example I gave.

    Now you are saying you want the reverse of that - Is that correct ?

    If so you simply have to change the column to float:right and set the negative margins on the opposite side (and change the margin on #outer to the other side.)

    e.g.

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

    However I still think the image technique in the other link is a better option (apart from the fact that you have to make the image).

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Re-reading your post I think I may be misunderstanding you.

    Do you actually want a 25% left column and then a 75% right column but you want the right column floated?

    Which column are you toggling? If its the 75% wide column then what are you doing with the 25% column - is it going to expand to 100%?

    You may need to explain a little more detail and then I can decide which is the best approach to take

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ill be tooglin the right column, which I need at 75% of the screen.

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok
    Let me explain myself better.

    I need a header, content and footer. The content will have search results. If I click any of the results, a new div (the right column) will appear.

    So the content on the left will be %25 and content on right 75%.

    Need more explanation?

    let me know! Ill be more than glad.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Well use example 2 then using the background image method as it already has a 75% right float which can easily be toggled off.

    If you toggle it off by applying a class to the body then you can set the background to a solid colour instead of an image to hide the column illusion and set the left float to 100% all by targetting from the class you add to the body.

    Hope that makes sense

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok

    Didnt understand you!

    If you give me 15 mins I can post the design that I need to do this so you can help me out even more... because I really need the division.

    BTW, thatnks for all your help so far.

  13. #13
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok... go here:
    LINK DELETED

    You will see 3 images:
    1. search-results.png - which is the normal page
    2. search-more.png - which is the page showing more info of X result
    3. fullscreen - which is the left and right column toogled to the top

    Hope you understand now what Im trying to do without any luck!
    Last edited by joey-the-menace; Oct 2, 2007 at 12:12.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm afraid those screenshots beg more questions than they answer.

    First of all you have a scrollbar at the bottom of the viewport for the left column which suggests that the left column has to scroll by itself and will be independent of the right column completely. It also suggests that vertical scrollbars will also appear on the left column should they be required which in turn suggests that the right column would have to be the same and scroll independently of the left.

    It looks like you are trying to reproduce frame type layout. I have an experimental layout here but I wouldn't recommend using it unless you test it thoroughly first. It uses absolute positioning for good browsers and a slightly more complicated routine for IE.

    http://www.pmob.co.uk/temp/toggle-2-100-columns.htm

    However I would treat it with care as scrollbar manipulation like this can be unstable and you can lose the vertical scrollbars in some situations.

    I would recommend that you don't try and reproduce the frame type layout but rather let that left column scrollbar sit just under the content and let the body as usual handle the normal scrolling at other times. That would mean you could use a floated layout instead (although it won't look the same as your pictures).

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Here's the floated version with the scrollbar just under the table.

    http://www.pmob.co.uk/temp/2colfluidlayout6-toggle.htm

    That's about it from me

  16. #16
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Thank you very much, man! I really appreciate all your help on this.

    I think I will use the 1st one because the scrollbar remains at bottom of page.

    I notice that there's no footer there. Do you think it will be an issue to add a footer? I have tried adding 20px to the bottom of the side and content, and nothing. I tried margin-button and nothing.

    Again, thank you so much for all your help. Really appreciate!
    Last edited by joey-the-menace; Oct 2, 2007 at 12:49.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well the footer and the header have to be a fixed height in those examples and there is no other way around it for this example.

    http://www.pmob.co.uk/temp/toggle-2-100-columns2.htm

    As I said before this is an experimental layout so make sure you "stress test" it before you commit to using it. Try it with the kind of data you require to make sure it will do the job you want.

    To change the height of the footer and header you have to change things twice because IE and Firefox have different things. For firefox you adjust the bottom co-ordinates of the absolute elements so that everything fits where you want it. For ie6 we use padding on the top and the bottom of the html element which makes the space for the header and the footer and therefor emust match their sizes. This allows us to still use 100% height on the body in IE6.

  18. #18
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Oh! I got it now....

    I never saw the IE6 styling because it looked like a comment.

    Thanks Paul! I think I got it now! Thanks for everything and all the troubles.


  19. #19
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi Paul

    I just thought you wanted to see what I have so far with the design, so here it is:
    http://www.webstunner.com/example/

    BTW, I'm having problems with the scrollbar on left panel when using IE6. I also noticed that on Firefox, if I scroll, the bar on top is not filling the bar on topcompletely. Any suggestion?

    I also want to know if you can help me with the minimize/maximize button and the close. The close button is supposed to close the right panel and bring back the header again.

    I also noticed that if I expand the panels to the top, the bottom has a huge padding. How can I correct this?

    Thanks in advance!

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't really have time to go in depth today but the scrollbar on the left isn't working because you have used a negative z-index on #side which is stopping it working. It should be a positive z-index.

    When you collapse the header you have to take into account that ie6 and ie5 are getting different things ans so you can't change them through javascript because you are changng things that Ie6 doesn't need changed.

    You would be better of using another class in the html element and another in the body element (for ie5) and then let the css and conditional comments handle the presentation changes.

    I've update my example to show this working:

    http://www.pmob.co.uk/temp/toggle-2-100-columns3.htm

    I'm afraid that there will be little you can do to stop the content in the header from being hidden at smaller screen sizes because it won't implement a scrollbar. This is the drawback of this method and you should ensure that header and footer content is visible at reasonably small sizes.

    Hope that helps anyway.

  21. #21
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Its me again. I am struggling when I convert this design:
    http://www.pmob.co.uk/temp/toggle-2-100-columns2.htm

    into 3 columns. Im basically inverting everything on the left but to the right, but its not working as expected.

    What I need is a left and right column at 25%. Any help will be appreciate.

    Thanks in advance!

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    What exactly are you trying to do as it will make a difference as to how to approach this?

    Do you simply want 2 columns in the middle section now or are you trying to implement 3 toggle columns. Your original idea was just one column that split into 2 columns when toggled so I need to understand exactly what your approach is now.

    Whether it will be possible or not is another question

    The more explicit you can be then the better idea will have in how to approach this.

  23. #23
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Thanks for replying so quickly.

    Forget the toogling. I just need a 3 column layout with header and footer...

    1. completely liquid
    2. 100% of screen
    3. columns in percentage, NOT pixels: left and right at 25% width each and the column in the middle with the remaining 50%.

    4. This is optional: the left and right columns will be divided into two blocks or sections of equal height.

    Please check this image that illustrate what I'm trying to do:
    http://www.webstunner.com/example/desired_layout.png

    Thanks in advance, Paul.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well my old examples how a fluid column layout width 25% side columns here:

    http://www.pmob.co.uk/temp/3colfluidlayoutx1.htm

    The left column colour has to be an image using the techniques I outlined previously.

    Be aware that 3 fluid columns will have rounding issues so you can't be pixel perfect and you will have to allow for that with your design.

    Regarding number 4 above then this doesn't sound possible because the column will depend on content height and could stretch for miles and seems to indicate to me that you are thinking along some other lines maybe.

  25. #25
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Long Time No Bother

    Hi Paul

    It's me again bugging you. Go here:
    http://www.webstunner.com/csm/

    You will see a zip file that contains all the HTMLs, CSS, and images. If you download it, and open:

    1. QUICKVIEW.HTML - check the Alarms, Trouble Tickets, SLA Metrics and Orders. You will notice the is a gap between the gray bar and the border or end of the column. I need all 3 columns to with 0 margin and padding... no gaps. Any suggestion? BTW, I'm using your liquid 3 cols layout.

    2. ALARMS.HTML - click the link under TT ID (ID 123456789), the right pane will appaer. The problem is that IE6 is not showing the SCROLLBAR in that Right Pane. FF and Opera do show the scrollbar. Any suggestion?

    Thanks again in advance!


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
  •