• I am working on a horizontal scrolling site and am trying to have my div’s width be relative to the conent, in other words, expand in size according to content.

    My CSS is this right now:

    }
    #content-wrap {
    float:left;
    width:auto;
    height:500px;
    margin:0 auto;
    
    }
    #container {
    width:100%;
    height: 500px;
     float:left;
    }
    #content {
    width:200%;
    height: 500px;
    margin:0 40px 0 40px;
    float:left;
    }

    You can view an example here: https://uninspirational.com/?page_id=14

    As you can see the page is just twice the size of your display, but I want it to wrap to the content. I am using MNML as the theme.

    Thanks in advance.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hi mafialtd and/or anybody out there

    I know it’s been a while now. I was wondering if you managed to crack the solution for content relative width..

    Thanks.

    Grainspirit, add

    overflow:hidden;

    to whatever should expand. It works with height, i just don’t know if it also expands in width. I hope it works.

    Thank you prodi41..i’m really a newbie. Would this be the right place to add it? Since it determines the width?

    #gallery {width: 30000px; margin: 0px 0px 0px 0px}

    Remove the width: 30000px. replace it with overflow:hidden so that it has no set width but just expands to the content’s size.

    Oh and also: if you want the width to be like 900px minimum: add this to the css:

    #expander {
        width:900px
    }

    And in the gallery div (so between the <div id=”gallery”> and </div> place these tags:
    <div id="expander"></div>

    this will add a div of 900px in width so that the gallery div will expand to the 900px. whenever there is something inside the gallery that is wider, it will expand to that so that way, the width will be dynamic.

    I haven’t tested it so i hope it works. Good luck!

    I added to the main index template (like you said):
    <div id="expander"></div>

    And I added this to the css:

    #gallery {overflow:hidden; margin: 0px 0px 0px 0px;}
    #expander {width:900px;}

    And the entire blog became vertical! ?? So it’s kind of like post relative width and content relative length..sigh..Thanks again..

    not length, i meant content relative height!

    Hmm I am sorry for that I must’ve misunderstood. I was just trying to help… In the example site at the top he had just filled in a fixed with in his body class (in his case width: 1972px;) and put all the pictures outside of the container with a absolute position. I don’t know if there’s a way to let that be done automatically. Unless you are good with php. The example site also seems to expand to 1972px when the content isn’t that wide. So this site also doesn’t have content relative width.

    Aah. No problem. Thank you for trying anyway! ?? I’ll just continue to experiment with my first website. Hopefully will crack this without knowing anything about coding ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘content relative width’ is closed to new replies.