nicholsseoul
New Member
I'm a newbie when it comes to CSS. I'm working with a HTML content which I would want to look like 3 columns in a single row. I've the following HTML with embedded style:\[code\]<style type="text/css"> #main { width: 100%; height: 250px; } #left-side { width: 20%; float: left; height: 100%; } #in-the-middle { width: 60%; text-align: center; display: inline-block; height: 100%; } #right-side { width: 20%; display: inline-block; height: 100%; }</style><div id="main"> <div id="left-side" align="left"> Hello left </div> <div id="in-the-middle" align="center"> Hello center </div> <div id="right-side"> Hello right </div></div>\[/code\]Looks simple, but unfortunately the "Hello right" text gets displayed at the left side of the page. I have set the display for the #right-side to be inline-block, expecting it to show up adjacent to the "Hello center" div, but it doesn't seem to take effect. Can anyone see what I'm missing here?