How can I get a w3-cell to not auto adjust?

Question

Working on a HTML page that requires me to have two elements side by side to replicate a 50/50 scenario sort of thing. I am using w3.css to help me since I am not so familiar with HTML/CSS.

My code is below for the section. So when the AWords/BWords grows too big, the cell grows so it does not match the other half. What I'm trying to ask is how can I implement a uniformly increase in size? So that both halves match each other, and the halfway mark stays in the middle of the screen?

<div class="Options w3-cell-row w3-center" style="width:75%;margin: 0 auto;">
        <div class="OptionA w3-container w3-cell" style="background-color: #EA4D63;border-style: solid;border-top-left-radius:25px;border-bottom-left-radius: 25px;">
            <div class="w3-container">
                <p class="AWords w3-xxlarge"></p>
            </div>
            <div class="w3-container">
                <p class="AVotes w3-large"></p>
            </div>
        </div>
        <div class="OptionB w3-container w3-cell" style="background-color:#2BA9E5;border-style: solid;border-top-right-radius: 25px;border-bottom-right-radius: 25px;">
            <div class="w3-container">
                <p class="BWords w3-xxlarge"></p>
            </div>
            <div class="w3-container">
                <p class="BVotes w3-large"></p>
            </div>
        </div>
    </div>

JSFiddle of what the code currently does

score 3 · Accepted Answer · answered Dec 08 '17 at 03:09

Assuming by the 'halfway' mark you mean the line that divides the two elements vertically, this arises due to the fact that W3 uses a table-based layout. Tables automatically expand to contain their contents.

As such, in order to ensure that both elements occupy the same amount of horizontal space, you simply give your cells a fixed width. This can be done by targeting .w3-cell:

.w3-cell {
    width: 200px;
}

And can be seen in the following:

.w3-cell {
  width: 200px;
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>

<div class="Options w3-cell-row w3-center" style="width:75%;margin: 0 auto;">
  <div class="OptionA w3-container w3-cell" style="background-color: #EA4D63;border-style: solid;border-top-left-radius:25px;border-bottom-left-radius: 25px;">
    <div class="w3-container">
      <p class="AWords w3-xxlarge">Idk what to do</p>
    </div>
    <div class="w3-container">
      <p class="AVotes w3-large"></p>
    </div>
  </div>
  <div class="OptionB w3-container w3-cell" style="background-color:#2BA9E5;border-style: solid;border-top-right-radius: 25px;border-bottom-right-radius: 25px;">
    <div class="w3-container">
      <p class="BWords w3-xxlarge">If this side gets too big it looks weird</p>
    </div>
    <div class="w3-container">
      <p class="BVotes w3-large"></p>
    </div>
  </div>
</div>

I've also created a Fiddle showcasing this here.

Note that if you want to continue to use inline styles everywhere, you'll have to apply this to both <div> elements with this class.

Hope this helps :)

Yeah this looks good! Follow up question: how can I make the whole thing wider? Is it just a case of changing the width of the w3-cell-row? — RafeeJ, Dec 08 '17 at 03:33
Essentially yes, but you'd have to increase each of the cell values. Ideally you'd be using percentage-based values for `.w3-cell` such as `width: 50%`, and making the `.w3-cell-row` use a fixed width. Then you only have the one value to update. — Obsidian Age, Dec 08 '17 at 03:38

How can I get a w3-cell to not auto adjust?

1 Answers1