1

I am trying to create a horizontal, scrollable layout for my website. My code looks something like this

<div id="outerWrapper">
    <div id="innerWrapper" style="position: relative;">
        <div style="width: 200px; position: absolute; top: 0px; left: 0px;">
            some lengthy content!
        </div>
        <div style="width: 200px; position: absolute; top: 0px; left: 220px;">
            some lengthy content!
        </div>
        <div style="width: 200px; position: absolute; top: 0px; left: 440px;">
            some lengthy content!
        </div>

        ...

        <div style="width: 200px; position: absolute; top: 0; left: 1100px;">
            some lengthy content!
        </div>
    </div>
</div>

I am now trying to add a margin-right to the entire content, so I tried adding margin-right to both the innerWrapper and/or the outerWrapper, but it's ignored. margin-left is working. I actually used the position: absolute approach instead of float: left as to avoid these problems, but seems it doesn't work. Any ideas why I can't margin-right the content? Even if I explicitly set the width on the inner or outer wrapper it's still not working.

Interestingly, the body is not having the correct width - the width of the body is the width of the browser window, not the width of the wrappers.

It should be said that the content (innerWrapper and everything below) is created dynamically via JS, if that's important.

BlackWolf
  • 5,239
  • 5
  • 33
  • 60

3 Answers3

1

If you want an horiz. layout, start by setting the height of outerWrapper.

Then set your content in "pages" using list elements : 

<div id="outerWrapper">
    <ul id="maincontent">
        <li ><a name="p1">Box 1</a></li>
        <li ><a name="p2">Box 2</a></li>
        <li ><a name="p3">Box 3</a></li>
        <li ><a name="p4">Box 4</a></li>
        <li ><a name="p5">Box n</a></li>
    </ul>
</div>

Now for a navigation system, you could :

<div id="scroll-buttons">
    <a href="#p1">Go to the section 1</a> |
    <a href="#p2">Go to the section 2</a> |
    <a href="#p3">Go to the section 3</a> |
    <a href="#p4">Go to the section 4</a>
</div>

CSS :

#container{
    width:3000px;
    height:400px;
}

#maincontent{
    border:0;
    margin:0;
    padding:0;
}

#maincontent li{
    line-style:none;
    width:240px;
    height:380px;
    padding:10px;
    float:left;
}

#scroll-buttons{position:fixed;}

About your "why" question : Note that absolutely positioned elements exit the DOM structure tree. (BTW, float: does this too).

yPhil
  • 8,049
  • 4
  • 57
  • 83
  • thanks. I would have hoped that absolute elements stay in the DOM. So I guess there is no way to have a wrapper around absolute elements and the wrapper stays in the DOM tree? I was able to get it somewhat working by setting width and height of the outerWrapper and giving the innerWrapper a padding-right (margin-right still doesn't work). I couldn't get your solution to work, though, but I guess it's similar to that. Still looking for a solution that gives me more control over layouting my content though. – BlackWolf Oct 20 '13 at 08:13
0

you can use negative margin-left instead margin-right like this:

#innerWrapper{
    margin-left:-5px;
}
Mohsen Safari
  • 6,669
  • 5
  • 42
  • 58
0

try this. Maybe help in your condition.

.class
{
margin-right:10px !important; 
}