Auto width for a div across a page based on screen width

Question

I have the following page that I'm trying to have a div span the whole page.

I used width:100%; but it didn't span the whole width. I was trying to do this based on answer already provided on stackoverflow:

Fluid width with equally spaced DIVs

I have the following CSS for this:

#experience-container {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    width:100%;
    margin-top: 45px;
    position: fixed;
    z-index: 1;
    background-color: rgba(248,248,248,.8);
    text-align: center;
    font-size: 13px;
}

#experience-container > div {
    width: 12%;
    /*height: 125px;*/
    vertical-align: middle;
    display: inline-block;
    margin-top:20px;
    /*display: inline;
    zoom: 1*/
}
#experience-container:after {
    content: '';
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

How do I get the contained to span the whole page regardless of screen width?

what about `margin-left` for that soon-to-be-a-clickable-menu container to be reset to `0`? — versvs, May 23 '17 at 13:04
@versvs So just add margin-left:0px to the #experience-container CSS? — user1048676, May 23 '17 at 13:08
I think the problem with that `div` is that it has margins different than `0`. As I see that margin-top was declared on purpose, i think resetting the other 3 may help you, but I dont want to overkill, that's why i suggested reseting only the margin-left. The thing is that the menu is inside another `div` whose width is set to 1200px and it has inherited that width as its own `max-width` (i'm simplifying a little, i just want you to get the idea). — versvs, May 23 '17 at 13:20

Dalin Huang · Accepted Answer · 2017-05-23T13:10:17.940

I found you have those two class in your nav parent (remove from your html):

.x-container.max {
    max-width: 1200px;
}
.x-container.width {
    width: 88%;
}

for class="x-container max width" remove the max width use only class="x-container"

<div class="x-container max width" style="margin: 0px auto;padding: 0px;">
  <div class="x-column x-sm x-1-1" style="padding: 0px;">
    <div class="x-raw-content">
      <div id="experience-container">
        <div>SAP Implementations</div>
        <div>SAP HANA</div>
        <div>Mergers and Acquistions</div>
        <div>Change Management</div>
        <div>Supply Chain</div>
        <div>Program Quality Assurance</div>
        <div>Program Definition</div>
        <div>LIMS</div>
      </div>
    </div>
  </div>
</div>

There were some other things I need to do but this pointed me in the right direction. Thank you! — user1048676, May 23 '17 at 13:22

score 0 · Answer 2 · answered May 23 '17 at 13:09

0

div with #experience-container does span over 100% of view port. Try adding css reset or margin: 0; at body element.

answered May 23 '17 at 13:09

wired

438
4
12

Mark Beleski · Answer 3 · 2017-05-23T13:29:16.507

I changed the style on .x-container from margin: 0px auto to margin: 0;

Original

<div class="x-container max width" style="margin: 0px auto;padding: 0px;"><div class="x-column x-sm x-1-1" style="padding: 0px;"><div class="x-raw-content"><div id="experience-container">

Updated

<div class="x-container max width" style="margin: 0;padding: 0px;"><div class="x-column x-sm x-1-1" style="padding: 0px;"><div class="x-raw-content"><div id="experience-container">

With that change, you are getting the effect I believe you are looking for.

Tip #1: There is no need to put a unit of measurement on the value of zero and it is a common standard not to. Ex - margin: 0px 0px would just be margin: 0.

Tip #2: Also, the shorthand notation of margin: 0 0 is margin: 0. This is the common syntax most developers use.

UPDATE As mention before, you have

.x-container.width { width: 88%; }

With my change, you do not have to change that but I do suggest a code clean-up. Things like width: 88% do not seem right to me.

Auto width for a div across a page based on screen width

3 Answers3