display:inline resets height and width

Question

I have created example at http://jsfiddle.net/GKnkW/2/

html

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
 </head>
<body>
      <div class="step">1</div>&nbsp;
      <div class="step">2</div>
      <br/><br/>
      <div class="step1">3</div>&nbsp;
      <div class="step1">4</div>
</body>
</html>

css

.step
{
    height:150px;
    width:150px;    
    background:yellow;
    display:inline;
}

.step1
{
    height:150px;
    width:150px;    
    background:yellow;
}

I want to display two divs side by side with their original height and width ( set in css ) as soon as i add display:inline property to css it seems to loose height and width defined earlier. [ check divs with # 1 and #2 which seems to loose height and width setting ]

can some one pin point an error which I seems to be doing or workaround for this weird behavior ?

score 55 · Accepted Answer · edited Dec 08 '19 at 16:47

55

Inline objects don't have heights or widths. Why are you setting them inline to begin with? You probably want to either float them or use display: inline-block.

edited Dec 08 '19 at 16:47

Shayan

709
1
15
31

answered Apr 22 '11 at 20:05

DA.

39,848
49
150
213

was not aware of the inline object's behavior. thanks for the enlightenment. changing the display property to inline-block resolves the issue. – N30 Apr 22 '11 at 20:09
dang!! can't accept answer before 11 minutes..will mark your answer as accepted after that.. – N30 Apr 22 '11 at 20:10

score 15 · Answer 2 · edited Dec 20 '15 at 21:31

15

Use this:

display:inline-block;

edited Dec 20 '15 at 21:31

Undo

25,519
37
106
129

answered Dec 20 '15 at 21:24

Moe Mamdouh

195
1
4

inline-block keeps it inline, but allows it to take on block element properties like width and height. – Richard Lovell Aug 16 '17 at 03:18

score 1 · Answer 3 · edited May 23 '17 at 12:09

1

Just adding that I had a similar problem and thought it was a Javascript/Jquery issue. This thread solved for me.

INLINE elements have no width, so you cannot set it via js.

Thanks.

Here's a link to my issue just in case.

Jquery and Jqueryui: set width not working after using resizable?

edited May 23 '17 at 12:09

Community

1
1

answered Mar 24 '13 at 01:14

noderman

1,934
1
20
36

score 1 · Answer 4 · answered Apr 22 '11 at 20:16

This should do it

html

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
 </head>
    <body>
      <div class="step-section">
          <div class="step">1</div>
          <div class="step">2</div>
      </div>
      <div class="step-section">
          <div class="step">3</div>
          <div class="step">4</div>
      </div>
</body>
</html>

css

.step
{
    margin:5px;
    height:150px;
    width:150px;    
    background: yellow;
    float:left;
}

.step-section
{
  clear:both;
}

display:inline resets height and width

4 Answers4

Linked

Related