?
Solved

How do I align two divs next to each other rather than one on top of the other?

Posted on 2008-01-24
3
Medium Priority
?
7,116 Views
Last Modified: 2008-01-24
I would like to have the div "descriptionShort" directly to the right of "conditions", and top aligned with it. Please correct either the hTML or CSS, or both, to make that happen.  As it is now, "descriptionShort" is coming in below "conditions", and left-aligned.

Also, in "descriiptionShort", is it possible to have a line height 22px between the first lines 1 and 2, and a height of 14px for the other 3 lines?

Thanks!
John
HTML CODE:
      <div id="conditions">Condition:<br />
          Product(s): 
      </div>     
      <div id="descriptionShort">New<br />
      1 White JBL Radial High-Performance Loudspeaker Dock for iPod JBLRADIALWHT </div>
        
CSS CODE:
#conditions {
	font-family: "Gill Sans MT";
	font-size: 14px;
	margin-top: 40px;
	float: none;
	padding-top: 0px;
	width: 70px;
	height: 50px;
	color: #333333;
}
#descriptionShort {
	font-family: "Gill Sans MT";
	font-size: 14px;
	margin-top: 0px;
	float: left;
	padding-top: 0px;
	width: 250px;
	height: 50px;
	color: #333333;
}

Open in new window

0
Comment
Question by:gabrielPennyback
3 Comments
 
LVL 12

Expert Comment

by:vb_jonas
ID: 20737439
change
float: none;
to
float: left;

for #conditions.
0
 
LVL 16

Accepted Solution

by:
rbudj earned 2000 total points
ID: 20737488
Place the two div's in a holder div.  Float both right and left sides.
<div id="holder">
<div id="conditions">Condition:<br />
          Product(s): 
      </div>     
      <div id="descriptionShort">New<br />
      1 White JBL Radial High-Performance Loudspeaker Dock for iPod JBLRADIALWHT </div>
 
</div>
 
 
 
 
 
#conditions {
	font-family: "Gill Sans MT";
	font-size: 14px;
	float: right;
	width: 70px;
	height: 50px;
	color: #333333;
}
#descriptionShort {
	font-family: "Gill Sans MT";
	font-size: 14px;
	float: left;
	width: 250px;
	height: 50px;
	color: #333333;
}
 
#holder {
	width: 320px;
	height: 50px;
}

Open in new window

0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 20739509
Thanks, rbudj ...
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

589 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