CODEWITHSUNDEEP
css
user1048676
user1048676

Reputation: 10066

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

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?

Upvotes: 2

Views: 659

Answers (3)

Mark Beleski
Mark Beleski

Reputation: 406

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.

Upvotes: 0

Dalin Huang
Dalin Huang

Reputation: 11342

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>

Upvotes: 1

wired
wired

Reputation: 438

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

Upvotes: 0

Related Questions