CODEWITHSUNDEEP
htmlcss
ab11
ab11

Reputation: 20090

How to make this layout so the textarea is not pushed to the next line?

I have a very simple layout. It has an image and a text area. I would like the image to be in the upper left of the layout, and the text area to be to the right of the image, and aligned with the top of the image.

Instead, the text area is being pushed to a new line. How can I make the the text area align with the top of the image?

<div class="image"></div>
<textarea class="textarea"></textarea> 

.image {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 70px;
  border: 1px solid #000;
}

.textarea {
  height: 150px;

  margin-left: 60px;
  width: -moz-calc(100% - 60px);
  width: -webkit-calc(100% - 60px);
  width: -o-calc(100% - 60px);
  width: calc(100% - 60px);
}

Upvotes: 0

Views: 185

Answers (3)

Don Bottstein
Don Bottstein

Reputation: 1660

This is what floats are designed for.

.image {
  float: left;
  width: 50px;
  height: 70px;
  border: 1px solid #000;
}

.textarea {
  height: 150px;
  display: block;
  margin-left: 60px;
  width: -moz-calc(100% - 60px);
  width: -webkit-calc(100% - 60px);
  width: -o-calc(100% - 60px);
  width: calc(100% - 60px);
}
<div>
<div class="image"></div>
<textarea class="textarea"></textarea>
</div>

Upvotes: 0

kel
kel

Reputation: 1599

They need to both be set to inline-block (as stated above you don't need to set it to inline because it's already an inline element) and you need to get rid of the margin on your textarea but you are going to have a space between them that is about 4px. In order to get rid of this space you will want to wrap the elements in a div and set that div's font-size: 0. Also vertical-align: top to make things look nice.

Here is a fiddle with the code.

<div class="wrap">
    <div class="image"></div>
    <textarea class="textarea"></textarea>
</div>

.wrap {
    line-height: 0;
    font-size: 0;
}

.image {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 50px;
    height: 70px;
    border: 1px solid #000;
}

.textarea {
    display: inline-block;
    vertical-align: top;
    height: 150px;
    width: -moz-calc(100% - 60px);
    width: -webkit-calc(100% - 60px);
    width: -o-calc(100% - 60px);
    width: calc(100% - 60px);
}

Upvotes: 0

Chris Pratt
Chris Pratt

Reputation: 239250

The problem is that you haven't accounted for whitespace. When you make an element inline or inline-block, it flows as if it were text. In other words, whitespace between the elements will be represented. You've added a 10px buffer, but 10px is not enough to leave room for the whitespace. You have two options:

  1. Decrease the width of the textarea more. You may have to play around with the value a bit, but eventually, it will go on the same line

  2. Leave no whitespace between the elements, i.e.:

    <div class="image"></div><textarea class="textarea"></textarea>

Also, right now, it will never work because you've added a left margin to the textarea equal to the width you're subtracting. The total of margin+width must be accommodated on the line or it will break to the next line. Remove the margin entirely.

Check out the following jsfiddle: http://jsfiddle.net/7fzjadep/. All I did was remove the margin and subtract 100px instead of 60px from the width. Despite what the others are saying, it is not necessary that the textarea also be inline-block.

Upvotes: 1

Related Questions