Force the second of two side-by-side block elements to fill the parent?
In designing a data-entry form, I'm finding it difficult to get the second column, "rightcol," in "wrapper" to fill out the remaining space. I succeeded once in getting the child elements to display properly but, using the border-bottom attri开发者_运维技巧bute, the border would extend across the entire width of wrapper.
How can I get "rightcol" to fill out the empty space to the right when the columns are side-by-side?
Below, is a mini scrubbed version of my form. Here's a jsFiddler http://jsfiddle.net/jEfQF/
<style type="text/css">
ul { margin: 0; padding: 0; }
li { list-style-type: none; list-style-position: outside; }
#row { border-bottom: solid 1px #F00; }
#wrapper { width: 100%; display: inline-block; }
#leftcol { vertical-align: top; width: 350px; float: left; margin-right: 10px; }
#rightcol { vertical-align: top; float: left; }
</style>
<ul>
<li id="row">Row 1: <input type="text"></input></li>
<li id="wrapper">
<ul id="leftcol">
<li id="row">Column A Row 1: <input type="text"></input></li>
<li id="row">Column A Row 2: <input type="text"></input></li>
</ul>
<ul id="rightcol">
<li id="row">Column B Row 1: <input type="text"></input><br />Here's another line in this row.</li>
<li id="row">Column B Row 2: <input type="text"></input></li>
<li id="row">Column B Row 3: <input type="text"></input></li>
</ul>
</ul>
<li id="row">Row 3: <input type="text"></input></li>
<li id="row">Row 4: <input type="text"></input></li>
<li id="row">Row 5: <input type="text"></input></li>
</ul>
You can do this by removing the float from the right column and giving it a left margin equal to the width of the left column.
<style type="text/css">
ul { margin: 0; padding: 0; }
li { list-style-type: none; list-style-position: outside; }
#row { border-bottom: solid 1px #F00; }
#wrapper { width: 100%; display: inline-block; }
#leftcol { vertical-align: top; width: 350px; float: left; margin-right: 10px; }
#rightcol { margin-left: 350px; vertical-align: top; }
</style>
精彩评论