Is there a way to prevent a w3-cell from automatically adjusting its size?

I am currently working on an HTML page where I need to have two elements positioned side by side in a 50/50 scenario. Since I'm not very experienced with HTML/CSS, I am using w3.css for assistance.

Below is my code snippet for the section. The issue I'm facing is that when the AWords/BWords content grows too large, one cell expands while the other remains smaller. How can I ensure that both halves increase uniformly so they match each other and the midpoint stays centered on 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>

View the current behavior of the code on JSFiddle

htmlcssw3.css

Answer №1

When you mention the 'halfway' mark, I assume you're referring to the vertical line that divides the two elements. This occurs because W3 utilizes a table-based layout, causing tables to automatically expand to accommodate their contents.

To ensure both elements occupy equal horizontal space, you can simply assign a fixed width to your cells by targeting .w3-cell:

.w3-cell {
    width: 200px;
}

This can be demonstrated as follows:

.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 provided a Fiddle demonstrating this here.

Keep in mind, if you prefer using inline styles throughout, you'll need to apply this to both <div> elements with the same class.

Hopefully, this explanation is helpful :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the <br> tag affect the layout in terms of horizontal space?

I am perplexed by the fact that it displays two lines vertically separated with a br tag differently than two lines vertically separated with the first line acting as a block level tag. For example, see this code snippet: https://jsfiddle.net/qzgeassf/ ...

htmlcss

How to apply CSS styles to a variable containing an element in React

I'm having some trouble styling this element I created. So, I made a variable called test and assigned it to an element. var test = <Button className="testButton" /> Then in my return statement, I am using the test variable like so: render () ...

javascriptcssreactjsmaterial-ui

How to Adjust Overlapping Text in CSS?

Currently, I am facing an issue with an element overlapping in my CSS file. On a regular browser, one line of text appears fine but on mobile devices, it overlaps into two lines. This problem is specifically for the mobile version of the website, particula ...

htmlcssmobiletwitter-bootstraptablet

What is the best way to showcase the output of a Perl script on a webpage

I recently came across a resource discussing the process of executing a perl script from a webpage. What is the best way to run a perl script from a webpage? However, I am facing a situation where the script I have takes more than 30 seconds to run and d ...

javascripthtmlajaxperl

Fine-tuning the design of the Box Model layout

I can't seem to get the table in my code to center properly and not be stuck against the left border. Despite trying various solutions, the table in column 2 is floating off to the left and touching the border. I need it to be more centered within the ...

htmlcsslayout

Angular 2 failing to display background images

I have been working on an Angular 2 app with just one component. I recently tried to set a background image for the entire page using the following code: app.component.html <dashboard class="dash"></dashboard> app.component.css .dash { b ...

htmlcssangularangular-cli

JavaScript code to toggle the navigation bar on mobile devices

I am experiencing an issue with a script that is not performing the desired task. I am looking for a script that can add the Class "active" to a ul element with the id "btnMob0". Currently, my script looks like this: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

What is the best way to flip cards with the onClick event in JavaScript?

My cards are currently facing down with the code* provided. What steps should I take to flip them face up using onClick functions? Furthermore, how can I store the IDs in an Array and use them to retrieve images from my image collection? HTML <table s ...

javascripthtmlcss

Dealing with Bootstrap 3 compatibility issues in IE8: Finding solutions for mobile-like behavior

Currently, I am in the process of completing this website at . Most aspects of the site display properly on all standard browsers, however, there seems to be an issue with IE8. It appears as if the layout is behaving like a mobile view, with all containe ...

csstwitter-bootstrapinternet-explorer-8media-queries

The Kenburn zoom image effect fails to function

I want to implement a zoom effect on an image using the Ken Burns effect when it is clicked. However, the code I have written does not seem to be working as expected. Here is the code snippet: $(document).ready(function () { $('.kenburns').on( ...

javascriptcss

Caught in an endless cycle while attempting to capture form submissions

My current task involves writing Javascript/JQuery code to intercept form submissions before they are sent in order to validate the fields. However, I am facing an issue where blocking the default event and resubmitting the form triggers an infinite loop b ...

javascriptjqueryhtml

Modifying Bootstrap 5 color themes does not affect the button color classes

After following the steps outlined in this guide, I successfully customized the default colors of Bootstrap 5 in my React application created using create-react-app. Within my /src/scss/custom.scss file, I can easily utilize any newly defined variables and ...

cssreactjstwitter-bootstrapreact-bootstrapbootstrap-5

HTML and CSS: Centering elements inside div containers

Is it possible to align elements within a </div> using the align attribute? For example, as shown in the image below: e1:align="top" e2:align="right" e3:align="bottom" e4:align="left" EDIT: This query is purely for self-learning purposes in HTML ...

htmlcssalignment

Bulma inquired, "What is the best way to position a button at the center of a

<div class="container"> <button class="btn">Click me</button> </div> <button class="is-centered"> seems to be malfunctioning. ...

htmlcssbulma

Trouble with closing windows in the in-app browser on Android devices

Is there a method to successfully close the in-app browser? Despite window.close working on iOS devices, it is not effective on Android. I have experimented with alternatives like window.top.close and window.open("", "_self") window.close, but none have ...

javascriptandroidhtmlmobileviber

When floated to the right, the element is being pushed onto the next line in Firefox

Within a div, there are four elements. I specifically want the last element to be positioned on the far right, so I applied float: right to it. However, in Firefox, the last element gets pushed to the end of the next line instead. This issue does not occ ...

htmlcssfirefox

Dividing a container into sections using percentages with margins? Ensure the total adds up to

Looking to create a grid with div/section in percentage format, while maintaining consistent margins throughout. See an example here: I have code that works with margin set to 1px, but I want to adjust it to use a margin of 1em or around 10px. How can I a ...

htmlcss

How can you apply color to {{expression}} text using AngularJS while also keeping all the text on a single line?

After writing the following code, I noticed that when I enter text into the input box, an output appears. However, I am now trying to find a way to color the output text while keeping it on the same line. <script src="https://ajax.googleapis.com/ajax ...

javascripthtmlangularjscolors

Is there a way to add an element after the final child?

CSS: <div class="uploader" id="uniform-file"> <input type="file" name="data[Tolet][images][]" class="span12 tolet_img" id="file" style="width: 100%; opacity: 0;" size="20"><span class="filename">No file selected</span><sp ...

jqueryhtml

Safari 15.6.1 does not support background video playback in Next.js

Currently using Safari version 15.6.1 for a small website project, I have encountered an issue where the video appears frozen with an arrow in the middle. Oddly enough, this problem only occurs on Safari as both Chrome and Firefox display the code correctl ...

javascripthtmlnext.jssafari