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!
Related
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 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 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'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'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
}