Input tag and table height - asp.net

I have asp.net Button, table and Button as below:
<table style="width: 600px;">
<tr>
<td>
<div style="float: right;">
<asp:Button ID="_btn01" runat="server" Text="GO" />
<table class="IHCommandButtonContainer" cellpadding="0" cellspacing="0">
<tr>
<td class="IHCommandButtonL"><asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Test/Images/btn_Search.gif" /></td>
<td class="IHCommandButtonM"><span>Search</span></td>
<td class="IHCommandButtonR"><img src="/Test/Images/btn_R.gif" /></td>
</tr>
</table>
<asp:Button ID="Button1" runat="server" Text="GO" />
</div>
</td>
</tr>
</table>
The problem is that I cannot put them in the same line.
They look like as below:
My css is below:
<style type="text/css">
.IHCommandButtonContainer { height: 21px; border: 0px; display: inline-block; cursor: pointer; margin: 0px; padding: 0px; border-spacing: 0px; border-collapse: collapse; }
.IHCommandButtonL { width: 22px; height: 21px; }
.IHCommandButtonL input { width: 22px; height: 21px; }
.IHCommandButtonM { background-image: url(/Test/Images/btn_M.gif); height: 21px; font-size: 9pt; font-family: Sans-serif, Arial, Dotum; }
.IHCommandButtonM span { margin: 0px 2px 0px 0px; }
.IHCommandButtonM_ { background-image: url(/Test/Images/btn_M_.gif); height: 21px; font-size: 9pt; font-family: Sans-serif, Arial, Dotum; }
.IHCommandButtonM_ span { margin: 0px 2px 0px 0px; }
.IHCommandButtonR { width: 3px; height: 21px; }
.IHCommandButtonR img { width: 3px; height: 21px; cursor: pointer; }
</style>
How can I put them in the same line?
Like 2 GO buttons are in the same line, but the table in the middle is upper than them.

User "vertical-align" attribute in your css. Set the value to "middle".
Cheers

Vertical align is the right answer, although I'm against to use the 'Developer Tools'...
The trick is to understand what you are doing...
this would help you: http://phrogz.net/css/vertical-align/index.html
take notice that putting the buttons in "display: inline-block" will help you to fix this problem easy!

Related

recoll results paragraph width is variable

