Solved

Getting 2 Divs next to each other

Posted on 2006-06-13
3
497 Views
Last Modified: 2008-02-01
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;
}
0
Comment
Question by:aaron_karp
  • 2
3 Comments
 
LVL 13

Accepted Solution

by:
bochgoch earned 500 total points
Comment Utility
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
 
LVL 7

Expert Comment

by:maUru
Comment Utility

<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
 
LVL 7

Expert Comment

by:maUru
Comment Utility
explain exactly how you want it to display and ill fix up the code.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now