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
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 read a few comments and added an image, because I was not clear, sorry and thanks for your help!
I wanted to make a website with a rectangular border containing all the information, but this container should have the border opened on top and on the bottom. I have an image as a background, so I cannot make a simple div to hide some parts of the container. Of course this container should be responsive.
I thought it would be easy but I'm working all around this problem and cannot make it work.
Thanks in advance!
I want to make this: https://ibb.co/dmwP8PM
Please make changes on this test:
https://codepen.io/soporo123/pen/WNNxLmX
<style type="text/css">
body{
background: url(https://www.gohawaii.com/sites/default/files/styles/image_gallery_bg_xl/public/hero-unit-images/11500_mauibeaches.jpg?itok=I2TvGlCa) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #FFF;
text-align: center;
}
.container{
width: 94%;
padding: 3em;
margin: 3%;
border: 5px solid #FFF;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
position: relative;
}
.logo{
position: absolute;
top: -15px;
left: 0;
right: 0;
margin: auto;
}
.logo2{
position: absolute;
bottom: -15px;
left: 0;
right: 0;
margin: auto;
}
</style>
<body>
<div class="container">
<div class="logo">LOGO</div>
<h1 class="title">Lorem ipsum</h1>
<div class="text">
<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.</p>
<p>Lorem ipsum dolor sit amet, cons ectetuer 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, 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.</p>
<p>Lorem ipsum dolor sit amet, cons ectetuer 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 class="logo2">LOGO 2</div>
</div>
</body>
border-left and border-right should get you there.
body{
background: url(https://www.gohawaii.com/sites/default/files/styles/image_gallery_bg_xl/public/hero-unit-images/11500_mauibeaches.jpg?itok=I2TvGlCa) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #FFF;
text-align: center;
}
.container{
width: 94%;
padding: 3em;
margin: 3%;
/***************************/
/* Change Here */
/***************************/
border-left: 5px solid #FFF;
border-right: 5px solid #FFF;
/**** END CHANGE ************/
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
position: relative;
}
.logo{
position: absolute;
top: -15px;
left: 0;
right: 0;
margin: auto;
}
.logo2{
position: absolute;
bottom: -15px;
left: 0;
right: 0;
margin: auto;
}
<div class="container">
<div class="logo">LOGO</div>
<h1 class="title">Lorem ipsum</h1>
<div class="text">
<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.</p>
<p>Lorem ipsum dolor sit amet, cons ectetuer 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, 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.</p>
<p>Lorem ipsum dolor sit amet, cons ectetuer 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 class="logo2">LOGO 2</div>
</div>
Alternatively you could use border-style: solid none
body {
background: url(https://www.gohawaii.com/sites/default/files/styles/image_gallery_bg_xl/public/hero-unit-images/11500_mauibeaches.jpg?itok=I2TvGlCa) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #FFF;
text-align: center;
}
.container {
width: 94%;
padding: 3em;
margin: 3%;
border: 5px solid #FFF;
/** ONE LINE CHANGE BELOW **/
border-style: solid none;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
position: relative;
}
.logo {
position: absolute;
top: -15px;
left: 0;
right: 0;
margin: auto;
}
.logo2 {
position: absolute;
bottom: -15px;
left: 0;
right: 0;
margin: auto;
}
<div class="container">
<div class="logo">LOGO</div>
<h1 class="title">Lorem ipsum</h1>
<div class="text">
<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.</p>
<p>Lorem ipsum dolor sit amet, cons ectetuer 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, 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.</p>
<p>Lorem ipsum dolor sit amet, cons ectetuer 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 class="logo2">LOGO 2</div>
</div>
You may use a gradient to draw partially the top and bottom borders to give room to the logos:
background:
linear-gradient(to left, white 40%, transparent 40%, transparent 60%, white 60%) top no-repeat,
linear-gradient(to left, white 40%, transparent 40%, transparent 60%, white 60%) bottom no-repeat;
background-size: 100% 5px;
your pen forked : https://codepen.io/gc-nomade/pen/xxxOMwK
If I'm understanding your question correctly
.container{
border-top:0;
border-bottom:0;
}
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
I'm trying to rebuild our website's layout and I found this great article on the holy grail of div+css layouts. I was able to successfully recreate the layout on my own site. I did run into one problem and that is what I need help fixing now.
Is it possible to modify this css below to cause the center div to fill all the way to the right edge of the container when the right div contains no markup? I have some pages that have right side content and some do not.
Here is the code from http://www.alistapart.com/d/holygrail/example_3.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>The Holy Grail of Layouts: Example #3: A List Apart</title>
<style type="text/css">
/*
The Essential Code
*/
body {
min-width: 630px; /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -100%;
}
#footer {
clear: both;
}
/*
IE Fix
*/
* html #left {
left: 150px; /* RC fullwidth */
}
/*
Equal-height Columns
*/
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em; /* X + padding-bottom */
margin-bottom: -1000em; /* X */
}
/*
Footer Fix
*/
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #FFF; /*
Same as body background
*/
}
/*
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 {
background: #66F;
}
#center {
background: #DDD;
}
#right {
background: #F66;
}
#container .column {
padding-top: 1em;
text-align: justify;
}
</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>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>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>
<div id="footer-wrapper">
<div id="footer">This is the footer.</div>
</div>
</body>
</html>
Update
I tried the javascript suggested and it did not improve the layout. This was executing on .Ready().
if ($('#right').html() == "") {
$('#center').width('100%');
$('#right').width(0);
}
You'll need to use JavaScript to accomplish this.
Your JavaScript onload code should look like this:
Check to see whether the right div has any content in it
If not, set the right div's width to 0 and the center div's width to its starting with + the right div's starting width.
if (document.getElementById("rightDiv").innerHTML == "")
{
document.getElementById("centerDiv").style.width = '500px'; // change 500 to whatever the center width + right width would be, or you can calculate this dynamically if necessary
document.getElementById("rightDiv").style.width = '0px;' // or set it to display: none, perhaps
}