As seen in the attached, some results paragraphs do not "conform" to what seems to be the "standard" specification for width (visible from results paragraph at top of image.
How can we control (limit) the overall width of the table to prevent the oversize table that was generated for "productdata.js" ?
Also, the left-side box with icon and "fit" factor is specified in the header with width = 100px, but the oversize table/paragraph seems to have overriden this and reduced the width to the width of the icon plus margin. Is there any way to prevent that from happening ?
The current contents of the paragraph CSS is:
<table style="background-color: #AFAFAF; width: 850px;"
<!-- <table class="parspec" style="background-color: #AFAFAF;" -->
border-style="none" border-color:="" border="0">
<tbody>
<tr>
<td style="width: 100px; text-align: center;
background-color: #0F0F0F;"
rowspan="4" >
<a class="thumbnail" href="#">
<img src="%I" width="64px" height="auto"> <!-- set width of thumbnail -->
<span>
<img src="%U">
</span>
</a>
<p style="font-family: sans-serif; color: #4F9F4F;"><b>%R</b></p>
</td>
<td style="vertical-align: top;"><br>
<th
style="font-family: sans-serif; color: #DFDFDF;
background-color: #000000; text-align: left;"
colspan="3" >
%T</th>
</td>
</tr>
<tr>
<td style="vertical-align: top; "></td>
<td style="font-family: sans-serif; text-align: center;
background-color: #000000; color: #CFCF4F;">
<b><font size=2>%M</font></b></td>
<td style="font-family: sans-serif; text-align: center;
background-color: #000000; color: #CFCF4F;">
<b><font size=2>%D</font></b></td>
<td style="font-family: sans-serif; text-align: right;
background-color: #000000; color: #CFCF4F;">
<b><font size=2>%S</font></b></td>
</tr>
<tr style="font-family: sans-serif;" 8="">
<td style="vertical-align: top; "></td>
<td class="snippet" colspan="3">
%A</td>
</tr>
<tr style="font-family: sans-serif; color: #9F;">
<td style="vertical-align: top; "></td>
<td style="background-color: #000000; color: #BFBFEF;"
colspan="3">
<b><font size=2>%U</font></b><br>
<span style="color: #BFBFFF">%L </span></td>
</tr>
</tbody>
</table>
<br>
<br>
The current contents of the header CSS is:
<style type="text/css">
body {
width: 1000px;
color: #CFCFCF;
background-color: #1F1F1F;
}
a:link {
color: yellow;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: green;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: orange;
background-color: transparent;
font-weight: bold;
text-decoration: underline;
}
a:active {
color: red;
background-color: transparent;
text-decoration: underline;
}
.snippet{
background-color: #000000;
color: #AFAFDF;
}
.thumbnail {
display:block;
position:relative;
padding: 4px;
width: auto; /* set width of thumbnail image in 'paragraph' code - not here */
border:none;
z-index:0;
}
.thumbnail:hover {
border:none;
background-color: transparent;
z-index: 50;
}
.thumbnail span {
position: absolute;
left: -9999px;
visibility: hidden;
}
.thumbnail span img {
max-width:256px; /* set 'large image' max width/height - advise keeping these */
max-height:256px; /* the same to avoid inadvertently changing the aspect ratio */
width:auto; /* leave set to auto */
height:auto; /* leave set to auto */
background-color: gray;
padding: 1px;
border: 1px solid black;
}
.thumbnail:hover span {
visibility: visible;
top: 4px; /* top/left positions 'large image' relative to top left */
left: 88px; /* of parent thumbnail (plus padding) */
}
</style>
After discussions with the developer for recoll, it has been determined that the problem was not with the customizations that I was attempting to apply.
The root of the problem was in fact a bug in the recoll code.

How do I make the buttons line up horizontally?

I am having issues with my CSS for my current design. I have everything pretty much completed. However, in the final product, I am noticing that the "View Participation Button" is not aligned with other "View Participation Buttons." They seem up and down. The should all be aligned. I adjusted the surrounding table/box so that they are aligned by fixing the height to 150px. Can anyone see the error in my code and point out how this one part can be fixed? I have a picture below on what it looks like:
<style type="text/css">
/*<![CDATA[*/
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_defaultlink a {
color: inherit !important;
text-decoration: none !important;
}
.em_black a {
text-decoration: none;
color: #000000;
}
.em_white a {
text-decoration: none;
color: #ffffff;
}
.em_blue a {
text-decoration: none;
color: #0a75b1;
}
.em_grey a {
text-decoration: none;
color: #4d4d4d;
}
.em_g_img + div {
display: none;
}
#media only screen and (min-width: 481px) and (max-width: 667px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_wrapper2 {
width: 100% !important;
height: 150px !important
}
.em_hide {
display: none !important;
}
.em_full_img {
width: 100% !important;
height: auto !important;
}
.em_full_img img {
width: 100% !important;
height: auto !important;
}
.em_side10 {
width: 10px !important;
}
.em_ptop {
padding-top: 20px !important;
}
/* Padding Left Right Bottom */
.em_h20 {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_w300 {
width: 320px !important;
}
.em_w280 {
width: 320px !important;
}
.em_font_18 {
font-size: 27px !important;
line-height: 31px !important;
}
}
#media screen and (max-width: 480px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_wrapper2 {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_full_img {
width: 100% !important;
height: auto !important;
}
.em_full_img img {
width: 100% !important;
height: auto !important;
}
.em_side10 {
width: 10px !important;
}
.em_side_10 {
width: 10px !important;
}
.em_ptop {
padding-top: 20px !important;
}
/* Padding Left Right Bottom */
.em_h20 {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_font_18 {
font-size: 18px !important;
line-height: 23px !important;
}
.em_w300 {
width: 300px !important;
}
/* update the N number as per width */
.em_w280 {
width: 300px !important;
}
.em_w146 {
width: 146px !important;
}
.em_aside25 {
padding: 0px 25px !important;
}
u + .em_body .em_full_wrap {
width: 100% !important;
width: 100vw !important;
}
}
A sample of my code is below:
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" class="em_ptop">
<table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tbody>
<tr>
<td align="center" valign="top">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#9E9F9F" style="background-color:#9e9f9f; color:#fff;">
Feature Presenter 3
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table>
</td>
</tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;">
<img src="./TREATMENT OPTIONS FOR ADVANCED BREAST CANCER_files/oshughnessy-joyce-800.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4D4D4D" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;height:150px" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px;">
<span style="font-weight:bold;">Joyce O’Shaughnessy</span><br>
Baylor University Medical Center
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#007F3D" style="border-radius:5px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold;">
<a target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3" style="text-decoration:none; color:#ffffff; display:block; line-height:16px;">View
Participation<br>
Options
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
I can add the CSS styling too if needed but I think the inline CSS that I have is what needs to be adjusted/modifyed/added.
I've started by completely throwing out your table based layout, this simplifies the HTML. Then I've taken away the inline styles, which simplifies things further.
So we have a list of things, order doesn't matter so lets use an unordered list (ul).
You have many options on how to lay out the list elements, I've chose display:block for simplicity. You could also look at Flex, CSS Grid, or even CSS Tables.
To align the buttons to the bottom, I've created an element with a fixed height, set that to position:relative. I've then applied position:absolute to the button element and set the position relative to the bottom of the parent element.
.presenters {
list-style: none;
padding: 0;
}
.presenter {
display: inline-block;
margin-right: 10px;
width: 158px;
background-color: #4D4D4D;
color: #FFF;
border-radius: 0 0 5px 5px;
vertical-align: top;
overflow: hidden;
}
.presenter-imgContainer {
background-color: #FFF;
border: solid 2px #9e9f9f;
}
.presenter-img {
display: block;
width: 155px;
}
.presenter-title {
background-color: #9E9F9F;
font-size: 16px;
font-weight: 400;
text-align: center;
width: 155px;
margin: 0;
}
.presenter-content {
/*Set a sensible fixed height*/
height: 80px;
/*Give enough room in the bottom padding
For the action element
*/
padding: 8px 10px 70px;
/*We want to postion the action element
relative to this
*/
position: relative;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
line-height: 17px;
text-align: center;
}
.presenter-name {
font-weight: bold;
}
.presenter-action {
background-color: #007F3D;
display: block;
padding: 10px 5px;
text-decoration: none;
color: white;
border-radius: 5px;
/*Postion the button at the bottom*/
position: absolute;
bottom: 10px;
width: calc(100% - 30px);
}
<ul class="presenters">
<li class="presenter">
<div class="presenter-imgContainer">
<h2 class="presenter-title">Feature Presenter 2</h2>
<img class="presenter-img" src="https://www.fillmurray.com/154/189" />
</div>
<div class="presenter-content">
<div class="presenter-name">Dennis Salmon</div>
<div class="presenter-desc">UCLA Medical Center</div>
<a class="presenter-action" target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3">View Participation<br>Options</a>
</div>
</li>
<li class="presenter">
<div class="presenter-imgContainer">
<h2 class="presenter-title">Feature Presenter 3</h2>
<img class="presenter-img" src="https://www.fillmurray.com/154/189" />
</div>
<div class="presenter-content">
<div class="presenter-name">Joyce O’Shaughnessy</div>
<div class="presenter-desc">Baylor University Medical Center</div>
<a class="presenter-action" target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3">View Participation<br>Options</a>
</div>
</li>
</ul>

