WordPress.org

1. mafialtd
   Member
   Posted 10 months ago #

   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: http://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.

2. grainspirit
   Member
   Posted 3 months ago #

   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.

3. prodi41
   Member
   Posted 3 months ago #

   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.

4. grainspirit
   Member
   Posted 2 months ago #

   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}

5. grainspirit
   Member
   Posted 2 months ago #

   
   

6. prodi41
   Member
   Posted 2 months ago #

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

7. prodi41
   Member
   Posted 2 months ago #

   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!

8. grainspirit
   Member
   Posted 2 months ago #

   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! :P So it's kind of like post relative width and content relative length..sigh..Thanks again..

9. grainspirit
   Member
   Posted 2 months ago #

   not length, i meant content relative height!

10. prodi41
    Member
    Posted 2 months ago #

    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.

11. grainspirit
    Member
    Posted 2 months ago #

    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 :P

Reply

You must log in to post.