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.
Related
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>
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>
I'm trying to create a website for my cousin who does not know a single line of code. And I barely do :D
Well I can get my head around some basic stuff.
But I can't just seem to figure out how to do this Nav-bar. The problem that I face is I'm trying to make the website responsive. As it is now the code works fine when resizing the window to a smaller size (i.e the nav-bar stacks onto itself as supposed). BUT I want the four (4) links to be centered in relation to the header.
The header, as you will see has a padding on both sides of 13%. I then want the navbar to be centered in the remaining 74%. Hopefully this make any sense, I bet you guys are way better than me at doing this.
I do not have the website hosted yet so you will have to see the code for yourself.
I've tried to add width:25%; and width:calc(100/4); But when I add width to it, it gets centered as I want it to be, but it does not fall/break onto a new row, it glides into each other.
Thanks a massive for any help!
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/index.css">
<title>Fanny Schwarz Design</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="main_img/fanny_schwarz_logo.jpg" class="logo" alt="Fanny Schwarz logo">
</div>
<div id="navigation">
<ul>
<li>
<a href="home.html">
♦<span style="font-size:2em;">home</span>♦
</a>
</li>
<li>
<a href="portfolio.html">
♦<span style="font-size:2em;">portfolio</span>♦
</a>
</li>
<li>
<a href="about.html">
♦<span style="font-size:2em;">about</span>♦
</a>
</li>
<li>
<a href="contact.html">
♦<span style="font-size:2em;">contact</span>♦
</a>
</li>
</ul>
</div>
<div id="content">
<h2>Page heading</h2>
<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>
<div id="footer">
<div>
<span style="vertical-align:middle; font-size:2em;">©</span>
<span style="font-size:1em; vertical-align:middle;">fanny schwarz 2014</span>
</div>
</div>
</div>
</body>
</html>
Here is the CSS:
body {
background-color:#F9E1F7;
font-family:monospace;
}
p {
text-align:left;
}
#container {
padding-left:13%;
padding-right:13%;
background:#F9E1F7;
margin:0 auto;
}
#header {
background:#ccc;
text-align:none;
max-height:290px;
}
.logo {
position:relative;
max-height:100%;
max-width:100%;
left:0;
}
#navigation {
width:100%;
background:#F9E1F7;
letter-spacing:2px;
}
#navigation ul {
overflow:hidden;
margin:0;
padding:0;
}
#navigation ul li {
list-style:none;
float:left;
text-align:center;
display:inline-block;
width: 25%;
}
#navigation li a {
display:block;
color:#000;
text-decoration:none;
padding:10px;
}
#content {
clear:left;
padding:20px;
}
#content h2 {
color:#000;
font-size:160%;
text-align:left;
margin:0 0 .5em;
}
#footer {
background:#F9E1F7;
text-align:center;
height:1%;
font-size:15px;
max-height:50px;
line-height:50px;
padding:20px;
}
#navigation li a:hover, #navigation li a:active {
text-decoration:underline;
}
Here are the CSS styles that were causing your problem:
#navigation ul {
overflow:hidden;
}
#navigation ul li {
float:left;
text-align:center;
width: 25%;
}
Change them to:
#navigation ul {
width:100%;
text-align:center;
margin:0 auto;
padding:0;
}
#navigation ul li {
list-style:none;
display:inline-block;
}
That should fix your problem. The reasons:
overflow:hidden will hide things that move out of your li on mobile browsers.
There's nothing wrong with float:left, except that you were trying to center the lis. You cannot do that when a float:left style is applied.
I think you meant to put text-align:center on the ul, not the li.
width:25% was causing your lis to overlap instead of breaking to the next line.
JSFIDDLE HERE.
Hope this helps!
I was happily using 3 column layout as detailed in alistapart.com. It worked perfectly unless there are hashed url. So my center column content shows perfectly for http://www.jahajee.com/CDC-Renewal-Procedure/7890/1.html but content goes missing when the url changes to http://www.jahajee.com/CDC-Renewal-Procedure/7890/1.html#24873 .
I found the CSS #container .column{padding-bottom:10010px;margin-bottom:-10000px;} to be the problem ! The said css rule is required to make all 3 column of equal height with a container defined wrapping the 3 column. When I remove this condition the content stays in the viewport but columns are of unequal height !
The relevant CSS
#container{padding-left:200px;padding-right:240px;overflow:hidden;}
#container .column{position:relative;float:left;padding-bottom:10010px;margin-bottom:-10000px;}
#centre{width:100%;padding:10px 20px;}
#left{width:180px;padding:0 10px;right:240px;margin-left:-100%;background:#dfebfd;}
#right{width:180px;padding:0 10px;margin-right:-240px;}
The content also shows up when the container overflow:hidden is removed but then the page takes full length of 10000px !
I also tried to make container display:table and the columns display:table-cell as recommended in CSS 3 Column Liquid Layout Dynamic Same Height Column but then the columns are not of equal height !
Can someone please guide which parameters can be modified.
This behavior seems to be the default behavior with this solution. See: http://jsfiddle.net/qm3z9p2q/ This is the solution from alistapart with the padding-bottom, margin-bottom solution to make the columns equal in height.
To use display:table and display:table-cell is a complete different solution. See: http://jsfiddle.net/qm3z9p2q/1/
There is a third solution with faux columns using border-color as background-color for the left and right columns. See: http://jsfiddle.net/qm3z9p2q/3/
This will only work, if the center column ever is the highest column. And it needs a clearing element after the columns, see the HTML.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Faux columns with border-color</title>
<style type="text/css">
/*** The Essential Code ***/
body {
min-width: 550px; /* 2 x LC width + RC width */
}
#container {
border-left: 200px solid #66F; /* LC width */
border-right: 150px solid #F66; /* RC width */
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#right {
width: 150px; /* RC width */
margin-right: -100%;
}
#footer {
clear: both;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
/*** Just for Looks ***/
body {
margin: 0;
padding: 0;
background: #FFF;
}
#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background: #999;
}
#left {
}
#center {
background: #DDD;
}
#right {
}
#container .column {
padding-top: 1em;
text-align: justify;
}
p#i12345 {
margin-top:50em;
}
</style>
</head>
<body>
<div id="header">This is the header.</div>
<div id="container">
<div id="center" class="column">
<h1>This is the main content.</h1>
<p>jump to ID i12345</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.</p>
<p id="i12345">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.</p>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
<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.</p>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
<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.</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="footer">This is the footer.</div>
</body>
</html>
Greetings
Axel
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