Can't change the width of table <TD>

The blue table data entry won't reside its width. Is there a new html5 way to be able to achieve this feat? The row should be the same width as the photo above it.
<div class="template" style="text-align:center">
<table width="100%" and height="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 align="center">
<tr>
<td width='100%' height='100%' bgcolor='#f2f3f4'>
<div style="text-align: center;">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</div>
</td>
</tr>
<!-- Background photo -->
<TABLE width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center">
<TR>
<TD WIDTH="997" HEIGHT="326"
background="https://image.ibb.co/dO1HfQ/dog3edit.jpg" style="background-
image:url(https://image.ibb.co/dO1HfQ/dog3edit.jpg); background-repeat:
no-repeat;">
<!-- <b>WELCOME TO ROVER! </b> -->
<FONT class="titletext" color="white" align="center" style="width: 800px;
font-size: 50px;"><b>WELCOME TO ROVER!</b></FONT><br><br>
<FONT class="subtitletext" color="white" align="center" style="width:
100px;
font-size: 30px;">Ready to get started?</FONT><br><br><br>
<a href="#"><img src="https://image.ibb.co/nvbiLQ/button.png"
alt="Button" border="0"></a>
</TD>
</TR>
<tr>
<td width="80%" bgcolor="#blue" style="width:80%">
</td>
</tr>
</TABLE>
</table>
</div>
article {
width: 100%;
}
#banner {
background: url("https://image.ibb.co/dO1HfQ/dog3edit.jpg") no-repeat no-repeat;
padding: 25px 0;
}
h1 {
font-size: 50px;
margin-bottom: 0;
}
h1, p {
color: white;
width: 100%;
text-align: center;
}
p {
font-size: 30px;
}
button {
width: 200px;
background: #00c55c;
border: none;
padding: 12px 24px;
color: white;
font-size: 24px;
border-radius: 6px;
display: block;
margin: 0 auto;
clear: both;
}
#logo {
background: #f2f3f4;
}
#logo img {
display: block;
margin: 0 auto;
clear: both;
}
<article>
<section id="logo">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</section>
<section id="banner">
<h1>Welcome to Rover!</h1>
<p>Ready to get started?</p>
<button>Search Sitters</button>
</section>
</article>
I'd do something like this. No table for layout. If it has to be inline, just put a <style></style> tag above the HTML block.
For the background color of the button i used the following website.
https://flatuicolors.com/
I also made everything separated into css and html so you could see. No inline CSS. This is the proper way to use tables, and headers.
Use a <div> tag for the headers as it automatically pushes things to a new line after it. No need for the break tag. The break tag is rarely used in design anymore.
Also i made sure that your separator line is blue.
I believe there are better ways of accomplishing this WITHOUT tables, however you said you needed this in table form, so here ya go!
table {
width: 80%;
border: none;
text-align: center;
margin: 0 auto;
color: white;
}
.background {
background: url('https://image.ibb.co/dO1HfQ/dog3edit.jpg');
}
.titletext {
font-size: 50px;
}
.subtitletext {
font-size: 30px;
}
button {
margin: 10px 0;
width: 50%;
border-radius: 15px;
height: 100px;
background: #27ae60;
border: 1px solid rgba(255,255,255,0.8);
font-size: 20px;
color: white;
}
button:hover {
background-color: #2ecc71;
}
.seperator {
width: 80%;
background: blue;
}
<TABLE>
<TR class="background">
<TD>
<div class="titletext">WELCOME TO ROVER!</div>
<div class="subtitletext">Ready to get started?</div>
<button>Search Sitters</button>
</TD>
</TR>
<tr>
<td class="seperator""></td>
</tr>
</TABLE>
You are using inline css,Try this:
<TABLE style="width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center"";>

