Align 2 divs on either side of a parent div - css

Question

I've got the below div structure
<div id="news">
<div id="innerNews">
<div id="newsLeft" style="width:10%; height:100%"></div>
<img id="newsThumb" src="nwes.png" width="80%" />
<div id="newsRight" style="width:10%; height:100%"></div>
</div>
</div>
#news{
width:30%;
position: relative;
}
#innerNews{
position: absolute;
width: 100%;
height: 100%;
}
How can I get #newsLeft to be aligned to the left and #newsRight to be aligned to the right of #news?

Answer 1

CSS Table
Because of your structure I'd recommend to use display: table; thereby you'll get equal column height. Also depending on what you are trying to do you can substitute middle column by another div and set a background to it, so you would be able to place some content in it.
#news {
display: table;
height: 150px;
}
#innerNews {
display: table-row;
}
#newsLeft, #newsThumb, #newsRight {
display: table-cell;
}
#newsLeft, #newsRight {
background-color: firebrick;
width: 11%
}
<div id="news">
<div id="innerNews">
<div id="newsLeft"></div>
<img id="newsThumb" src="http://placehold.it/350x150" />
<div id="newsRight"></div>
</div>
</div>
Floating
Another way to do that is using float: left;. There is no point to use float: right; on the third div because you have total width of three blocks equal 100%: [10%][80%][10%].
#innerNews {
height: 150px;
width: 400px;
}
#newsLeft, #newsThumb, #newsRight {
float: left;
}
#newsThumb{
width: 80%;
height: 100%;
}
#newsLeft, #newsRight {
background-color: firebrick;
width: 10%;
height: 100%;
}
<div id="news">
<div id="innerNews">
<div id="newsLeft"></div>
<img id="newsThumb" src="http://placehold.it/350x150" />
<div id="newsRight"></div>
</div>
</div>
You can remove width from ##innerNews to achieve certain effect, but again - it depends on what you want.
Position
If you'd like to stick with position
#innerNews {
height: 150px;
width: 400px;
position: relative;
}
#newsLeft, #newsThumb, #newsRight {
position: absolute;
top: 0;
}
#newsLeft {left: 0;}
#newsThumb {left: 10%;}
#newsRight {left: 90%;}
#newsThumb{
width: 80%;
height: 100%;
}
#newsLeft, #newsRight {
background-color: firebrick;
width: 10%;
height: 100%;
}
<div id="news">
<div id="innerNews">
<div id="newsLeft"></div>
<img id="newsThumb" src="http://placehold.it/350x150" />
<div id="newsRight"></div>
</div>
</div>

Answer 2

You can use the css float, like
#newsLeft {
float: left;
}
#newsRight {
float: right;
}

Answer 3

Here is how you can do it. Use position attribute as required.
#news{
width:50%;
height:200px;
position: relative;
background:#ccc;
margin-left:100px;
display:inline-block;
}
#innerNews{
position: absolute;
width: 100%;
height: 100%;
}
#newsLeft
{
position:absolute;
height:200px;
width:200px;
left:-30px;
background:#444;
display:inline-block;
width:30%; height:100%
}
#newsRight
{
position:absolute;
height:200px;
width:200px;
left:230px;
background:#444;
display:inline-block;
width:30%; height:100%
}
<div id="news">
<div id="innerNews">
<div id="newsLeft" >newsleft</div>
<img id="newsThumb" src="nwes.png" width="80%" />
<div id="newsRight" >newsright</div>
</div>
</div>