Getting 2 Divs next to each other

This is a pretty simple problem, but it's late and I can't figure out what I'm doing wrong. Please help =)

I have two divs. One has a text area inside it. Once has some text. I want them to appear side-by-side. Instead, the text area takes up 100% of the container, and the labels get forced down below. Any ideas?

<div id="newNoteTextAreaContainer"><textarea class="newNoteTextArea" rows="30" cols="20"></textarea></div>
<div id="newNoteLabels">First Label, Second Label, Third Label</div>

Here are my styles:

.newNoteTextArea {
      width: 99%;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:11px;
      padding: 3px;
      display:inline;
}
#newNoteTextAreaContainer {
      width: 80%;
      display: inline;
}
#newNoteLabels {
      width: 20%;
      display: inline;
}
aaron_karpAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
bochgochConnect With a Mentor Commented:
Try this...
.newNoteTextArea {
     width: 99%;
     font-family:Verdana, Arial, Helvetica, sans-serif;
     font-size:11px;
     padding: 3px;
     display:inline;
}
#newNoteTextAreaContainer {
     width: 79%;
     float:left;
}
#newNoteLabels {
     width: 20%;
     float:left;
}

...the floats should sort your positioning out, and reduce the width to 79% to allow space for margins, borders and widths...

bg
0
 
maUruCommented:

<style>
.newNoteTextArea {
      display: inline;
}
.newNoteLabels {
      display: inline;
}
</style>
<textarea class="newNoteTextArea" rows="4" cols="20"></textarea>
<div class="newNoteLabels">First Label, Second Label, Third Label</div>


styling removed for brevity

i dont know why you want the container div

also can use:


<style>
.newNoteTextArea {
      float: right;
}
.newNoteLabels {
      display: right;
}
</style>
<textarea class="newNoteTextArea" rows="4" cols="20"></textarea>
<div class="newNoteLabels">First Label, Second Label, Third Label</div>
0
 
maUruCommented:
explain exactly how you want it to display and ill fix up the code.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.