Layout issue - structural container not expaning full width of layout

HTML & CSS
1

I have a site I’m re-skinning that I have run across and issue with. It seems as if one of my structural elements is not expanding to the full width of the layout.

Consequently, content is being cut-off. For some browsers, I can hide the issue by applying the “overflow-x” property to my html element. However, this doesn’t work on mobile versions of Safari and, as a solution, it isn’t something I want to use.

My access to the html is limited and there are a number of issues I’m aware of but I’m unsure those issues are contributing to this specific problem.

Just curious if someone might be able to provide insight?.

Site-Here

2

Hi, MichaelRubens. Welcome to the forums.

Assigning {overflow-x:hidden} to the html element removes horizontal scroll bars, so that’s probably not the best choice.

Which element is not expanding to the full width of the layout and under what conditions?

You mentioned the mobile version of Safari, but I am not seeing the page scale down in desktop Firefox, beyond a couple of early, short steps.

It would help us if you would describe which elements are misbehaving and how, in which browsers, give class and/or ID names, if possible, and where they appear on the screen/page. :slight_smile:

3

Thank you for the welcome. As I had indicated, I completely understand that applying the “overflow-x” property is not the ideal solution. However, in the real world where things are not so clean and inflexible deadlines exist we made a choice to go-live the better of 2 poor options rather than to allow this issue to present itself in all viewing situations.

What we have is a fairly common “banned” layout; i.e. a number of stacked containers that within each have a container that is centered and which serves as the main site body:e.g.


<html>
  <body>
    <div class="container">
      <div class="content">...site stuff here...</div>
    </div>
    <div class="container">
      <div class="content">...site stuff here...</div>
    </div>
    <div class="container">
      <div class="content">...site stuff here...</div>
    </div>
  </body>
</html>

Where


.container {
    padding:4em 0;
    position:relative;
    overflow:hidden;
    width:100%;
    z-index:100;
    }

    .content {
        background:#fffff;
        margin:0 auto;
        position:relative;
        width:1280px;
        }

The issue here is that our div.container is not expanding to the full width of the website and quite frankly, I have no idea why. It’s as if the .container element is aligning its width to the viewport/window width, not the site.

Please be aware this isn’t a Responsive solution.

This re-skin is not going to be a long lived solution so I’m willing to embrace any possibility for correcting this issue.

Again, thank you for taking time out to read this post.

Regards,

M. Rubens

4

I’ve been able to determine the offending container. A wrapper div#main with


#main{
padding-bottom:175px;
position:relative;
}

that inherits a number of defaults:


{
    border: 0 none;
    font: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

This seems to be the container that is not expanding.

5

You have answered your own question in some respects here :).

The container is a wrapper and its width is auto (effectively 100% for a static element) whic means that .container will be the width of the viewport. However .content is 1280px wide which means that only when the viewport is wider than 1280px will that element fit inside .container.

When the viewport is less than 1280px wide then .content can no longer fit and it overflows the parent. That means as far as .container is concerned anything that sticks out will be ignored as far as the flow of the page is concerned. That’s just how CSS works :). If an element is too big to fit in its container then it sticks out (because overflow:visible is the default). It no longer then takes part in the flow of the page.

When you have wide fixed width elements in the page and your containers are auto or 100% width then you must also set a min-width equal to the largest element in that page.

e.g.


#main,.container{min-width:1280px}

I hope that explains it for you (and I hope it was the issue you were talking about :)).