control height of ajax toolkit autocomplete in asp.net(vb)

i have text box and i want it when i start typing the autocomplete will show the suggestion. this is my html code
<tr>
<td valign="top" align="right">
<asp:Label ID="labelPayableAccount" runat="server" CssClass="ItemTitle" Text="Payable Account"></asp:Label>
</td>
<td valign="top" align="center" class="style2">
<asp:Label ID="labelPayableAccountColon" runat="server" CssClass="ItemTitle" Text=":"></asp:Label>
</td>
<td valign="top" align="left">
<asp:TextBox ID="txtPayableAccount" runat="server" Width="400px" CssClass="textBoxString"></asp:TextBox>
<div id="divwidth1">
</div>
<ajaxToolkit:AutoCompleteExtender ID="autoComplete1" runat="server" EnableCaching="true"
BehaviorID="AutoCompleteEx" MinimumPrefixLength="1" TargetControlID="txtPayableAccount"
CompletionListElementID="divwidth1" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList"
CompletionListHighlightedItemCssClass="AutoExtenderHighlight" ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionListPayableAccount" CompletionSetCount="20" CompletionInterval="1"
DelimiterCharacters=";, :" ShowOnlyCurrentWordInCompletionListItem="false">
</ajaxToolkit:AutoCompleteExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidatortxtPayableAccount" runat="server"
ErrorMessage="Required !" ControlToValidate="txtSupplierType">
</asp:RequiredFieldValidator>
</td>
</tr>
and this is the css code for the autocomplete layout
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
font-weight: normal;
border: solid 1px #006699;
line-height: 20px;
padding: 10px;
background-color: White;
margin-left: 10px;
max-height:180px;
}
.AutoExtenderList
{
border-bottom: dotted 1px #006699;
cursor: pointer;
color: Maroon;
}
.AutoExtenderHighlight
{
color: White;
background-color: #006699;
cursor: pointer;
}
#divwidth1
{
width: auto !important;
height:180px !important;
}
#divwidth1 div
{
width: auto !important;
}
i have design the layout so that the height of autocomplete frame is 180px, but the list wouldn't do the same, here is the snapshot
can anybody help me?
Perhaps try adding the overflow css property?
#divwidth1
{
width: auto !important;
height:180px !important;
**overflow: hidden;**
}

