I'm trying to create a website where the first part is a video, on top of it is a navigation bar and description sentence. The second part is a div with a picture and a lorem ipsum paragraph. But the two-part is mushed together. Do you know why?
The first part is the video-container div. It contains a video, a navigation bar and some introductory words
The second part is the intro div which has an image and a paragraph side by side
<style>
html,
body {
border: 1px solid blue;
min-height:100%;
padding:0;
margin:0;}
* {
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
border: 0;
outline: 0;
margin-top: -5px;
}
.nav {
border: 1px solid red;
margin-right: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav li {
list-style-type: none;
}
.nav li a {
text-decoration: none;
font-size: 23px;
font-weight: 600;
color: #C71585;
letter-spacing: 0.03em;
}
.nav img {
width: 150px;
}
video {
width: 100%;
position: absolute;
object-fit: cover;
background-size: cover;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1;
box-sizing: content-box;
}
.video-container {
position: relative;
height: 100%;
border: 1px solid yellow;
}
.content {
border: 1px solid yellow;
position: absolute;
left: 50px;
top: 150px;
margin: 10px;
padding: 5px 20px;
font-size: 20px;
overflow: none;
}
.content h1 {
font-size: 100px;
color: #C71585;
}
#myBtn {
margin-left: 20px;
margin-top: 40px;
border: 1px solid #C71585;
font-size: 26px;
font-weight: 800;
color: #e827a0;
padding: 15px 60px;
background-color: transparent;
transition: 0.2s ease-in;
}
#myBtn:hover {
background-color: rgba(199, 21, 133);
color: white;
}
.intro {
overflow: none;
margin-top: 30px;
display: flex;
justify-content: space-around;
align-items: center;
}
.intro img {
width: 500px;
}
.intro-text {
width: 30%;
}
</style>
</head>
<body>
<div class="video-container">
<video autoplay muted loop id="video">
<source src="video.mp4" type="video/mp4">
</video>
<div class="nav">
<img src="logo.png" alt="logo">
<li>About me</li>
<li>My Portfolio</li>
<li>My resume</li>
<li>Contact me</li>
</div>
<div class="content">
<h1>Avid learner and</h1>
<h1>Constant striver</h1>
<button id="myBtn">Who am I</button>
</div>
</div>
<div class='intro'>
<img src="01.jpeg" alt="">
<div class="intro-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque ex a felis laoreet, ut bibendum sem eleifend. Quisque egestas sem sed velit molestie tincidunt. Phasellus at pellentesque odio. Phasellus sem leo, hendrerit et massa vehicula, iaculis cursus erat. Vestibulum et viverra nisi, sit amet condimentum sem. Duis gravida faucibus nisl nec pharetra. Curabitur convallis risus enim, nec semper lorem cursus varius. Quisque feugiat vitae dui non ultricies. Integer ipsum quam, dictum et quam nec, imperdiet euismod nulla. Nam bibendum sagittis orci, eget tincidunt risus luctus nec. Quisque lacus urna, tincidunt vel lobortis in, suscipit sit amet nunc. Fusce ultrices erat a nunc dignissim hendrerit. Maecenas sed pharetra quam, vitae suscipit nunc. Aenean molestie dui aliquet augue eleifend, quis congue ligula laoreet. Ut quis est pellentesque, fringilla odio ac, tincidunt nibh.
</div>
</div>
</body>
You can make use of css flex property, in your case please add
.flex-container {
display: flex;
flex-wrap: wrap;
}
under your style tags and assign this class to intro class div as <div class='intro flex-container'>, will this worked for you?
you can easily wrap the .video-container and .intro divs with a div tag and give it style display flex and make sure you add flex wrap also.
Then just give your video and intro containers width 100%
Related
I have a section which have 2 rows and each row contain two column , here is what I would like to have in :
Desktop :
On small devices
Here is html:
<section class="portfolio-section">
<div class="portfolio_top">
<div class="portfolio-video">
<img src="https://thumb.ibb.co/hctjZK/left_image.png">
</div>
<div class="portfolio-right">
<h2>Nature from air</h2>
<p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex. Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. .</p>
<button class="ask-price" type="button">Ask for price</button>
</div>
</div>
<div class="portfolio_bottom">
<div class="portfolio-left">
<h2>Nature from air</h2>
<p>Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan.</p>
<button class="ask-price" type="button">Ask for price</button>
</div>
<div class="portfolio-video">
<img src="https://thumb.ibb.co/eW6Soe/right_side.png">
</div>
</div>
</section>
Here is my css i have tried
img{
width: 100%;
}
.portfolio-section{
display: flex;
background-color: #f6f6f6;
.portfolio-left{
padding: 190px 70px;
font-size: 18px;
font-family: "ProximaNova";
color: rgb(94, 99, 114);
h2{
font-size: 48px;
font-family: "ProximaNova";
color: rgb(202, 0, 52);
font-weight: bold;
}
p {
font-size: 18px;
font-family: "ProximaNova";
color: rgb(94, 99, 114);
line-height: 2;
text-align: left;
width: 60%;
}
}
.portfolio-right{
padding: 190px 70px;
font-size: 18px;
font-family: "ProximaNova";
color: #5e6372;
/* margin: 0px 230px; */
margin-left: 272px;
h2{
font-size: 48px;
font-family: "ProximaNova";
color: rgb(202, 0, 52);
font-weight: bold;
}
p {
font-size: 18px;
font-family: "ProximaNova";
color: rgb(94, 99, 114);
line-height: 2;
text-align: left;
}
}
}
.ask-price{
width: 205px;
height: 50px;
border-radius: 300px;
border: none;
background-color: blue;
margin-top: 81px;
color: white;
}
#media (max-width: 768px){
.portfolio-section {
display: flex;
background-color: #f6f6f6;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
Here is Jsfidle: http://jsfiddle.net/ew83jpkf/1/
Unfortunatelly my solution looks ugly when I try responsiveness, I am strugling to make this section responsive.
Please can some one help? what do I need to change in my code to make it responsive?? any help will be apreciated
Thanks all
Keep it simple. On larger viewports use flex-direction to reverse the content blocks you want.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
}
.portfolio-video img {
display: inline-block;
object-fit: cover;
height: 100%;
width: 100%;
}
.portfolio-section {
background-color: #f6f6f6;
}
.text-block {
padding: 190px 70px;
font-size: 18px;
color: rgb(94, 99, 114);
}
.text-block h2 {
font-size: 48px;
font-family: "ProximaNova";
color: rgb(202, 0, 52);
font-weight: bold;
}
.text-block p {
font-size: 18px;
font-family: "ProximaNova";
color: rgb(94, 99, 114);
line-height: 2;
width: 60%;
}
.ask-price {
width: 205px;
height: 50px;
border-radius: 300px;
border: none;
background-color: blue;
margin-top: 81px;
color: white;
}
#media (min-width: 767px) {
.portfolio-section .portfolio-block {
display: flex;
}
.portfolio-block>div {
min-width: 50%;
}
.block-reverse {
flex-direction: row-reverse;
}
}
<section class="portfolio-section">
<div class="portfolio-block">
<div class="portfolio-video">
<img src="https://thumb.ibb.co/hctjZK/left_image.png">
</div>
<div class="text-block">
<h2>Nature from air</h2>
<p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex. Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. .</p>
<button class="ask-price" type="button">Ask for price</button>
</div>
</div>
<div class="portfolio-block block-reverse">
<div class="portfolio-video">
<img src="https://thumb.ibb.co/eW6Soe/right_side.png">
</div>
<div class="text-block">
<h2>Nature from air</h2>
<p>Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan.</p>
<button class="ask-price" type="button">Ask for price</button>
</div>
</div>
</section>
I'm new at this. I'm not sure what I'm doing wrong. I've tried both the absolute and relative position but I can't get the footer to go at the bottom of the page. I also don't want the fixed option. Can anyone tell what's wrong with it?
<!DOCTYPE html>
<html>
<head>
<title>after hours</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<div class="content">
<h1>as always <br> at this hour </h1>
<h1 class="maroon">time means <br> nothing</h1>
</div>
</div>
<div class="nav">
home
about
blog
portfolio
</div>
<div id="main">
<div class="about">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</div>
<div class="content">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
<div class="rectangle">
<p>This is a rectangle.</p>
</div>
<div class="rectangle">
<p>This is a rectangle too.</p>
</div>
<div class="rectangle">
<p>This a rectangle as well.</p>
</div>
</div>
</div>
<footer>
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</footer>
</body>
</html>
This is the separate CSS code. I'm not sure if the footer should be a class or it can simply be a tag.
* {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: helvetica;
line-height: 25px;
font-size: 15px;
letter-spacing: 0.5px;
}
#banner {
background: url(imgs/1.jpg);
background-size: cover;
width: 100%;
height: 660px;
position: absolute;
}
#banner .content h1 {
text-align: center;
position: absolute;
top: 54%;
left: 42.6%;
padding: 30 30 60 30;
color: #d6d6d6;
font-size: 30px;
font-family: futura;
letter-spacing: 4px;
line-height: 30px;
/*
border: 1.5px solid white;
width: 260px;
height: 80px;
*/
}
#banner .content h1.maroon {
padding-top: 70px;
color: firebrick;
}
.nav {
position: relative;
top: 660px;
background-color: black;
width: 100%;
height: 60px;
text-align: center;
padding: 20px 0px;
margin-bottom: 30px;
}
.nav a {
position: relative;
text-transform: uppercase;
text-align: center;
color: white;
font-family: roboto;
font-weight: normal;
text-decoration: none;
font-size: 13px;
letter-spacing: 5px;
padding: 22px 40px;
display: inline;
}
.nav a:hover {
color: firebrick;
}
#main {
position: relative;
margin: 0 auto;
top: 670px;
width: 80%;
padding: 20px;
}
.about {
float: right;
width: 30%;
padding: 10px;
}
.rectangle {
padding: 30px;
display: inline-block;
text-align: center;
width: 180px;
height: 200px;
}
.content {
float: left;
width: 60%;
padding: 10px;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
margin: 0 auto;
height: 300px;
}
Position everything relative, unless you really need to use absolute.
See working snippet using your code.
* {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: helvetica;
line-height: 25px;
font-size: 15px;
letter-spacing: 0.5px;
position: relative;
}
#banner {
background: url(imgs/1.jpg);
background-size: cover;
width: 100%;
height: 660px;
position: relative;
}
#banner .content h1 {
text-align: center;
position: absolute;
top: 54%;
left: 42.6%;
padding: 30 30 60 30;
color: #d6d6d6;
font-size: 30px;
font-family: futura;
letter-spacing: 4px;
line-height: 30px;
}
#banner .content h1.maroon {
position: relative;
padding-top: 70px;
color: firebrick;
}
.nav {
position: relative;
background-color: black;
width: 100%;
height: 60px;
text-align: center;
padding: 20px 0px;
margin-bottom: 30px;
clear: both;
}
.nav a {
position: relative;
text-transform: uppercase;
text-align: center;
color: white;
font-family: roboto;
font-weight: normal;
text-decoration: none;
font-size: 13px;
letter-spacing: 5px;
padding: 22px 40px;
display: inline;
}
.nav a:hover {
color: firebrick;
clear: both;
}
#main {
position: relative;
margin: 0 auto;
width: 80%;
padding: 20px;
clear: both;
}
.about {
float: right;
width: 30%;
padding: 10px;
}
.rectangle {
padding: 30px;
display: inline-block;
text-align: center;
width: 180px;
height: 200px;
}
.content {
width: 60%;
padding: 10px;
}
footer {
position: relative;
width: 100%;
padding: 30px;
margin: 0 auto;
height: 300px;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<title>after hours</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<div class="content">
<h1>as always <br> at this hour </h1>
<h1 class="maroon">time means <br> nothing</h1>
</div>
</div>
<div class="nav">
home
about
blog
portfolio
</div>
<div id="main">
<div class="about">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</div>
<div class="content">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
<div class="rectangle">
<p>This is a rectangle.</p>
</div>
<div class="rectangle">
<p>This is a rectangle too.</p>
</div>
<div class="rectangle">
<p>This a rectangle as well.</p>
</div>
</div>
</div>
<footer>
<p>Footer text in here</p>
</footer>
</body>
</html>
If all you want to do is put the div at the botton of the screen then add this to your css:
.footer{
position: absolute;
bottom: 0;
}
When you scroll the footer will also move though. If you want it to stay in the same location then make position: fixed
In your HTML you are closing </footer> instead of close </div>.
And give position: relative to the main parent div and apply
.footer {
position: absolute;
bottom: 0;
}
this will work.
remove position: relative; #main id css.
* {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: helvetica;
line-height: 25px;
font-size: 15px;
letter-spacing: 0.5px;
}
#banner {
background: url(imgs/1.jpg);
background-size: cover;
width: 100%;
height: 660px;
}
#banner .content h1 {
text-align: center;
position:relative;
top: 54%;
left: 42.6%;
padding: 30 30 60 30;
color: #d6d6d6;
font-size: 30px;
font-family: futura;
letter-spacing: 4px;
line-height: 30px;
/*
border: 1.5px solid white;
width: 260px;
height: 80px;
*/
}
#banner .content h1.maroon {
padding-top: 70px;
color: firebrick;
position:relative;
}
.nav {
top: 660px;
background-color: black;
width: 100%;
height: 60px;
text-align: center;
padding: 20px 0px;
margin-bottom: 30px;
}
.nav a {
position: relative;
text-transform: uppercase;
text-align: center;
color: white;
font-family: roboto;
font-weight: normal;
text-decoration: none;
font-size: 13px;
letter-spacing: 5px;
padding: 22px 40px;
display: inline;
}
.nav a:hover {
color: firebrick;
}
#main {
/* position: relative;*/
margin: 0 auto;
top: 670px;
width: 80%;
padding: 20px;
}
.about {
float: right;
width: 30%;
padding: 10px;
}
.rectangle {
padding: 30px;
display: inline-block;
text-align: center;
width: 180px;
height: 200px;
}
.content {
float: left;
width: 60%;
padding: 10px;
}
footer {
/* position: absolute;*/
float: left;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
margin: 0 auto;
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<title>after hours</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<div class="content">
<h1>as always <br> at this hour </h1>
<h1 class="maroon">time means <br> nothing</h1>
</div>
</div>
<div class="nav">
home
about
blog
portfolio
</div>
<div id="main">
<div class="about">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</div>
<div class="content">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
<div class="rectangle">
<p>This is a rectangle.</p>
</div>
<div class="rectangle">
<p>This is a rectangle too.</p>
</div>
<div class="rectangle">
<p>This a rectangle as well.</p>
</div>
</div>
</div>
<footer>
<p>this is footer part <br/>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</footer>
</body>
</html>
I'm starting out with CSS, so I'm afraid to edit the code I already have. Part of it is main { max-width: 60em } for the text to be centered and a sticky menu. When I try adding .container { width: 100% } to another section like body or div, it messes up my sticky menu.
How can I make just one part of the page have a full width background?
(The issue is not about centering the look of the text, but the positioning on a page.) I want the text to be within 960px while having the background at 100% width.
/* === Globals === */
html,body,div,header,footer,section,article,figure,nav,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}/*remembertodefinefocusstyles!*/:focus{outline:0;}/*remembertohighlightinsertssomehow!*/ins{text-decoration:none;}del{text-decoration:line-through;}/*tablesstillneed'cellspacing="0"'inthemarkup*/table{border-collapse:collapse;border-spacing:0;}
/* === Structure === */
.clear {
clear: both;
}
#footer {
background-color: rgba(225, 225, 225, 1.0);
bottom: 0;
color: rgba(102, 102, 102, 1.0);
height: 350px;
text-align: center;
width: 100%;
}
#footer p {
font-size: 10px;
font-weight: bold;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
}
#footer p:first-child {
padding-top: 75px;
}
.menu {
-moz-box-shadow: 0 0 0.5em 0 #000;
-webkit-box-shadow: 0 0 0.5em 0 #000;
box-shadow: 0 0 0.5em 0 #000;
background-color: rgba(170, 68, 100, 0.95);
clear: both;
display: block;
height: 40px;
margin: 0;
padding: 10px 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 99;
}
.menu ul li a,
.menu-trigger {
color: white;
float: right;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 15px;
text-decoration: none;
text-transform: uppercase;
width: 50px;
}
.menu ul li a:active {
color: #ffffff;
}
.menu ul li a:hover {
color: #aa4464;
background: #fff;
}
.menu ul li:hover ul {
display: block;
}
.menu ul ul {
display: none;
position: absolute;
top: 50px;
right: 160px;
}
.menu ul ul li {
display: block;
}
.menu ul ul li a {
background-color: rgba(170, 68, 100, 0.95);
color: white;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
text-transform: uppercase;
width: 100px;
}
.menu-trigger {
display: none;
}
main {
margin: auto;
max-width: 60em;
padding: 75px 5% 50px;
}
main h2 {
font-family: 'Exo', serif;
font-size: 36px;
font-weight: 600;
line-height: 150%;
}
main p {
font-family: 'Arial', 'Helvetica', sans-serif;
font-size: 16px;
line-height: 150%;
}
.container {
width: auto 100%;
}
.testimonial {
margin: auto;
max-width: 60em;
padding: 75px 5% 50px;
color: #fff;
}
.work ul {
display: block;
margin: auto;
max-width: 60em;
}
.work li {
float: left;
margin: 1em 1%;
padding: 1em 1%;
text-align: center;
width: 20%;
}
.work a {
color: #fff;
display: block;
position: relative;
text-decoration: none;
}
.work h3 {
color: #666666;
font-family: Arial, helvetica, sans-serif;
font-size: 16px;
left: 0;
margin-top: -8px;
position: absolute;
text-transform: uppercase;
top: 100%;
width: 100%;
}
.work img {
width: 100%;
}
/* 960 */
#media all and (min-width: 960px) {
main h1 {
font-size: 160px;
}
}
/* 600 */
#media all and (min-width: 600px) {
main h2 {
font-size: 36px;
}
main p {
font-size: 20px;
}
main h1 {
font-size: 96px;
}
}
/* 768 */
#media only screen and
(max-width: 768px){
.menu-trigger {
display: none;
}
.work li {
width: 45%;
}
}
/* 480 */
#media only screen and
(max-width: 480px){
.menu-trigger {
display: inline;
position: fixed;
}
.menu ul li a {
display: block;
width: 100%;
z-index: 96;
}
.menu ul ul {
display: none;
position: absolute;
top: 50px;
right: 160px;
}
.menu ul ul li {
display: block;
}
ul.open {
background-color: rgba(170, 68, 100, 0.95);
height: 100%;
position: fixed;
right: 0;
top: 60px;
width: 100%;
}
.work li {
padding: inherit;
width: 95%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<title>Tantalizea Lacaden</title>
<link href="styles.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="parallax-styles.css" />
<script src="jquery.js"></script>
<link href='http://fonts.googleapis.com/css?family=Exo:400,600' rel='stylesheet' type='text/css'>
</head>
<body>
<nav class="menu open">
<ul>
<li>Contact</li>
<li>About</li>
<li>Work
<ul>
<li>Illustrations</li>
<li>Photography</li>
<li>Printed Work</li>
</ul>
</li>
<li>Home</li>
</ul>
<img src="hamburger.png" width="20px" />
</nav>
<main>
<img src="http://placehold.it/960x500">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, purus in porttitor pellentesque, erat arcu tincidunt diam, dapibus faucibus leo mauris at sapien. In porttitor vehicula sodales. Vivamus massa neque, facilisis eu felis ut, aliquet convallis nisi. Nam elementum tellus vitae gravida fermentum. Nullam et imperdiet leo. Integer ut euismod lorem, in placerat lacus. Curabitur bibendum arcu ut feugiat commodo. Suspendisse ut mi vel orci ullamcorper tincidunt. Nam vitae fringilla nibh. Nullam hendrerit blandit velit eu hendrerit.</p><br />
<p>Praesent eu enim non massa pellentesque lobortis. In in sagittis dolor. Aliquam non massa erat. Ut aliquet gravida tellus, sed volutpat nibh condimentum et. Nunc quam purus, vehicula quis venenatis et, porttitor vel dolor. Cras facilisis dui id elit bibendum, in ullamcorper leo ultricies. Praesent rutrum lacus sit amet sem convallis, ut interdum dolor vestibulum</p><br />
<p>Tum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis pharetra odio, sit amet consectetur elit facilisis ac. Praesent eget tristique ipsum. Donec malesuada bibendum lacinia. Praesent non purus sodales, pulvinar mi vitae, tincidunt leo. Phasellus vitae elit ut nisl semper fringilla id rutrum dolor. Donec a massa adipiscing, cursus risus vitae, porttitor tortor. Nullam sagittis est sapien, sit amet pharetra turpis imperdiet vel. Etiam sit amet ligula pretium, vulputate eros ac, bibendum velit. Aenean convallis ante purus, ac bibendum orci laoreet ac. Donec a convallis mauris. Nulla non lacus non ipsum pretium tempor. In hac habitasse platea dictumst. Aenean at ipsum vulputate, sagittis dui ut, pharetra neque. Nam eget sodales orci. Aliquam pharetra nunc at nisl pellentesque, nec fringilla enim iaculis.</p><br />
<section class="work">
<ul align="middle">
<li>
<a href="illustration.html">
<h3>Illustration</h3>
<img src="images/illustration.jpg" alt="" />
</a>
</li>
<li>
<a href="photography.html">
<h3>Photography</h3>
<img src="images/photography.jpg" alt="" />
</a>
</li>
<li>
<a href="print.html">
<h3>Print</h3>
<img src="images/print.jpg" alt="" />
</a>
</li>
<li>
<a href="web.html">
<h3>Web</h3>
<img src="images/web.jpg" alt="" />
</a>
</li>
</ul>
<div class="clear"></div>
</section>
</main>
<div class="container"><div class="testimonial"><h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, purus in porttitor pellentesque, erat arcu tincidunt diam, dapibus faucibus leo mauris at sapien. In porttitor vehicula sodales. Vivamus massa neque, facilisis eu felis ut, aliquet convallis nisi. Nam elementum tellus vitae gravida fermentum. Nullam et imperdiet leo. Integer ut euismod lorem, in placerat lacus. Curabitur bibendum arcu ut feugiat commodo. Suspendisse ut mi vel orci ullamcorper tincidunt. Nam vitae fringilla nibh. Nullam hendrerit blandit velit eu hendrerit.</p><br /></div></div>
<footer id="footer">
<p>tantalizea#gmail.com</p>
<p>2015 © Tantalizea Lacaden. All Rights Reserved.</p>
</footer>
</body>
</html>
I tried different things with the width, so I thought of doing the opposite. The following code worked! Thanks for the help, everyone! :)
.container {
min-width: 100%;
background-color: #aa4464;
}
I am seeing something strange in both firefox and chrome when I increase
the zoom level inside these browsers, although I see nothing wrong with
my CSS.
Here is the whole story:
I have a right-floated top-level div containing three right-floated right.
The three inner divs have all box-model measurements in pixels which add
up to the width of the enclosing container. Everything looks fine when
the browser size is 100%, but when I start making the browser smaller
with CTRL+scrollwheel or CTRL+minus the rightmost margin shrinks
down too fast and eventually becomes zero, forcing my rightmost
floated inner div to fall down below the other two!
I can't make sense out of this, almost seems like some integer division
is being performed incorrectly in the browser code, but alas firefox and
chrome both display the same result.
Here is the example (just zoom out with CTRL-minus to see what I mean):
Click Here to View What I Mean on Example Site
Just to narrow things down a bit, the tags of interest are the following:
div#mainContent
div#contentLeft
div#contentCenter
div#contentRight
I've searched stackoverflow for an answer and found the following
posts which seem related to my question but was not able to apply
them to the problem I am experiencing:
http://
stackoverflow.com/questions/6955313/div-moves-incorrectly-on-browser-resize
http://
stackoverflow.com/questions/18246882/divs-move-when-resizing-page
http://
stackoverflow.com/questions/17637231/moving-an-image-when-browser-resizes
http://
stackoverflow.com/questions/5316380/how-to-stop-divs-moving-when-the-browser-is-resized
I've duplicated the html and css code below for your convenience:
Here is the HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pinco</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<a href="http://pinco.com">
<img class="logo" src="images/PincoLogo5.png" alt="Pinco" />
</a>
</div>
<div class="titolo">
<h1>Benvenuti!</h1>
<h2>Siete arrivati al sito pinco.</h2>
</div>
<nav>
<ul class="menu">
<li>Menù Qui</li>
<li>Menù Quo</li>
<li>Menù Qua</li>
</ul>
</nav>
</header>
<div id="mainContent">
<div id="contentLeft">
<section>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor turpis est, nec varius est pharetra scelerisque. Sed eu pellentesque purus, at cursus nisi. In bibendum tristique nunc eu mattis. Nulla pretium tincidunt ipsum, non imperdiet metus tincidunt ac. In et lobortis elit, nec lobortis purus. Cras ac viverra risus. Proin dapibus tortor justo, a vulputate ipsum lacinia sed. In hac habitasse platea dictumst. Phasellus sit amet malesuada velit. Fusce diam neque, cursus id dui ac, blandit vehicula tortor.
Phasellus interdum ipsum eu leo condimentum, in dignissim erat tincidunt. Ut fermentum consectetur tellus, dignissim volutpat orci suscipit ac. Praesent scelerisque urna metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pulvinar, sem a sodales eleifend, odio elit blandit risus, a dapibus ligula orci non augue. Nullam vitae cursus tortor, eget malesuada lectus. Nulla facilisi. Cras pharetra nisi sit amet orci dignissim, a eleifend odio hendrerit.
</p>
</article>
</section>
</div>
<div id="contentCenter">
<section>
<article>
<p>
Maecenas vitae purus at orci euismod pretium. Nam gravida gravida bibendum. Donec nec dolor vel magna consequat laoreet in a urna. Phasellus cursus ultrices lorem ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus purus felis, ornare quis ante vel, commodo scelerisque tortor. Integer vel facilisis mauris.
</p>
<img src="images/auto1.jpg" width="272" height="272" />
<p>
In urna purus, fringilla a urna a, ultrices convallis orci. Duis mattis sit amet leo sed luctus. Donec nec sem non nunc mattis semper quis vitae enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse dictum porta quam, vel lobortis enim bibendum et. Donec iaculis tortor id metus interdum, hendrerit tincidunt orci tempor. Sed dignissim cursus mattis.
</p>
</article>
</section>
</div>
<div id="contentRight">
<section>
<article>
<img src="images/auto2.jpg" width="272" height="272" />
<img src="images/auto3.jpg" width="272" height="272" />
<p>
Cras eu quam lobortis, sodales felis ultricies, rhoncus neque. Aenean nisi eros, blandit ac lacus sit amet, vulputate sodales mi. Nunc eget purus ultricies, aliquam quam sit amet, porttitor velit. In imperdiet justo in quam tristique, eget semper nisi pellentesque. Cras fringilla eros enim, in euismod nisl imperdiet ac.
Fusce tempor justo vitae faucibus luctus.
</p>
</article>
</section>
</div>
</div>
<footer>
<div class="footerText">
<p>
Copyright © Pinco
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Fusce ornare turpis orci, nec egestas leo feugiat ac.
<br />Morbi eget sem facilisis, laoreet erat ut, tristique odio. Proin sollicitudin quis nisi id consequat.
</p>
</div>
<div class="footerLogo">
<img class="footerLogo" src="images/auto4.jpg" width="80" height="80" />
</div>
</footer>
</div>
</body>
</html>
and here is the CSS:
/* CSS Document */
* { margin: 0; border: 0; padding: 0; }
body { background: #8B0000; /* darkred */; }
body { margin: 0; border: 0; padding: 0; }
div#wrapper { margin: 0 auto; width: 960px; height: 100%; background: #FFC0CB /* pink */; }
header { position: relative; background: #005b97; height: 140px; }
header div.logo { float: left; width: 360px; height: 140px; }
header div.logo img.logo { width: 360px; height: 140px; }
header div.titolo { float: left; padding: 12px 0 0 35px; color: black; }
header div.titolo h1 { font-size: 36px; font-weight: bold; }
header div.titolo h2 { font-size: 24px; font-style: italic; font-weight: bold; color: white;}
header nav { position: absolute; right: 0; bottom: 0; }
header ul.menu { background: black; }
header ul.menu li { display: inline-block; padding: 3px 15px; font-weight: bold; }
div#mainContent { float: left; width: 100%; /* width: 960px; *//* height: 860px; */ padding: 30px 0; text-align: justify; }
div#mainContent img { margin: 12px 0; }
div#contentLeft { height: 900px; float: left; margin-left: 12px; border: 1px solid black; padding: 15px; width: 272px; background: #ccc; }
div#contentCenter { height: 900px; float: left; margin-left: 12px; border: 1px solid transparent; padding: 15px; width: 272px; background: #E00; }
div#contentRight { height: 900px; float: left; margin-left: 12px; border: 1px solid black; padding: 15px; width: 272px; background: #ccc; }
footer { clear: both; padding: 12px; background: #306; color: white; height: 80px; font-style: italic; font-weight: bold; }
footer div.footerText { float: left; }
footer div.footerLogo { float: right; }
a { color: white; text-decoration: none; }
EDIT 1:
I've checked all measurements again and carefully plugged in numbers until they
satisfied the following equation for the three uniform columns in the main area
with uniform collapsed margin areas on all sides:
TEXT_AREA * 3 + MARGIN * 4 + BORDER * 6 = 960px (the width of the
wrapper)
TEXT_AREA = WIDTH + 2 * PADDING
BORDER = 1
subject to the margin and padding set to reasonable values of course,
and here are some numbers which seemed OK which solve these constraints:
TEXT_AREA = 290px
MARGIN = 15px
BORDER = 1px
PADDING = 15px
WIDTH = 268px
which translates to the following:
div#mainContent { float: left; width: 960px; padding: 15px 0; text-align: justify; }
div#contentLeft { height: 900px; float: left; margin: 0 0 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
div#contentCenter { height: 900px; float: left; margin: 0 0 0 15px; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; }
div#contentRight { height: 900px; float: left; margin: 0 15px 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
However even now that everything is uniform, I still get the problem that when I zoom
out the rightmost column falls down below the others. One solution is to do the following:
div#contentRight { height: 900px; float: left; margin: 0 0 /* 15px */ 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
so that now the right column has no right margin, but the visual result is the same.
Now, when I zoom out, the rightmost column does not fall down, but its right margin
is so small compared to the others, so really, there is still a small problem.
Edit 2:
OK, I've done some more searching and found an even better solution. The solution
consists in having the margins in between the div column elements the same and having
the left and right margin adjust automatically. In order to achieve this, I had to
do away with floats, and use "display: inline-block" which IMHO is much more suitable
than floats and was designed for the purpose at hand:
div#mainContent { padding: 15px 0; width: 960px; text-align: center; }
div#contentLeft { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 0/*15px*/; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
div#contentCenter { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 15px; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; }
div#contentRight { display: inline-block; vertical-align: top; height: 900px; margin: 0 0/* 15px */ 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
div#mainContent section { text-align: justify; }
Now, at a normal zoom level all left margins will be 15px plus the last element's right
margin which will also be 15px. On the other hand, if I zoom out, there is some pixel
rounding going on, but the rounding is applied more or less equally on both sides,
which is somewhat better. This works in Firefox.
Edit 3:
Alas, I've tried reducing the in-between margins a bit, which makes the problem
go away with Chrome, but one of the div elements still drops down in IE10.
div#mainContent { padding: 15px 0; text-align: center; }
div#contentLeft { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 0/* 20px increased from 15px */; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; overflow: hidden; }
div#contentCenter { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 10px/* reduced from 15px */; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; overflow: hidden; }
div#contentRight { display: inline-block; vertical-align: top; height: 900px; margin: 0 0/* 20px increased from 15px */ 0 10px/* reduced from 15px */; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; overflow: hidden; }
div#mainContent section { text-align: justify; }
Edit 4:
I've come up with a solution which works in Firefox, Chrome, and IE10.
Basically, I've created three div wrappers around the three columns
and taken measurements again ensuring all measurements are symmetric.
Here is the source code:
HTML File:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pinco</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<a href="http://pinco.com">
<img class="logo" src="images/PincoLogo5.png" alt="Pinco" />
</a>
</div>
<div class="titolo">
<h1>Benvenuti!</h1>
<h2>Siete arrivati al sito pinco.</h2>
</div>
<nav>
<ul class="menu">
<li>Menù Qui</li>
<li>Menù Quo</li>
<li>Menù Qua</li>
</ul>
</nav>
</header>
<div id="mainContent">
<div id="wrapperLeft">
<div id="contentLeft">
<section>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor turpis est, nec varius est pharetra scelerisque. Sed eu pellentesque purus, at cursus nisi. In bibendum tristique nunc eu mattis. Nulla pretium tincidunt ipsum, non imperdiet metus tincidunt ac. In et lobortis elit, nec lobortis purus. Cras ac viverra risus. Proin dapibus tortor justo, a vulputate ipsum lacinia sed. In hac habitasse platea dictumst. Phasellus sit amet malesuada velit. Fusce diam neque, cursus id dui ac, blandit vehicula tortor.
Phasellus interdum ipsum eu leo condimentum, in dignissim erat tincidunt. Ut fermentum consectetur tellus, dignissim volutpat orci suscipit ac. Praesent scelerisque urna metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pulvinar, sem a sodales eleifend, odio elit blandit risus, a dapibus ligula orci non augue. Nullam vitae cursus tortor, eget malesuada lectus. Nulla facilisi. Cras pharetra nisi sit amet orci dignissim, a eleifend odio hendrerit.
</p>
</article>
</section>
</div>
</div>
<div id="wrapperCenter">
<div id="contentCenter">
<section>
<article>
<p>
Maecenas vitae purus at orci euismod pretium. Nam gravida gravida bibendum. Donec nec dolor vel magna consequat laoreet in a urna. Phasellus cursus ultrices lorem ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus purus felis, ornare quis ante vel, commodo scelerisque tortor. Integer vel facilisis mauris.
</p>
<img src="images/auto1.jpg" alt="Auto 1" width="268" height="268" />
<p>
In urna purus, fringilla a urna a, ultrices convallis orci. Duis mattis sit amet leo sed luctus. Donec nec sem non nunc mattis semper quis vitae enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</article>
</section>
</div>
</div>
<div id="wrapperRight">
<div id="contentRight">
<section>
<article>
<img src="images/auto2.jpg" alt="Auto 2" width="268" height="268" style="margin-top: 0" />
<img src="images/auto3.jpg" alt="Auto 3" width="268" height="268" style="margin-top: 0" />
<p>
Cras eu quam lobortis, sodales felis ultricies, rhoncus neque. Aenean nisi eros, blandit ac lacus sit amet, vulputate sodales mi. Nunc eget purus ultricies, aliquam quam sit amet, porttitor velit. In imperdiet justo in quam tristique, eget semper nisi pellentesque. Cras fringilla eros enim, in euismod nisl imperdiet ac.
Fusce tempor justo vitae faucibus luctus.
</p>
</article>
</section>
</div>
</div>
</div>
<footer>
<img class="footerLogo" src="images/auto4.jpg" alt="Auto 4" width="80" height="80" />
<p class="footerText">
Copyright © Pinco Inc.
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Fusce ornare turpis orci, nec egestas leo feugiat ac.
<br />Morbi eget sem facilisis, laoreet erat ut, tristique odio. Proin sollicitudin quis nisi id consequat.
</p>
</footer>
</div>
</body>
</html>
CSS File:
/* CSS Document */
*, body, article, secton, p { margin: 0; border: 0; padding: 0; }
body { background: #8B0000; /* darkred */; }
body { margin: 0; border: 0; padding: 0; }
div#wrapper { margin: 0 auto; width: 960px; height: 100%; background: #FFC0CB /* pink */; }
header { position: relative; background: #005b97; height: 140px; }
header div.logo { float: left; width: 360px; height: 140px; }
header div.logo img.logo { width: 360px; height: 140px; }
header div.titolo { float: left; padding: 12px 0 0 35px; color: black; }
header div.titolo h1 { font-size: 36px; font-weight: bold; }
header div.titolo h2 { font-size: 24px; font-style: italic; font-weight: bold; color: white;}
header nav { position: absolute; right: 0; bottom: 0; }
header ul.menu { background: black; }
header ul.menu li { display: inline-block; padding: 3px 15px; font-weight: bold; }
div#mainContent { float: left; padding: 15px 0; height: 900px; }
#wrapperLeft { float: left; margin-left: 15px; width: 305px; }
#wrapperCenter { float: left; margin: 0 15px 0 15px; width: 290px; }
#wrapperRight { float: left; margin-right: 15px; width: 305px; }
div#contentLeft { border: 1px solid black; padding: 15px; width: 273px; height: 868px; background: #ccc; overflow: hidden; }
div#contentCenter { border: 1px solid transparent; padding: 15px; width: 258px; height: 868px; background: #E00; overflow: hidden; }
div#contentRight { border: 1px solid black; padding: 15px; width: 273px; height: 868px; background: #ccc; overflow: hidden; }
div#mainContent section { text-align: justify; }
div#mainContent img { margin: 12px 0; }
footer { clear: both; padding: 12px; background: #306; color: white; height: 80px; font-size: 12px; font-style: italic; font-weight: bold; overflow: hidden; }
footer img.footerLogo { float: right; }
a { color: white; text-decoration: none; }
This is probably caused by sub-pixel rounding.
As you zoom, your browser may calculate pixel values with fractions of pixels. As a result of rounding these values up or down, pixel-perfect layouts can break. (Different browsers handle this in different ways.)
I had decent luck converting your pixel values to percentage values.
Here are the values that worked for me:
div#contentLeft,
div#contentCenter,
div#contentRight {
margin-left: 1.1%;
padding: 1.56%;
width: 28.3%;
}
Edit:
Here's another method, which essentially centers the three boxes in div#mainContent rather than spacing them so tightly with margins. It allows them a little more room to flex when zoomed.
I removed the margin-left from div#contentLeft and added the following CSS to center the three boxes:
div#wrapper {
overflow:hidden; /* ADDED THIS TO AVOID HORIZONTAL SCROLL */
}
div#mainContent {
position: relative; /* ADDED THIS */
left: 50%; /* ADDED THIS */
float: left;
padding: 30px 0px;
text-align: justify;
}
div#contentLeft {
position: relative; /* ADDED THIS */
left: -50%; /* ADDED THIS */
background: none repeat scroll 0% 0% #CCCCCC;
border: 1px solid black;
float: left;
height: 900px;
padding: 15px;
width: 272px;
/* margin-left:12px; REMOVED THIS */
}
div#contentCenter {
position: relative; /* ADDED THIS */
left: -50%; /* ADDED THIS */
background: none repeat scroll 0% 0% #EE0000;
border: 1px solid transparent;
float: left;
height: 900px;
margin-left: 12px;
padding: 15px;
width: 272px;
}
div#contentRight {
position: relative; /* ADDED THIS */
left: -50%; /* ADDED THIS */
background: none repeat scroll 0% 0% #CCCCCC;
border: 1px solid black;
float: left;
height: 900px;
margin-left: 12px;
padding: 15px;
width: 272px;
}
The boxes remain floated on one row even when Firefox is zoomed all the way out.
How come my red border is not wrapping around my text div and my side bar div. Here's my code:
CSS:
body{
background-color: #d7d7d7;
color: #666666;
font-family: arial, sans-serif;
font-size: x-small;
}
div#header {
background-color: #323232;
height: 140px;
width: 950px;
}
div#maincontainer {
background-color: #d7d7d7;
width: 950px;
height: auto;
margin-top: 5px;
border: 1px solid red;
}
div#maintextcontainer{
//background-color: #333333;
width: 640px;
//margin-right: 10px;
margin: 1px;
float: left;
color: black;
}
div#maintextcontainer h2{
color: #4f4f4f;
}
div#sidebarcontainer {
//background-color: #333333;
width: 300px;
float: left;
color: black;
margin: 1px;
}
div#footer{
background-color: #323232;
width: 950px;
margin-top: 5px;
clear: left;
}
div#global{
width: 950px;
margin: auto;
}
HTML:
<div id="global">
<div id="header"> This is the header div</div>
<div id="maincontainer">
<div id="maintextcontainer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam neque eu turpis euismod eget suscipit nulla ultrices. Donec sagittis mi non sem vestibulum elementum dapibus risus auctor. Praesent tristique laoreet dapibus. Integer vel ligula lorem, et pharetra lorem.
</div>
<div id="sidebarcontainer">Nam at lectus vitae est tempor lacinia sed et ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent interdum mi id nisi aliquet pulvinar.
</div>
</div>
<div id="footer">This is Footer Text</div>
</div>
You need to add overflow:auto; to div#maincontainer. Floated elements will flow outside of their containing element, unless this attribute is set.
Also, a double slash (//) is not a valid commenting symbol in CSS.