I am trying to use #container (below) to control the height of the columns it contains. The way I have it coded doesn't seem to work. To help me identify what is going on I made the #container background-color red. I'm quite confused. Why is #container not red? What am I missing? The HTML and CSS files are below and complete. Any help is appreciated.
* {
box-sizing: border-box;
}
body{
width:1200px;
background-color:white;
}
p{
font-size: .7em;
font-family:helvecta;
}
#melies-header{
float:left;
width:40%;
}
#container{
width:1200px;
height:300px;
background-color:red;
overflow:auto;
}
.clear {
clear:both;
line-height:0;
}
#menu li{
padding-left:100px;
display:inline;
font-size: 1.7em;
font-family: Bleeding Cowboys;
}
#menu li:first-child{
margin-left:75px;
}
#font-face{
font-family: Bleeding Cowboys;
src: url(assets/Bleeding_Cowboys.ttf);
}
a:link{
color:purple;
text-decoration:none;
}
a:hover{
color: red;
text-decoration:none;
}
#header{
display:block;
margin: auto;
width: 60%;
}
#header-img{
float:left;
margin-left:150px;
}
#header:hover{
display:block;
margin:auto;
width:60%;
img:(url)
}
#column1{
width:300px;
height:auto;
float:left;
margin-right:30px;
margin-left:30px;
border:solid;
border-width:3px;
border-color:grey;
}
#melies-portrait{
width:300px;
}
div p {
padding:10px;
}
#column2{
width:300px;
height 600px;
float:left;
margin-right:30px;
}
#melies-2-image{
}
#column3{
width:300px;
height:600px;
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title>Archivo Melies</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="scripts.js"></script>
</head>
<body>
<div id="header">
<a href="index.html"><img id="header-img"; src="images/header-logo-950-purplelink.png"
onmouseover="this.src='images/header-logo-950-redhover.png'"
onmouseout="this.src='images/header-logo-950-purplelink.png'" />
</a>
</div>
<div>
<ul id="menu">
<li>Inicio</li>
<li>Bio</li>
<li>Filmography</li>
<li>Articles</li>
<li>Merch</li>
<li>Archive</li>
</ul>
</div>
<div id="container">
<div id="column1">
<img id="melies-portrait" src="images/george_melies.jpg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
<div id="column2">
<img id="melies-2-image" src="images/melies2.jpeg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
<div id="column3">
<p> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
</div>
</body>
</html>
On the final link, you are missing a " character after the URL.
<li><a href="about-the-archive.html>About the Archive</a></li>
Thus, all HTML from that point until the next " character is considered part of the href attribute, and not rendered on the page - it just so happens that your #container div is directly after it.
Once you fix it, your div will appear red. This was not a problem with your CSS at all!
<li>About the Archive</li>
This is not the only problem in your source code. Make sure that you always watch out for basic typos such as this one.
In most text editors (even in JSFiddle), all of the code from where you miss a character is syntax-highlighted red to let you know that you've missed something and alert you to the problem. You can also use your web browser's debug tools to look at the underlying page structure and notice this.
Please check it.
* {
box-sizing: border-box;
}
body{
width:1200px;
background-color:white;
}
p{
font-size: .7em;
font-family:helvecta;
}
#melies-header{
float:left;
width:40%;
}
#container{
width:1200px;
height:300px;
background-color:red;
overflow:auto;
}
.clear {
clear:both;
line-height:0;
}
#menu li{
padding-left:100px;
display:inline;
font-size: 1.7em;
font-family: Bleeding Cowboys;
}
#menu li:first-child{
margin-left:75px;
}
#font-face{
font-family: Bleeding Cowboys;
src: url(assets/Bleeding_Cowboys.ttf);
}
a:link{
color:purple;
text-decoration:none;
}
a:hover{
color: red;
text-decoration:none;
}
#header{
display:block;
margin: auto;
width: 60%;
}
#header-img{
float:left;
margin-left:150px;
}
#header:hover{
display:block;
margin:auto;
width:60%;
img:(url)
}
#column1{
width:300px;
height:auto;
float:left;
margin-right:30px;
margin-left:30px;
border:solid;
border-width:3px;
border-color:grey;
}
#melies-portrait{
width:300px;
}
div p {
padding:10px;
}
#column2{
width:300px;
height 600px;
float:left;
margin-right:30px;
}
#melies-2-image{
}
#column3{
width:300px;
height:600px;
float:left;
}
<div id "header">
<a href="index.html"><img id="header-img"; src="images/header-logo-950-purplelink.png"
onmouseover="this.src='images/header-logo-950-redhover.png'"
onmouseout="this.src='images/header-logo-950-purplelink.png'" />
</a>
</div>
<ul id="menu">
<li>Inicio</li>
<li>Bio</li>
<li>Filmography</a></li>
<li>Articles</a></li>
<li>Merch</li>
<li>About the Archive</li>
</ul>
</div>
<div id="container">
<div id="column1">
<img id="melies-portrait" src="images/george_melies.jpg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
<div id="column2">
<img id="melies-2-image" src="images/melies2.jpeg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
<div id="column3">
<p> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
</div>
You had some syntax errors in your html. Now this is working.
* {
box-sizing: border-box;
}
body{
width:1200px;
background-color:white;
}
p{
font-size: .7em;
font-family:helvecta;
}
#melies-header{
float:left;
width:40%;
}
#container{
width:1200px;
height:300px;
background-color:red;
overflow:auto;
}
.clear {
clear:both;
line-height:0;
}
#menu li{
padding-left:100px;
display:inline;
font-size: 1.7em;
font-family: Bleeding Cowboys;
}
<div id="header">
<a href="index.html"><img id="header-img" src="images/header-logo-950-purplelink.png" onmouseover="this.src='images/header-logo-950-redhover.png'" onmouseout="this.src='images/header-logo-950-purplelink.png'" />
</a>
</div>
<ul id="menu">
<li>Inicio</li>
<li>Bio</li>
<li>Filmography</li>
<li>Articles</li>
<li>Merch</li>
<li>About the Archive</li>
</ul>
<div id="container">
<div id="column1">
<img id="melies-portrait" src="images/george_melies.jpg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
<div id="column2">
<img id="melies-2-image" src="images/melies2.jpeg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
<div id="column3">
<p> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
</div>
Related
I would like to add a newspaper look to an HTML page to print a PDF report based on it. One issue I ran into is that I have difficulties to automatically break a text to a "new page" (that is another div (?)) when I set a defined height to the text container .newspaper. My current code uses the CSS Multi-column Layout. Here, even though I set the property column-count: 3 it adds a fourth column when it exceeds the available space.
What I would need is that the remaining text that cannot go into the third column continues in the first column again, but under the current text. Is this possible in a HTML setup?
.newspaper {
column-count: 3;
column-gap: 40px;
column-fill: auto;
height: 525px;
position: relative;
padding-top: 125px;
break-after: auto;
}
.newspaper div {
position: absolute;
top: 0;
right: 0;
height: 100px;
width: calc(66% - 10px);
}
p {
margin: 0;
padding: 0;
line-height: 25px;
text-align: justify;
}
p:first-of-type {
margin-top: -125px;
}
<h2>This is such a nice headline!</h2>
<div class="newspaper">
<div><span style="text-align: left">Fig. 1: A black box</span><svg width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" title="figure1"><rect width="450" height="50" fill="black"></rect></svg></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
Yes, you do. Wrap a .newspaper div into .main div and add specific height into that.
.main {
height: 525px;
overflow:auto;
padding: 10px;
}
.newspaper {
column-count: 3;
column-gap: 40px;
column-fill: auto;
position: relative;
padding-top: 125px;
break-after: auto;
}
.newspaper div {
position: absolute;
top: 0;
right: 0;
height: 100px;
width: calc(66% - 10px);
}
p {
margin: 0;
padding: 0;
line-height: 25px;
text-align: justify;
}
p:first-of-type {
margin-top: -125px;
}
<h2>This is such a nice headline!</h2>
<div class="main">
<div class="newspaper">
<div><span style="text-align: left">Fig. 1: A black box</span><svg width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" title="figure1"><rect width="450" height="50" fill="black"></rect></svg></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
As an alternative, you may set a column-width to keep it easily readable and use mediaqueries to help it being responsive. It will span your content from 1 to X columns depending on the width avalaible of your media screen.
here an example to play with: ( or to fork https://codepen.io/gc-nomade/pen/ZExPJWZ )
note mediaqueries are used only because of your spanning element , column-width used on its own do not require mediaquerie to be responsive. To see behavior, run the snippet in fullpage mode, then resize your browser's window.
* {
box-sizing: border-box;
}
html {
--colSize: 15em;
--colGap: 40px;
--colbound: calc(100vw - (var(--colGap) + var(--colSize) * 2));
}
.newspaper {
column-width: var(--colSize);
column-gap: var(--colGap);
position: relative;
padding-top: 100px;
break-after: auto;
}
.newspaper div {
position: absolute;
top: 0;
right: 0;
width: var(--colbound);
left: calc(var(--colSize) + var(--colGap));
min-width: var(--colSize);
height: 100px;
white-space: nowrap;
margin: auto;
overflow: hidden;
}
p {
margin: 0;
padding: 0;
line-height: 25px;
text-align: justify;
}
p:first-of-type {
margin-top: -100px;
}
#media screen and (max-width: calc( 30em + 40px + 2em)) {
.newspaper div {
position: static;
width: 100%;
}
.newspaper p:first-of-type {
margin-top: 0;
}
}
<h2>This is such a nice headline!</h2>
<div class="newspaper">
<div><span style="text-align: left">Fig. 1: A black box</span><br><svg width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" title="figure1">
<rect width="100%" height="50" fill="blue"></rect>
</svg></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
i got following HTML structure:
Demo here
<div id="wrapper">
<div id="header">
<i>Header</i>
</div>
<div id="content">
<i>Content</i>
</div>
<div id="footer">
<i>Footer</i>
</div>
</div>
#wrapper{
margin: 0;
height: 100vh;
max-height: 100vh;
/* overflow: hidden; */
display: flex;
flex-direction: column;
}
#header{
background: blue;
height: 3rem;
}
#content{
background: red;
flex-grow: 1;
}
#footer{
background: green;
height: 3rem;
}
My problem is that when the div of the content gets too large, the wrapper ignores his max-height and gets a scrollbar. What i want is that the content div instead gets the scrollbar and the wrapper holds it's height.
Demo of content to large
You have to make the wrapper overflow: hidden so scroll-bar is disabled for that div.
Next, You can add the overflow: auto to content to make it scrollable if content goes outside.
#wrapper{
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
background: red;
overflow: hidden;
}
#content{
flex-grow: 1;
overflow: auto;
}
You don't need a flexbox here, since all the elements go after each other.
In your example, you can use a max-height on the content itself, and use a overflow: scroll to prevent large text to not show up
wrapper {
margin: 0;
height: 100vh;
/* overflow: hidden; */
}
#header {
background: blue;
height: 3rem;
}
#content {
background: red;
height: calc(100vh - 6em);
overflow: scroll;
}
#footer {
background: green;
height: 3rem;
}
<div id="wrapper">
<div id="header">
<i>Header</i>
</div>
<div id="content">
<i>iquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velmperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, cos autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dign
s autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dign</i>
</div>
<div id="footer">
<i>Footer</i>
</div>
</div>
In bootstrap4 how to have a MSWORD type multicolumn text flowing
eg in word we have:
In bootstrap4 the below code will craete a two column grid
eg:
<div class="row">
<div class="col-6">
...... some text
</div>
<div class="col-6">
...... text
</div>
</div>
but here manually i have to split the text into two columns
How can this be down more automatically
No need Bootstrap for this, native CSS is enough!
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
}
h2 {
column-span: all;
}
</style>
</head>
<body>
<div class="newspaper">
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
I am not sure you need Bootstrap, instead CSS can handle this.
CSS Class:
.two-column-text {
column-count: 2;
}
HTML:
<div class="two-column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.two-column-text {
column-count: 2;
}
</style>
</head>
<body>
<div class="two-column-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Reference
I've basically created a rough template of a grid so to speak. There's the top row, which runs all the way across, the second row, which has two columns, the third row, which has two columns, and the bottom row, which runs all the way across.
Right now everything is fixed at a certain size. What I want to do is make it so that if the user resizes their window the div containers will shrink to a minimum size, and also if they expand their window set a maximum size. Any suggestions are appreciated. Below is my code. Excuse the inline CSS, I don't normally code that way.
<!DOCTYPE HTML>
<html>
<head>
<title>Test file</title>
</head>
<body>
<div id="content-container" style="width:1500px; background:white;">
<div id="top-wrapper" style="width:100%; float:left; padding-bottom:50px; padding-top:50px; background:blue;">
<div id="top-strip" style="width:100%; text-align:center;">
<div id="toDesktopRecentTabs" style="float:left; width:20%;">Test</div>
<div id="toDesktopCustomize" style="float:left; width:20%;">Test</div>
<div id="toDesktopBuildingInventory" style="float:left; width:20%;">Test</div>
<div id="toDesktopDCStandards" style="float:left; width:20%;">Test</div>
<div id="toDesktopSupportingDocs" style="float:left; width:20%;">Test</div>
</div>
</div>
<div id="row-container" style="float:left; width:100%; background:red;">
<div id="left" style="clear:left; float:left; width:45%; height:150px; padding:20px; margin:0 0 0 20px; display:inline; background:purple;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id="right" style="float:right; width:45%; height:150px; padding:20px; margin:0 20px 0 0; display:inline; background:green;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<br style="clear:both;" />
<br />
<div id="row-container" style="float:left; width:100%; background:red;">
<div id="left" style="float:left; width:45%; height:150px; padding:20px; margin:0 0 0 20px; display:inline; background:cyan;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id="right" style="float:right; width:45%; height:150px; padding:20px; margin:0 20px 0 0; display:inline; background:pink;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div id="footer" style="clear:both; background:yellow; text-align:left; padding:20px;">
Copyright © Site name, 20XX
</div>
</div>
</body>
</html>
The best way to do this is to set everything to have width in %, and use the CSS properties max-width and min-width in px.
Step 1
You already have most of your values set in %, except for your padding and margin for your content blocks. So the first thing I've done is updated those to be in % as well. Second, you have given those content blocks a fixed height, which will need to be removed to prevent text from overflowing when the block gets more narrow, so I've removed that (Also abstracted the CSS):
http://jsfiddle.net/hYtH8/
Old CSS:
.left {
float:left;
width:45%;
display:inline;
height:150px;
padding:20px;
margin:0 20px 0 0;
}
.right {
float:right;
width:45%;
display:inline;
height:150px;
padding:20px;
margin:0 0 0 20px;
}
New CSS:
.left {
float:left;
width:45%;
display:inline;
padding:2%;
margin-left:1%;
}
.right {
float:right;
width:45%;
display:inline;
padding:2%;
margin-right:1%;
}
Step 2
Now that we have done that, we can change everything to a flexible model with fixed boundaries. We change the top container to have width:100% instead of width:1500px, and then give it a max-width and min-width.
http://jsfiddle.net/hYtH8/3/
Old CSS:
#content-container {
width:1500px;
background:white;
}
New CSS:
#content-container {
width:100%;
max-width:1500px;
min-width:800px;
background:white;
}
And success!
Extra
Couple notes. I noticed that you have duplicated ids throughout. #row-container and #left, for example. CSS only allows a single instance of ids, so we should switch these to classes. Additionally, you can float both content blocks to the left since you don't have any content in the middle. This will let you save some lines of code, and get rid of .left and .right entirely:
http://jsfiddle.net/hYtH8/5/
Old CSS:
#row-container {
float:left;
width:100%;
background:red;
}
#left {
float:left;
width:45%;
display:inline;
padding:2%;
margin-left:1%;
}
#right {
float:right;
width:45%;
display:inline;
padding:2%;
margin-right:1%;
}
New CSS:
.row-container {
float:left;
width:98%;
background:red;
padding:0 1%;
}
.row-container div {
float:left;
width:46%;
display:inline;
padding:2%;
}
I've added two styles to the #content-container DIV, which are:
#content-div {
max-width:800px; //this container wont be bigger than 800px
min-width:500px; //and wont be smaller than 500px
}
DEMO
<!DOCTYPE HTML>
<html>
<head>
<title>Test file</title>
</head>
<body>
<div id="content-container" style="max-width:800px; min-width:500px; background:white;">
<div id="top-wrapper" style="width:100%; float:left; padding-bottom:50px; padding-top:50px; background:blue;">
<div id="top-strip" style="width:100%; text-align:center;">
<div id="toDesktopRecentTabs" style="float:left; width:20%;">Test</div>
<div id="toDesktopCustomize" style="float:left; width:20%;">Test</div>
<div id="toDesktopBuildingInventory" style="float:left; width:20%;">Test</div>
<div id="toDesktopDCStandards" style="float:left; width:20%;">Test</div>
<div id="toDesktopSupportingDocs" style="float:left; width:20%;">Test</div>
</div>
</div>
<div id="row-container" style="float:left; width:100%; background:red;">
<div id="left" style="clear:left; float:left; width:45%; height:150px; padding:20px; margin:0 0 0 20px; display:inline; background:purple;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id="right" style="float:right; width:45%; height:150px; padding:20px; margin:0 20px 0 0; display:inline; background:green;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<br style="clear:both;" />
<br />
<div id="row-container" style="float:left; width:100%; background:red;">
<div id="left" style="float:left; width:45%; height:150px; padding:20px; margin:0 0 0 20px; display:inline; background:cyan;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id="right" style="float:right; width:45%; height:150px; padding:20px; margin:0 20px 0 0; display:inline; background:pink;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div id="footer" style="clear:both; background:yellow; text-align:left; padding:20px;">
Copyright © Site name, 20XX
</div>
</div>
</body>
Use the CSS "min-width" and "max-width" properties. You can set it as a %, a px, or even other measurements like cm.
I am working on a JSP site.
I have 3 main concentric divs:
"container" ( contains the entire site )
"content" ( contains the content )
"results" ( inside of "content", contains a large amount of server generated data )
I set up the CSS so that when a large amount of data is deposited in the div "results" horizontal and vertical scroll bars would appear automagically.
It worked.
Until I added these tags to the top of the page to fix some other unrelated problems:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
I tried the suggestion in the second answer below, to set a height in the divs. No joy, even when I set the height with px. I need to set the height with %s, if possible.
I took a screen save of the troublesome JSP, took out all of the junk not related to the problem and put the CSS intp the head to simplify debugging the problem. In the quote below is a single HTML file you can drop into a browser and a text editor to see the issue for yourself. The pink div "results" is only supposed to be about as high as the stackoverflow edit box, with horizontal and vertical scroll bars appearing as needed.
results.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Staff Directory</title>
<style type="text/css">
body{background:white;}
#container
{
margin-left:auto;
margin-right:auto;
text-align:center;
width: 95%;
background: white;
font-family:Arial,Helvetica;
}
/* Main Content Area **********************************************************/
#content
{
clear: left;
padding: 20px;
text-align:center;
margin-left:auto;
margin-right:auto;
background:yellow;
}
#content h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
.content_center
{
display: inline-block;
}
.content_center td
{
text-align:left;
}
/* horizontal button bar */
.button_bar
{
margin-left:auto;
margin-right:auto;
margin-top: 2%;
margin-bottom: 2%;
padding-bottom: 2%;
width:100%;
height:auto;
vertical-align:top;
}
/* put a button on the far right of the above button bar */
.button_bar_right_button
{
float:right;
margin-left:1%;
vertical-align:top;
}
/* put a button on the far left of the above button bar */
.button_bar_left_button
{
float:left;
margin-left:1%;
vertical-align:top;
}
/* table field names */
#fieldLabel
{
font-weight:bold;
}
/* results.jsp ****************************************************************/
#results
{
overflow:auto;
margin-left:auto;
margin-right:auto;
height:40%;
width: 100%;
background:pink;
}
#results td
{
white-space: nowrap;
font-size:11px;
text-align:left;
}
#results th
{
white-space: nowrap;
background:silver;
}
</style>
</head>
<body>
<div id="container">
<!-- Content: Start div content: Main content area -->
<div id="content">
<h1>Div "Content" </h1>
<form id="command" name="f" action="employee" method="post">
<div id="results">
<center>
<h1>Div "Results"</h1>
</center>
<table>
<tr>
<td>
Start: A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. The End.
</td>
</tr>
</table>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh
euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh
euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh
euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh
euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div> <!--END: div id="results" -->
<div class="button_bar">
<div class="button_bar_left_button">
<input value="Request More Information" name="buttonRequestMoreInformation" type="submit">
</div>
<div class="button_bar_left_button">
<input value="Start New Search" onclick="location.href='search'" name="buttonSearch" type="button">
</div>
<div class="button_bar_right_button">
<input value="Add Member" onclick="document.formAddButton.submit();" name="buttonAddMember" type="button">
</div>
</div><!-- end div button_bar -->
</form><!-- end form 'f', main form -->
<form name="formAddButton" action="initialRequest" method="post">
<input name="NextRequest" value="Add Member" type="hidden">
</form>
</div><!-- Content: Close div id ="content" -->
</div><!-- end div container -->
</body>
</html>
Are you sure you didn't try to do as I said? I've just dumped your code in my browser, and changed
#results
{
height: 40%;
}
to
#results
{
height: 200px;
}
and the pink box behaved as I expected and you wanted.
About using % instead of px: you can't unless you set a fixed height to the container.
div {overflow-x:hidden; }
div {overflow-x:scroll; }
div {overflow-x:visible;}
div {overflow-x:auto;}
div {overflow-y:hidden; }
div {overflow-y:scroll; }
div {overflow-y:visible;}
div {overflow-y:auto;}
Well, since none of your element is attributed an HEIGHT, then, 40% of 'something' will never be applyed.
So, to solve your situation, you have to fix some height somewhere on a parent divider.
Carry on