Make div take up remainder of space on the Y axis

I have a product template that looks like this:
The html for it is:
<div id="product">
<div id="cont">
<div class="productPictures">
<a
href="images/spalt_images/body_images/525a.JPG"
target="_blank"
>
<img src="images/spalt_images/body_images/525a.JPG"
width="180"
height="139.52153110048"
alt="front image" class="productImage"/>
</a>
<a
href="images/spalt_images/body_images/525a.JPG"
target="_blank"
>
<img src="images/spalt_images/body_images/525a.JPG"
width="180"
height="139.52153110048"
alt="front image" class="productImage"/>
</a>
</div>
<div class="productNumber"> #123 </div>
<div class="productDesc">
<table>
<col id="col1" />
<col id="col2" />
<tbody>
<tr>
<td> Body Type: </td>
<td> Stratocaster </td>
</tr>
<tr>
<td> Body Wood Type: </td>
<td> Walnut </td>
</tr>
<tr>
<td> Weight: </td>
<td> 12.7 lbs </td>
</tr>
<tr>
<td> Thickness: </td>
<td> 1 inch </td>
</tr>
<tr>
<td> Routing: </td>
<td> Standard </td>
</tr>
</tbody>
</table>
<div class="productPrice">
$456.00
</div>
</div>
</div>
</div>
</div>
</div>
and the css:
#product {
background-position: left top;
border: 2px solid #2D0000;
background-color: #42533E;
width: 650px;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px 4px 4px 4px
}
.productNumber {
padding: 4px;
font-size: 35px;
color: #C9E0D0;
float: right;
text-shadow: 2px 2px 3px #252525;
}
.productPictures
{
float: left;
padding: 0px;
margin: 5px 0px 10px 0px;
width: 200px;
}
.productDesc{
padding: 5px 10px 5px 5px;
color: #FFFFFF;
font-size: large;
float: left;
width: 400px;
height: 100%;
}
.productPrice {
font-size: 25px;
color: #F4D582;
text-align: right;
font-weight: bold;
text-shadow: 2px 2px 3px #252525;
}
.productImage {
border: 2px solid #20281E;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
#col1{
width: 40%;
}
#col2{
width: 60%;
}
table{
width: 100%;
}
So what I would want is for the product description div to end up at the bottom so that the price would also end up at the bottom. I tried to set height to 100% but this did not have any effect.
Thanks
And here is a working example.
relevant code:
#product {
...
position:relative;
}
.productDesc{
...
position:absolute;
bottom:0px;
right:0px;
}
First of all you need to set float:left on the div with the id of cont.
You have elements inside that container floating left, but that container is not, therefore its height is not expanding to its content.
Then you can set the productDesc div to be position:absolute and bottom:0px.
Of course, this will mess with its relative positioning to the photos, which it currently has, but if you want it fixed to the bottom of the parent container, that's the only way. You can then set the right:100px or however much it needs to be horizontally positioned how you would like.
Edit:
Here's a working example: http://jsfiddle.net/citizenconn/hXSmK/
Clear floats for your .productDesc and .productPictures
Use display:inline-block for those 2 DIVs.
And reduce the width of your .productDesc. Say, make it 350px
This will work.

Resources