How to make text not change the width of the container its in?

,
1

Hello!

How to have the text not effect the containers width even if its in a grid?

Even if the texts font size is changed or more text is added, how to make it so it just fills up the container without effecting the containers width?

Here’s a gif that explains what im asking

exp

2

Here’s what I think you want? I think you want to set the maximum size of a div. Can you confirm this?

3

That only works for me if i use absolute lengths for the div that is the middle grid cell :confused:

but i need it to be 100% but when i do that the text forces it to change

4

you can use relative unit of measure vw

or show the code you want help with

5

The div named content is having its width changed by the text

#AboutAndLinks {
      background-color: #464646;
      padding-bottom: 1cm;
      width: 30cm;
      height: 15cm;
      text-align: justify;
      font-size: 1cm;
      border-style: groove;
      border-width: 2mm;
      border-color: #464646;
      border-radius: 2cm;
      display: grid;
      align-items: center;
      justify-items: center;
      grid-column: 2;
      grid-row: 2;
      grid-template-colums: 2fr 7fr 2fr;
      grid-template-rows: 2fr 8fr 2fr;
    }
    
  </style>
  
  
  <head>
    <title>CEASLESS</title>
    <link rel="icon" type="image/IMG FILE" href="/icon.png">
    
  </head>
  
  
  <!-- visible -->
  <body>  
    <div id="Heading_Image" style="grid-column:2;grid-row: 1;width:30cm;height:12cm;
    background-image: url('/Website_Heading.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;"></div>
    
    <div id="AboutAndLinks">    
      <!-- Image deco -->
      <div id="TOP" style="grid-column:2;grid-row:1;width:100%;height:100%;background-image:url('/Top_Deco.png');background-repeat:no-repeat;background-size:contain;background-position:center;"></div>
      <div id="BOTTOM" style="grid-column:2;grid-row:3;width:100%;height:100%;background-image:url('/Bottom_Deco.png');background-repeat:no-repeat;background-size:contain;background-position:center;"></div> 
      <div id="LEFT" style="grid-column:1;grid-row:1/4;width:100%;height:100%;background-image:url('/Left_Deco.png');background-repeat:no-repeat;background-size:contain;background-position:center;"></div>
      <div id="RIGHT" style="grid-column:3;grid-row:1/4;width:100%;height:100%;background-image:url('/Right_Deco.png');background-repeat:no-repeat;background-size:contain;background-position:center;"></div>
      
      <!-- Text content thats changing the width of the grid cell its in dammit -->
      <div id="Content" style="grid-column:2;grid-row:2;width:100%;height:100%;">
        <p style="color:#FFFFFF">Hello! Im <b>Droconicat</b> and welcome to my website! Im a student, composer, programer and vector artist. Ive been going to music school for 7 years and this year just finished it! You can check out my stuff down bellow.</p></div>
    </div>
6

which width value do you expect to be applied to it? why are you using both inline style and the style element?

7

the “Content” div own style?

8

using inline styling makes this a bit confusing

can you also maybe create a pen on codepen or similar code sharing app to share your situation?

9

https://codepen.io/editor/MusicLover69/pen/019f36b9-0c43-749d-aa79-c81cec2f5c0f

aight here’s the codepen of the code

10

how do I reproduce this issue? how do I change the text to see the issue?

11

the middle grid cell is suppost to be smaller but if i add more text or increase font size the div has its width changed and ignores the grids dimensions

12

this is really difficult to debug with all the inline styling, I really suggest you don’t use that

but as you are using grid, have you tried giving fixed sizing to the columns?

13

Havent tried that hang on

14

Okey i just made both the grid use fixed sizing and the “content” div use fixed styling and now it works! :slight_smile:

Also thanks for reminding me to make the styling more organized!