asked on

Horizontally aligned element container in HTML

Hi Experts,

I want to realize HBOX component of FLex in HTML with the Help of CSS and javascript.

HBOX component of Flex keeps all the innner components placed one after another horizontally and if the total width of the inner components exceeds HBOX then a scroll appears but in any case it will not put child elements vertically one after another.

If you want to see how HBOX looks then please follow the link below

http://examples.adobe.com/flex3/componentexplorer/explorer.html

and in navigate through Navigation panel as mentioned below

Visual Components --> Containers --> HBOX

I hope there would be solution for this question

thanks In advanse

BobTheViolent

If I understand your question, you may want to try a simple CSS nowrap command in a div or table as in the examples.

<div style="white-space:nowrap;">
 
 (Put buttons links and text in here)
 
</div>
 
<table style="white-space:nowrap;">
 <tr>
  <td>
 
  (Put buttons links and text in here)
 
  </td>
 </tr>
</table>

Open in new window

Techfunda248

ASKER

Thanks BobTheViolent for you quick response, but I am sorry to say it could not provide any help.

Actually I want to have something like TABLE ROW effect. Where you goon adding elements ("<td>") and they placed in a line.Please note that, I want HTML ELEMENTS ( and notjust text) to be wrapped in a line.

Hope that it will clear what i am looking for. Thanks!

ASKER CERTIFIED SOLUTION

BobTheViolent

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Techfunda248

ASKER

BobTheViolent: I think this is the only possible way left. Actually I wanted to use DIV & CSS only and not table to make something like this. But it seems that is the only way left out.
Anyways, Thanks a lot for you kind help. And more Importantly I am going to accept your solution right now, but if by any chance you get hit by some idea to do it with DIV and CSS then do let me know.

BobTheViolent

Techfunda248,

Thank you for the points. I messed around with it a little more and you actually CAN eliminate tables and go only DIV / CSS but it looks a slightly different, see what you think about this.

<html>
<body>
<div style="border: 1px solid black; width: 75%; height: 100px; overflow: auto; padding:10;white-space:nowrap"
<label style="color:blue;font-family:arial;font-size:12">An HBox clone example horizontally aligned</label><br><br>
<INPUT type="button" value="Refresh" onClick="window.location.reload()">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<input type="button" value="test button">
<select name="test">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
</body>
</html>

Open in new window