Menu
Given the following html:
<body>
<div style="float: left; background: red">Hi</div>
<div style="float: left; background: blue">Hi again</div>
</body>
I want the 2nd div to take the remainder of the width off the page. Setting width 100% will make it wrap to the next line, and I don't know what else to set to fix it. The left column needs to be sized according to its content, while the right takes the reminding horizontal space.
I know I can do this with tables, but in the actual application, this causes other problems in IE6. In the application the left column is a tree, while the rest is the main view. The tree can be collapsed. In addition there are popup divs using Dojo. When a popup div is showed and moved, the right column (in table form) expands to overlap the left column in IE6. Yeah, this is a bug in IE, so I am trying to find an alternative layout to fix this issue. It works with divs, but now the main view doesn't expand to fill the screen in other browsers.
Here is a better broken version. I need to fix it so that table doesn't extend the page width and adds a horizontal scroll for this:
<div style="float: left; background: red; padding: 5px; margin: 5px;">Hi</div>
<div style="background: blue">
<table width="100%"><tr><td bgcolor="green">
Hi again
</td></tr></table>
</div>
793
This sounds precisely like the sort of problem flexbox is able to fix. Below I'm using standard flexbox syntax, but some legacy browsers may require prefixes in order to function properly.
<div class="columns">
<div class="column">
<p>Hello, World.</p>
</div>
<div class="column">
<p>Content Area</p>
</div>
</div>
.columns {
display: flex;
}
.column:nth-of-type(2) {
flex: 1;
}
This gives you the results you are looking for: one column that grows with its content, and another that simply takes up the remaining space. One suggestion here would be to apply a min-width value to the flexed column to prevent it from getting too small.
Demo: http://codepen.io/anon/pen/LglvH
186
Try this:
<body>
<div style="float: left; background: red; width: 200px; ">Hi</div>
<div style="background: blue; margin-left: 210px; ">Hi again</div>
</body>
This way your right div will take up the remainder of the space. But you will have to watch out for clearing.
20
In this solution, we have an auto-filling #left element which will fit #container. #right will be absolutely positioned over #left such that it always at the top right of #container. Furthermore, we have padding-right: Xpx; on the #left container so that its content never slips underneath #right.
#container {
position: relative; /* used to make the #right element absolutely position relative to #container */
}
#right {
width: 100px; /* define width */
position: absolute;
right: 0px;
top: 0px;
}
#left {
padding-right: 100px; /* match defined width */
}
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
