We help IT Professionals succeed at work.

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

John Carney
John Carney asked
on
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

Comment
Watch Question

Commented:
change
float: none;
to
float: left;

for #conditions.
Commented:
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

John CarneyReliability Business Tools Analyst II

Author

Commented:
Thanks, rbudj ...

Explore More ContentExplore courses, solutions, and other research materials related to this topic.