ThemeShaper Forums » Thematic

[closed]

Fluid layout for content

(3 posts)
  • Started 14 years ago by chiakaivalya
  • Latest reply from huyz
  • This topic is resolved
  1. I've not been able to find this anywhere in the forums so here goes!

    I'm trying to create a fluid layout for the #content.
    E.g. for a wide screen (>960px) I will see everything in the centre, with content width = 700px, and 1 right-sidebar = 260px. For a 800px wide screen, the sidebar should remain 260px, and in view, while the content shrinks to 540px. (like in www.smashingmagazine.com). I have about 20% of users with 800px screens and i would rather they still be able to see my sidebar on the right!

    I've tried setting:
    #main{
    max-width:960px; min-width:800px; width:100%; }

    and
    #container #content .h-entry {
    max-width:700px; min-width:540px; width: 100%}

    However when i shrink my browser width, the overflow of the text is hidden behind the sidebar and my scroll bars appear but i can only scroll to show blank white on the right side of the page!

    i know it's rather hard to figure out the problem without really seeing my code (and i could upload a sample if necessary) but if there is a really simple solution, some width %, or overflow settings, or scroll settings, that i'm completely missing, please do let me know!!!

    thanks a lot!

    Posted 14 years ago #
  2. try with % width, add it to #container #content. It will resize the column width. I'm sorry about the fact that right now I can't try it by myself the code, I'm not at home. If you need more help, let me know, I will come back next friday.

    Posted 14 years ago #
  3. I modified the Acamas them to implement a hybrid grid-fluid layout. It respects grid dimensions for min-width and max-widht but it automatically adapts the content for bigger screens, which are quite common these days.

    If anyone is interested, let me know.

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.