I’m writing a Chrome extension and I’m specifically concerned about the HTML layout in one of my pages. So far I have something very simple. I have a table that is dynamically altered in javascript and it needs to stay on the left. I also have a DIV which will be the container for a whole set of other controls, like edit fields and buttons. I want this main DIV to appear to the right of the table.
Everything I’ve tried so far has failed to get that DIV to the right of my table. As it currently stands, my DIV is below the table. I’ve heard that using float works, but this seems hacky and has a funny side effects. Maybe I don’t really understand HTML layouts yet, even though I’ve read about them. I wish it worked more like Winforms where I could just tell something where to go. In any case, if someone could help educate me as to the best and cleanest method of achieving my desired layout, I’d appreciate it. My code is below:
<body>
<div id="logged_in">
<table id="contact_table">
<tr>
<th>Contact Name</th>
<th>Phone Number</th>
</tr>
</table>
<div id="interface">
<p>Here are instructions.</p>
</div>
</div>
</body>
Note that in the above code, the DIV with the id ‘interface’ should be on the right of the table with id ‘contact_table’.
Using a float is exactly what you should do here.
You’ll probably also need this:
right before your
</body>tag.