Two column div layout, with one taking the remainder
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 size开发者_JAVA百科d 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>
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
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.
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.
CSS
#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 */
}
HTML
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
It looks like you need a table. I think you should try to solve your issues with ie6 and tables instead.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin:0;
padding:0
}
html, body {
height:100%
}
#left {
background:red;
float:left;
height:100%;
overflow:hidden
}
#right {
background:blue;
height:100%
}
</style>
</head>
<body>
<div id="left">
<p><img src="http://www.google.be/intl/en_com/images/logo_plain.png" alt="Google" /></p>
</div>
<div id="right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit massa vel nisi suscipit tincidunt. Proin tortor massa, pellentesque eget pharetra et, rutrum eu purus. Pellentesque iaculis justo a erat ultricies sodales. Nunc eu justo felis. Nullam fermentum erat sed ligula interdum consectetur imperdiet odio sagittis. Mauris sodales magna ornare dui imperdiet pretium. Donec augue erat, suscipit at aliquet vel, sodales id lorem. Aenean id fermentum est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin hendrerit ligula a neque placerat condimentum at ornare odio. Etiam metus augue, fringilla malesuada vestibulum eget, gravida sed mauris. Pellentesque non orci eget libero placerat vehicula. Vivamus iaculis bibendum risus, ac venenatis tellus consequat convallis. Nam tristique eros quis odio commodo venenatis. Suspendisse volutpat euismod mi eu facilisis. Quisque malesuada libero quis est suscipit et cursus augue rhoncus. Pellentesque molestie convallis nibh at pretium.</p></div>
</body>
</html>
There is only a little gap between the div's in IE6.
加载中,请稍侯......
精彩评论