[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Getting 2 Divs next to each other

Posted on 2006-06-13
3
Medium Priority
?
507 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

656 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