Alignment issues

Discussion in 'CSS' started by Matt Ridge, Sep 13, 2011.

0
  1. #1
    Attached is the HTML, the CSS is below, I have the generic HTML file and the CSS file. By the HTML I have two tables, one is left one is right, both for some reason can't share the same line, even though they are floating...

    I need help, it seems to me that either float isn't correct, or that there is something I am missing.

    Thanks.

    View attachment NCMR.html 
    
body { 	background-color: 	#BCD2EE;
		color:				#000000;
		
} 


#strong { 	font-weight:		bold;
			font-family:		arial, sans-serif;
			font-size:			small;
}			


h1 {
			text-align:			center;
			font-family:		arial, sans-serif;
}


#logo {
	width: 					700px;
	height:					118px; 
    display: 				block;
    margin-left: 			auto;
    margin-right: 			auto; }
	
tr{
	text-align:				right;
}	


.Manu{
	width:					450px;
	float:					right;
	}
	
.Part{	
	width:					500px;
	float:					left;
    Code (markup):
     
    Matt Ridge, Sep 13, 2011 IP
  2. workingsmart

    workingsmart Well-Known Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    120
    #2
    html
    

<!-- Table Container -->
<div class="tables">
<table cellpadding="0" cellspacing="0" border="0" class="Part">
<tr>
<th>Nexx Part: </th>
<th><input type="text" name="fullname" value="" /></th>
</tr>
<tr>
<th>Nexx Rev: </th>
<th><input type="text" name="fullname" value="" /></th>
</tr>
<tr>
<th>Nexx Part Description: </th>
<th id="NPD"><input type="text" name="fullname" value="" /></th>
</tr>
<tr>
<th>NCMR Qty: </th>
<th><input type="text" name="fullname" value="" /></th>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" class="Manu">
<tr>
<th>Nexx Inventory on Hand: </th>
<th><input type="text" name="fullname" value="" /></th>
</tr>
<tr>
<th>Nexx Inventory Chk: </th>
<th><input type="text" name="fullname" value="" /></th>
</tr>
<tr>
<th>Supplier Name: </th>
<th id="SUN"><input type="text" name="fullname" value="" /></th>
</tr>
<tr>
<th>Supplier Number: </th>
<th><input type="text" name="fullname" value="" /></th>
</tr>
<tr>
<th>Manufacturer Part Number: </th>
<th><input type="text" name="fullname" value="" /></th>
</tr>
<tr>
<th>Manufacturer Serial Number: </th>
<th><input type="text" name="fullname" value="" /></th>
</tr>
<tr>
<th>NCMR ID: </th>
<th><input type="text" name="fullname" value="" /></th>
</tr>
</table>
</div>
    Code (markup):
    CSS 
    
.tables {
margin: 0px auto;
width: 950px;
}

.tables table {
float: left;
margin: 0px;
padding: 0px;
}

.Part { width: 500px; }

.Manu { width: 450px; }
    Code (markup):
     
    Last edited: Sep 15, 2011
    workingsmart, Sep 15, 2011 IP
  3. Matt Ridge

    Matt Ridge Peon

    Messages:
    166
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #3
    Thanks, it is appreciated.
     
    Matt Ridge, Sep 15, 2011 IP
  4. workingsmart

    workingsmart Well-Known Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    120
    #4
    That's what this forum is about...!! ( well supposed to be, minus the spam & crap... lol ) You're welcome.... There are plenty of us here to help you.. ( when we can... )
     
    workingsmart, Sep 15, 2011 IP
  5. wpredesign

    wpredesign Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #5
    hi use this css code:


    body {
    background-color: #BCD2EE;
    color: #000000;
    }

    #strong {
    font-family: arial,sans-serif;
    font-size: small;
    font-weight: bold;
    }

    h1 {
    font-family: arial,sans-serif;
    text-align: center;
    }

    #logo {
    display: block;
    height: 118px;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    }

    tr {
    text-align: left;
    }

    .Manu {
    float: right;
    padding-top: 10px;
    width: 500px;
    }

    .Part {
    float: left;
    padding-top: 10px;
    width: 500px;
    }
     
    wpredesign, Sep 24, 2011 IP