Hi
Geek Answers Handbook

Layout of two columns, one with the rest

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 second div to remove the rest of the page width. Having set the width to 100%, it will be transferred to the next line, and I do not know what else needs to be fixed. The left column should be defined according to its contents, and the right column should be a reminder of horizontal space.

I know that I can do this using tables, but in the application itself it causes other problems in IE6. In the application, the left column is a tree, and the rest is the main column. The tree may be destroyed. In addition, there are popup divs using Dojo. When the pop-up div is displayed and moved, the right column (as a table) expands to overlap the left column in IE6. Yes, this is a bug in IE, so I'm trying to find an alternative layout to fix this problem. It works with a div, but now the main view does not expand to fill the screen in other browsers.

Here is the best broken version. I need to fix this so that the table does not expand the width of the page and add horizontal scrolling for it:

<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>
+5
source share
5

, . , ie6 .

0

, flexbox . flexbox, .

<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;
}

, : , , , . - min-width , .

: http://codepen.io/anon/pen/LglvH

+3

:

<body>
<div style="float: left; background: red; width: 200px; ">Hi</div>
<div style="background: blue; margin-left: 210px; ">Hi again</div>
</body>

, div . .

+1

In this solution, we have an autocomplete element #leftthat will match #container. #rightwill be absolutely above #leftso that it is always in the upper right corner of #container. In addition, we have padding-right: Xpx;in the container #leftso that its contents never slide under #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>
+1
source

Try the following:

<!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>

In IE6, there is only a small gap between div.

0
source

More articles:


All Articles