Home/ Questions/Q 7494299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T17:27:00+00:00

Can someone tell me what i am doing wrong here? I want the boxes

  • 0

Can someone tell me what i am doing wrong here? I want the boxes to be the EXACT same width between both divA and divB. Just because divB box has slightly longer text in ‘p2’ should not change the width of the entire box. I don’t want to use hard pixel widths for the ‘p1’ so that it can be flexible for viewport widths. I just want p1 box to always be half the size of p2, regardless of inner content. Can someone help me out or suggest a better method??

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:100%;
border:1px solid black;
}

#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
text-align:right;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
text-align:left;
border:1px solid blue;
}
</style>
</head>
<body>

<div id='divA'>
<p id="p1">Hello</p>
<p id="p2">Column 2</p>
</div>

<div id='divB'>
<p id="p1">Hello</p>
<p id="p2">Why is this box larger</p>
</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you give the children an explicit width, they will behave.
    The flex value will override these widths, giving you the desired layout. The boxes just need a value to start from. Without a defined width, they shrink to their content’s width, then the flex value is applied.

    See here: http://jsfiddle.net/ZBE7r/

    ...
#p1, #p2 {
    width: 1px;
}
...

    It only works if they all have the same explicit width (can be any value: 0, 1px, 100%, etc)

    • 0