CODEWITHSUNDEEP
htmlcss
Andris
Andris

Reputation: 1442

HTML/CSS div width px see different result in different browsers

Here is example http://jsfiddle.net/matq8eb2/1/

In FF and IE see as expected. In Chrome and Opera another (unexpected) result.

Have one "container" div that includes 3 divs.

Each div has borders border:solid 1px; as i understand border width is 1px.

First div width is width:390px;

I want total width of second and third div to look the same as width of first div.

Second div width is width:200px; plus border 1px, so div would be 201px

Third div width is width:188px; plus border 1px, so div would be 189px

And 201 + 189 would be 390. So in first line expect to see first div, in the second line 2 divs (second and third).

Here is code

<div class="" id="body" style=" display:inline-block; background-color:#ff0000; ">

<div class="element" id="header1" style="display:table; width:390px; border:solid 1px; border-color:#f1f1f1; background-color:#fff; ">
Header part 1
</div>

<div class="element" id="header2" style="float:left; display:table; width:200px; border:solid 1px; border-color:#f1f1f1; background-color:#fff; ">
Header part 2
</div>

<div class="element" id="header3" style="display:table; width:188px; border:solid 1px; border-color:#f1f1f1; background-color:#fff; ">
Header part 3
</div>    

</div>

With FF and IE i see what i have expected. But with Chrome and Opera the third div is in new line.

What need to change to see the same in all browsers.

Upvotes: 0

Views: 1546

Answers (3)

Pratik Galoria
Pratik Galoria

Reputation: 351

First of all, provide this property within your 'style' tag,

<style>
div {box-sizing: border-box}
</style>

and now, forget about other calculation that you need to apply after providing border. Now your border width will be included within your 'width' property itself. So you can simply provide width of first div as 200px and second as 190px.

Hence you can now set your code as below:

<div class="" id="body" style=" display:inline-block;background-color:#ff0000; ">

<div class="element" id="header1" style="display:table; width:390px; border:solid 1px; border-color:#f1f1f1; background-color:#fff; ">
Header part 1
</div>

<div class="element" id="header2" style="float:left; display:table; width:200px; border:solid 1px; border-color:#f1f1f1; background-color:#fff; ">
Header part 2
</div>

<div class="element" id="header3" style="display:table; width:190px; border:solid 1px; border-color:#f1f1f1; background-color:#fff; ">
Header part 3
</div>    

</div>

For more info about box-sizing, refer this: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Upvotes: 1

user3996333
user3996333

Reputation:

Header 3 should also have 

 display: inline-block

Upvotes: 0

TBB
TBB

Reputation: 1237

Borders are both sides, so 1px (left) + 1px (right) = 2px (total per div).

So try setting the second div as 198px and the third div as 188px.

If problem persists, try slightly lower again.

Upvotes: 0

Related Questions