?
Solved

Getting 2 Divs next to each other

Posted on 2006-06-13
3
Medium Priority
?
510 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 2000 total points
ID: 16892292
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
ID: 16893000

<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
ID: 16893026
explain exactly how you want it to display and ill fix up the code.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month9 days, 8 hours left to enroll

609 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