Replacing HTML Table elements with Divs? - css

Question

I have a common header that consistently gets generated for all site web pages and which uses a div element to wrap a table element that contains one row with three cells.
The table and its cells are used to hold three images, one that shows up a the top-left of the page, one that shows up in the top-center of the page, and one that shows up in the top-right of the page.
The code currently looks like:
<div class="div_Header">
<table class="table_Header">
<tr>
<td class="td_Left"><img src="./IMAGES/Logo_Left.png" alt="Left Logo" /></td>
<td class="td_Center"><img src="./IMAGES/Center_Title.png" alt="Center Header" /></td>
<td class="td_Right"><img src="./IMAGES/Logo_Right.png" alt="Right Logo" /></td>
</tr>
</table>
</div>
In the above, CSS styles are used to do things like align the left image to the far left, the right image to the far right, and the center image to the center of the page.
My question is: Is this the best practice for achieving this or is there a better way? And, if there's a better way, how would that code look?

Answer 1

a 3 floated div solution in a wrapper is usually what would be used.
<div>
<div id="d1">left</div>
<div id="d2">right</div>
<div id="d3">center</div>
</div>
#d1 {
float: left;
border: 1px solid red;
}
#d2 {
float: right;
border: 1px solid blue;
}
#d3 {
margin-left: 100px;
margin-right: 100px;
border: 1px solid green;
}
see: http://jsbin.com/evagat/1/edit?html,css,output

Answer 2

set display:inline-block for all the div's
div {
display: inline-block;
width: 100%;
text-align: center;
}
div > div {
width: auto;
}
div > div:first-child {
float: left
}
div > div:last-child {
float: right
}
<div>
<div id="d1">content 1</div>
<div id="d2">content 2</div>
<div id="d3">content 3</div>
</div>

Answer 3

i believe what u want is to have a table with a bg for the row ,sadly this is not doable out-of-the-box ,instead u can do a couple of things
don't use the html table tags as they are not good for many reasons ,and browsers treats them differently (specially FF) ,so instead use the css declarations.
for each cell use the background-image: url('') along with its properties to have better control of how the image will look (specially if u r going with a responsive layout), if u dont want to give a class for each cell u can use the :nth-child(1,2,3,etc..) if u will stick with the html tags or :nth-of-type(1,2,3,etc..) if u will use a class for the 3 divs.
as a 2nd option u can use #briansol float trick but again floats are not meant for the web.