Simple two column html layout without using tables | html two column layout
Theresnowamuchsimplersolutionthanwhenthisquestionwasoriginallyasked,fiveyearsago.ACSSFlexboxmakesthetwocolumnlayoutoriginallyaskedforeasy.Thisisthebarebonesequivalentofthetableintheoriginalquestion:
Theres now a much simpler solution than when this question was originally asked, five years ago. A CSS Flexbox makes the two column layout originally asked for easy. This is the bare bones equivalent of the table in the original question:
<div style="display: flex"> <div>AAA</div> <div>BBB</div> </div>One of the nice things about a Flexbox is that it lets you easily specify how child elements should shrink and grow to adjust to the container size. I will expand on the above example to make the box the full width of the page, make the left column a minimum of 75px wide, and grow the right column to capture the leftover space. I will also pull the style into its own proper block, assign some background colors so that the columns are apparent, and add legacy Flex support for some older browsers.
<style type="text/css"> .flexbox { display: -ms-flex; display: -webkit-flex; display: flex; width: 100%; }...