I am new to the world of coding as well as CSS and am attempting to create a page that has 2 columns and multiple rows akin to a table however am unsure if this is the correct way to achieve the result.
NOTES
I am using an internal stylesheet before I copy it across to an external stylesheet.
I have simply named the columns leftnav and leftnav1 and content and content1. I know these names are not ideal however I am trying to ascertain the best way to code the page rather than worry about naming conventions at the moment.
CODE
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, verdana, sans-serif;
font-size: 0.8em;
}
#backdrop {
background-color: #000000;
width: 100%;
height: 10px;
}
#wrapper {
/* background-color: gray; */
width: 960px;
margin: 0px auto;
margin-top: 100px;
}
#logo {
float: left;
background-color: #E0EEEE;
margin-bottom: 10px;
}
#topnav {
float: right;
margin-right: 180px;
margin-bottom: 10px;
/* background-color: #C1CDCD; */
}
#topnav ul {
word-spacing: 5px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#innerwrapper {
clear: both;
width: 800px;
margin: 0px auto;
}
#header {
background-color: #000000;
width: 700px;
height: 200px;
}
#innerhead {
color: #ffffff;
padding: 50px;
}
#leftnav {
float: left;
/* background-color: #838B8B; */
margin-top: 10px;
width: 200px;
}
#content {
float: left;
/* background-color: #CDC9A5; */
margin-top: 10px;
width: 500px;
}
#leftnav1 {
float: left;
/* background-color: #838B8B; */
margin-top: 10px;
width: 200px;
}
#content1 {
float: left;
/* background-color: #CDC9A5; */
margin-top: 10px;
width: 500px;
}
</style>
</head>
<body>
<div id="backdrop"></div>
<div id="wrapper">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="innerwrapper">
<div id="header">
<div id="innerhead">
Sample text
</div>
</div>
<div id="leftnav">About</div>
<div id="content">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div id="leftnav1">About</div>
<div id="content1">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div>
</body>
</html>
For dividing your page up into columns, you'd be best to invest some time learning grid CSS frameworks such as 960, Blueprint or OOCSS.
Once you have your page (or parts of your page, if desired) divided up into the required number of columns, you can divide each column up into either fixed-height or variable-height rows.
While it's noble that you want to work this out yourself, I would suggest that as you are "new to the world of coding", you might actually benefit more from looking at existing examples and solutions to this known design problem and adopting a best-practice approach from the outset.
EDIT
Ok, so given we're sticking with what we've got, let's look at a way to clean the styles up.
You're declaring the exact same styles in two places: Leftnav and Leftnav1 would be better changed to:
.leftnav { float: left; margin-top: 10px; width: 200px; }
You can then apply that class to both left nav containers. The same goes for your content and content1 styles.
To answer your original question, "is this the correct way to do it", I would say, "strictly speaking, no it's not. But it is one way to do it.
A better approach might be to use the following:
<body>
<div id="backdrop"></div>
<div id="wrapper">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="innerwrapper">
<div id="header">
<div id="innerhead">
Sample text
</div>
</div>
<div class="leftCol col300">About</div>
<div class="main">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div class="leftCol col300">About</div>
<div class="main">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div>
</body>
Your three required styles then become:
.leftCol { float: left; }
.col300 { width: 300px; }
.main { overflow: hidden; }
Related
Had this working fine but then it's recently broke. At 1500px the column system turns into a single 100% width column but for some reason the text goes off the screen at around 700px and I don't understand why. The text at the bottom works fine and the navbar works fine too but for somreason the text breaks.
URL: liammacalister.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="homeStyle.css">
<title>Liam Macalister - Home</title>
</head>
<div class="header">
<h1>Liam Macalister - Portfolio</h1>
</div>
<ul class="topnav">
<li>Home</li>
<li>About Me</li>
<li>Unity</li>
<li>Unreal</li>
<li>CV</li>
<li>Contact</li>
</ul>
<div class="row">
<div class="column">
<h2>Left Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit.
Ut fringilla luctus tortor, in tempus sapien euismod vitae. Donec suscipit sagittis malesuada.
Ut non diam vitae tellus ultricies molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Pellentesque ac ante sollicitudin neque commodo euismod eu vel urna.
Nullam molestie nulla lorem, quis congue leo egestas sit amet.
Vivamus at aliquam justo. Suspendisse dictum, massa eu commodo cursus, lorem lacus fermentum arcu,
quis mattis est felis quis neque. Mauris vitae urna tempor, mattis elit et, lobortis dui.
Donec faucibus faucibus dolor, eu varius velit egestas vitae. Proin ac tincidunt nulla, vel imperdiet nibh.
Vivamus et tellus turpis. Quisque ac ultrices nisl, a ullamcorper velit. Duis scelerisque consequat lacus,
sit amet vulputate lorem rhoncus ac. Suspendisse luctus quam at tincidunt varius.
Sed quis est sed odio consequat gravida. Phasellus convallis erat sed turpis interdum, eu facilisis ipsum aliquet.
Sed semper purus nec purus elementum volutpat. Curabitur iaculis tristique hendrerit.
Aenean ullamcorper enim gravida odio maximus, et tincidunt leo varius. Donec porta sapien ac risus elementum eleifend.
Suspendisse potenti. In hac habitasse platea dictumst. Etiam mi est, suscipit vel nunc sit amet, laoreet molestie risus.
Praesent placerat dolor libero, imperdiet porta libero imperdiet ultricies. Nulla tincidunt nunc augue,
a dignissim purus porta in. Donec eget ligula dictum magna bibendum volutpat eu id diam. Praesent semper sem neque.
Vivamus in dolor libero.
Aliquam tempus viverra est, ac feugiat ligula sagittis a. In hac habitasse platea dictumst. Integer nec enim leo.
Fusce hendrerit erat enim. Nam vehicula augue non augue consequat, sit amet rhoncus est maximus. Quisque sit amet nunc nisi.
Vivamus consequat dictum lorem sit amet vehicula. Nam aliquet pellentesque lacus, non iaculis nisi pretium at.
Aliquam ornare facilisis rhoncus. Donec sit amet sem quis nulla vulputate hendrerit ultrices in nunc.
Quisque at molestie lectus. Aenean elementum vehicula nulla, id fermentum lorem mollis quis. Ut ac risus aliquet,
pulvinar nunc eu, convallis nulla. Vivamus molestie mattis mi, vitae pellentesque dolor accumsan non.
Vestibulum in tempor urna. Mauris eu dignissim quam, in congue turpis. Sed dolor ligula, pulvinar in tortor quis,
vehicula auctor mauris. In posuere nibh neque, quis tincidunt felis maximus ut.
In laoreet nunc quis sapien convallis dictum. Mauris ex neque, lobortis et metus vitae, sodales tristique lacus.
Cras eget blandit elit. Aenean vestibulum lectus at quam commodo posuere. Donec eu elit posuere, tempus turpis eget,
placerat sem. Nam augue nisl, ultricies quis felis et, dictum gravida odio.
</p>
</div>
<div class="column">
<img class="imgMe" src="Me.jpg" alt="Me">
</div>
<div class="column">
<h2>Right Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit.
Ut fringilla luctus tortor, in tempus sapien euismod vitae. Donec suscipit sagittis malesuada.
Ut non diam vitae tellus ultricies molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Pellentesque ac ante sollicitudin neque commodo euismod eu vel urna.
Nullam molestie nulla lorem, quis congue leo egestas sit amet.
Vivamus at aliquam justo. Suspendisse dictum, massa eu commodo cursus, lorem lacus fermentum arcu,
quis mattis est felis quis neque. Mauris vitae urna tempor, mattis elit et, lobortis dui.
Donec faucibus faucibus dolor, eu varius velit egestas vitae. Proin ac tincidunt nulla, vel imperdiet nibh.
Vivamus et tellus turpis. Quisque ac ultrices nisl, a ullamcorper velit. Duis scelerisque consequat lacus,
sit amet vulputate lorem rhoncus ac. Suspendisse luctus quam at tincidunt varius.
Sed quis est sed odio consequat gravida. Phasellus convallis erat sed turpis interdum, eu facilisis ipsum aliquet.
Sed semper purus nec purus elementum volutpat. Curabitur iaculis tristique hendrerit.
Aenean ullamcorper enim gravida odio maximus, et tincidunt leo varius. Donec porta sapien ac risus elementum eleifend.
Suspendisse potenti. In hac habitasse platea dictumst. Etiam mi est, suscipit vel nunc sit amet, laoreet molestie risus.
Praesent placerat dolor libero, imperdiet porta libero imperdiet ultricies. Nulla tincidunt nunc augue,
a dignissim purus porta in. Donec eget ligula dictum magna bibendum volutpat eu id diam. Praesent semper sem neque.
Vivamus in dolor libero.
Aliquam tempus viverra est, ac feugiat ligula sagittis a. In hac habitasse platea dictumst. Integer nec enim leo.
Fusce hendrerit erat enim. Nam vehicula augue non augue consequat, sit amet rhoncus est maximus. Quisque sit amet nunc nisi.
Vivamus consequat dictum lorem sit amet vehicula. Nam aliquet pellentesque lacus, non iaculis nisi pretium at.
Aliquam ornare facilisis rhoncus. Donec sit amet sem quis nulla vulputate hendrerit ultrices in nunc.
Quisque at molestie lectus. Aenean elementum vehicula nulla, id fermentum lorem mollis quis. Ut ac risus aliquet,
pulvinar nunc eu, convallis nulla. Vivamus molestie mattis mi, vitae pellentesque dolor accumsan non.
Vestibulum in tempor urna. Mauris eu dignissim quam, in congue turpis. Sed dolor ligula, pulvinar in tortor quis,
vehicula auctor mauris. In posuere nibh neque, quis tincidunt felis maximus ut.
In laoreet nunc quis sapien convallis dictum. Mauris ex neque, lobortis et metus vitae, sodales tristique lacus.
Cras eget blandit elit. Aenean vestibulum lectus at quam commodo posuere. Donec eu elit posuere, tempus turpis eget,
placerat sem. Nam augue nisl, ultricies quis felis et, dictum gravida odio.
</p>
</div>
</div>
<div id ="aboutContent" class="aboutContent">
<h2> Second Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit.
Ut fringilla luctus tortor, in tempus sapien euismod vitae. Donec suscipit sagittis malesuada.
Ut non diam vitae tellus ultricies molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Pellentesque ac ante sollicitudin neque commodo euismod eu vel urna.
Nullam molestie nulla lorem, quis congue leo egestas sit amet.
Vivamus at aliquam justo. Suspendisse dictum, massa eu commodo cursus, lorem lacus fermentum arcu,
quis mattis est felis quis neque. Mauris vitae urna tempor, mattis elit et, lobortis dui.
Donec faucibus faucibus dolor, eu varius velit egestas vitae. Proin ac tincidunt nulla, vel imperdiet nibh.
Vivamus et tellus turpis. Quisque ac ultrices nisl, a ullamcorper velit. Duis scelerisque consequat lacus,
sit amet vulputate lorem rhoncus ac. Suspendisse luctus quam at tincidunt varius.
Sed quis est sed odio consequat gravida. Phasellus convallis erat sed turpis interdum, eu facilisis ipsum aliquet.
Sed semper purus nec purus elementum volutpat. Curabitur iaculis tristique hendrerit.
Aenean ullamcorper enim gravida odio maximus, et tincidunt leo varius. Donec porta sapien ac risus elementum eleifend.
Suspendisse potenti. In hac habitasse platea dictumst. Etiam mi est, suscipit vel nunc sit amet, laoreet molestie risus.
Praesent placerat dolor libero, imperdiet porta libero imperdiet ultricies. Nulla tincidunt nunc augue,
a dignissim purus porta in. Donec eget ligula dictum magna bibendum volutpat eu id diam. Praesent semper sem neque.
Vivamus in dolor libero.
Aliquam tempus viverra est, ac feugiat ligula sagittis a. In hac habitasse platea dictumst. Integer nec enim leo.
Fusce hendrerit erat enim. Nam vehicula augue non augue consequat, sit amet rhoncus est maximus. Quisque sit amet nunc nisi.
Vivamus consequat dictum lorem sit amet vehicula. Nam aliquet pellentesque lacus, non iaculis nisi pretium at.
Aliquam ornare facilisis rhoncus. Donec sit amet sem quis nulla vulputate hendrerit ultrices in nunc.
Quisque at molestie lectus. Aenean elementum vehicula nulla, id fermentum lorem mollis quis. Ut ac risus aliquet,
pulvinar nunc eu, convallis nulla. Vivamus molestie mattis mi, vitae pellentesque dolor accumsan non.
Vestibulum in tempor urna. Mauris eu dignissim quam, in congue turpis. Sed dolor ligula, pulvinar in tortor quis,
vehicula auctor mauris. In posuere nibh neque, quis tincidunt felis maximus ut.
In laoreet nunc quis sapien convallis dictum. Mauris ex neque, lobortis et metus vitae, sodales tristique lacus.
Cras eget blandit elit. Aenean vestibulum lectus at quam commodo posuere. Donec eu elit posuere, tempus turpis eget,
placerat sem. Nam augue nisl, ultricies quis felis et, dictum gravida odio.</p>
</div>
<div id ="unityContent" class="unity">
</div>
<div id ="unrealContent" class="unreal">
</div>
<div id ="cvContent" class="cv">
</div>
<div id="footer" class="footer">
<h2>Contact</h2>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
#font-face{
font-family: PermanentMarker;
src:URL('PermanentMarker.ttf') format('truetype');
}
html {
scroll-behavior: smooth;
}
body{
margin: 0;
}
.header {
font-family: PermanentMarker;
font-size: 28px;
padding: 20px;
text-align: center;
}
h2 {
font-family: PermanentMarker;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover {background-color: #111;}
ul.topnav li.right {float: right;}
.column {
float: left;
width: 33.33%;
padding: 15px;
/*font-size: 18px;*/
}
p{
font-family: Arial, Helvetica, sans-serif;
}
.row {
content:"";
display: table;
clear: both;
}
.imgMe{
padding-top: 30px;
display: block;
margin-right: auto;
margin-left: auto;
}
.aboutContent{
padding: 15px;
}
.footer {
background-color: black;
color: white;
text-align: center;
padding: 10px;
}
#media screen and (max-width: 2000px){
.column{
width: 50%;
}
}
#media screen and (max-width: 1500px){
.column{
width: 100%;
}
}
#media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;
}
.column{
width: 100%;
}
}
Any advice?
Instead of using floats and display: table I would use flex.
2 examples as intended result is not clear.
HTML:(2 rows of 2columns with 2nd row column gone right)
<div class="container">
<div class="row">
<div class="col">
<p>Text LEFT</p>
</div>
<div class="col">
<img src="liamphoto.jpg" alt="">
</div>
</div>
<div class="row-reverse">
<div class="col">
<p>Text RIGHT</p>
</div>
</div>
</div>
CSS:
.container {
padding: 0 15px;
margin: 0 auto;
max-width: 1400;
}
.row {
display: flex;
height: 100%;
}
.row-reverse {
display: flex;
flex-direction: row-reverse;
}
.col {
height: 100%;
width: 50%;
border: solid green;
}
img {
width: 100%;
height: auto;
}
#media screen and (max-width: 600px) {
.row {
display: block;
}
.col {
width: 100%;
}
}
HTML: (1 row of 3columns of equal width)
<div class="container">
<div class="row">
<div class="col">
<p>Text LEFT</p>
</div>
<div class="col">
<img src="Me.jpg" alt="">
</div>
<div class="col">
<p>Text RIGHT</p>
</div>
</div>
</div>
CSS:
add at top
* {
margin: 0;
padding: 0;
}
change:
.col {
height: 100%;
width: 33%;
}
Adapt .col widths and media queries to your needs.
BOTH HTML/BODY 100% SOLUTION
html, body { height : 100% }
This works, no doubt. Both elements will take up the full screen, perfect.
Why not use? vh-instead? Well that has to do with mobile Safari, there is a big difference between 100% taking up the visible space and 100vh taking the view height making it larger then the toolbar, not desired in my case.
There is just one big problem with this approach. If the content within the body takes up more then 100% of the visible height, like in most cases, it will overflow. This might not be a big problem, besides it feeling hacky, however it does break -webkit-sticky to not stick elements further then the body container.
MIN-HEIGHT TO THE RESCUE, NOT QUITE
So actually what we want is to say, hey HTML and BODY be at least 100%. That would solve all our problems because that's exactly what we want. Luckily there is a property for that min-height.
html, body { min-height : 100% }
If they are both at least 100% of the viewport it should work, but it doesn't.
PROPOSED SOLUTION
html {
height : 100%;
}
body {
min-height : 100%;
}
This does make the height of the body the viewport height, however all the children elements do not recognize this, for example:
HTML Source
<head>
<title>Body Height Problem</title>
</head>
<body>
<div class="fullheight-cover">
Some beautiful image with the CSS background.
</div>
<section class="content">
Some content in section A.
</section>
<section class="content">
Some content in section B.
</section>
</body>
</html>
CSS Source
html,
body {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
background: red;
}
.fullheight-cover {
min-height: 100%;
background: green;
}
(Codepen: http://codepen.io/anon/pen/pbGWBq)
If you inspect the elements you will notice that the body will now have a height, which is awesome. However you expect .fullheight-cover to fill up this space with it's height being minimal 100% as well, but this does not work.
How can I make it so that the children of the body can make use of the 100% height that flows naturally?
Check this. Im added display: flex to body, and width: 100% to .content
html,
body {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
background: red;
display: flex;
}
.content {
width: 100%;
min-height: 100%;
background: green;
}
<html>
<head>
<title>Body Height Problem</title>
</head>
<body>
<div class="content">
Some sample content.
</div>
</body>
</html>
Hey I can help you with a solution
you can fix this template with css alone, Its better to use css rather than js.
This is a sample template please go through it.
SOLUTION
The html is..
<html>
<link rel="stylesheet" href="style.css"/>
<body>
<header class="border"><h1>Header</h1></header>
<section class="sub-header border"><h2>Sub header</h2></section>
<div class="side-menu border">
<div class="menu-head"><h3>Menu heading</h3></div>
<div class="menu-items ">
<p>Menu items 1</p>
<p>Menu items 2</p>
<p>Menu items 3</p>
<p>Menu items 4</p>
</div>
</div>
<div class="main-content border">
<p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
</div>
</body>
</html>
CSS is..
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: auto;
}
.border{
border: 1px solid #000;
}
header{
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
background: #ea4242;
}
.sub-header{
text-align: center;
position: fixed;
left: 0;
top: 39px;
width: 100%;
background: #d46b6b;
}
.side-menu{
width: 240px;
position: fixed;
left: 0;
top: 68px;
height: 89%;
}
.menu-head{
width:100%;
text-align: center;
padding: 12px 0;
background: #96a2ff;
}
.menu-items{
height: 100%;
}
.menu-items p{
padding: 20px 10px;
border-bottom:1px solid #777;
}
.main-content{
height: 1900px;
width: calc(100% - 252px);
margin-left: 240px;
margin-top: 66px;
background: #fdefa9;
padding: 0 0px 0 10px;
}
Try this it will suits you the best way
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: auto;
}
.border{
border: 1px solid #000;
}
header{
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
background: #ea4242;
}
.sub-header{
text-align: center;
position: fixed;
left: 0;
top: 39px;
width: 100%;
background: #d46b6b;
}
.side-menu{
width: 240px;
position: fixed;
left: 0;
top: 68px;
height: 89%;
overflow:auto;
overflow:auto;
}
.menu-head{
width:100%;
text-align: center;
padding: 12px 0;
background: #96a2ff;
}
.menu-items{
height: 100%;
}
.menu-items p{
padding: 20px 10px;
border-bottom:1px solid #777;
}
.main-content{
height: 1900px;
width: calc(100% - 252px);
margin-left: 240px;
margin-top: 66px;
background: #fdefa9;
padding: 0 0px 0 10px;
}
<header class="border"><h1>Header</h1></header>
<section class="sub-header border"><h2>Sub header</h2></section>
<div class="side-menu border">
<div class="menu-head"><h3>Menu heading</h3></div>
<div class="menu-items ">
<p>Menu items 1</p>
<p>Menu items 2</p>
<p>Menu items 3</p>
<p>Menu items 4</p>
</div>
</div>
<div class="main-content border">
<p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
</div>
Try this
<div style="overflow: hidden;">
<div style="background: green; float: left; padding-bottom: 20000px; margin-bottom: -20000px; width: 30%">Column 1st</div>
<div style="background: red; padding-bottom: 20000px; margin-bottom: -20000px; float: left; width:70%">Column 2nd<br/>Your text text text<br/>Other text text and something other text</div>
</div>
I have a website where I need the main page and the right panel div elements to be the same height.
This is the markup I got so far :
<!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">
<head>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body, form, html {
height: 100%;
}
html
{
font-family: helvetica, Arial,sans-serif;
font-size: 13px;
margin: 0px;
padding: 0px;
background-color: #f4f4f4;
}
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -140px;
}
#header
{
background: url("Images/backgrounds/headback_50x50.jpg") repeat-x scroll center top;
width: 100%;
margin-top: 0px;
height: 50px;
background-color: #474747;
}
#header .content {
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
#header #mainMenu {
float: left;
margin-left: 50px;
margin-top: 23px;
}
#mainContent
{
background-repeat: repeat-y;
width: 1006px;
padding: 10px 20px 10px 20px;
background-color: #f4f4f4;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#mainContent #page {
width: 800px;
float: left;
background-color: #ffffff;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
#mainContent #rightPanel {
width: 196px;
overflow: visible;
float: left;
margin-left: 10px;
height: 1000px;
}
#mainContent #rightPanel #rightCon {
background-color: #ffffff;
padding: 7px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
#footer
{
background: url("Images/backgrounds/footerback_300x300.jpg") repeat-x scroll center top;
width: 100%;
margin: 0px;
height: 200px;
background-color: #3d3d3d;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">
<div class="content">
<div id="contentBody">
<div class="mainLogo"> </div>
<div id="mainMenu">
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="mainContent">
<div id="page">
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
</div>
<div id="rightPanel">
<div id="rightCon">
Right Panel
</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="push"></div>
</div>
<div id="footer">
<div class="content">
Footer
</div>
</div>
</body>
display: table-cell is a simple and reliable solution for this kind of problem. An example: http://jsfiddle.net/26MGE/
Use negative margins to set up divs with equal height;
CSS
#container {
width:960px;
margin: 0 auto;
}
#content {
float:left;
width:700px;
border-left: 260px solid #555;
}
#sidebar {
float: left;
width:260px;
margin-right: -260px;
position: relative;
}
HTML
<div id="container">
<div id="sidebar">
<p>Sidebar</p>
</div>
<div id="content">
<p>Main content</p>
</div>
</div>
This is a really effective way to achieve a same height column effect. You could also check out some other ways to achieve this, which may be better suited to your needs.
http://www.vanseodesign.com/css/equal-height-columns/
I am sure that implementing it into the code you have given should be a not so hard of a task, so I will leave it with you.
Good luck with your site!
If you're able to use jQuery, it'd be much more easier when you just need:
$("#rightCon").height($('#page').height());
FIDDLE
I'm trying to create a sidebar that rests next to the content div but it sits below the content div, it's at the right x position just not the right y.
HTML:
<body>
<div id="framediv">
<div id="headerdiv">
</div>
<div id="content" class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing velit, a pharetra sem dictum vel. Aliquam varius porta est, vitae pulvinar nunc adipiscing in. Maecenas sem eros, gravida nec blandit vel, aliquam at dui. Aliquam ante est, lacinia id laoreet ac, convallis ac magna. Maecenas rhoncus ligula vitae mauris volutpat sed dapibus lectus fringilla. Nam orci metus, molestie eu placerat sit amet, faucibus in libero. Nunc tristique, elit vitae tincidunt rutrum, odio erat blandit nibh, eu facilisis sapien dolor rhoncus risus. Ut eu velit lectus. Sed vitae nisl orci. Nulla vel nisl ante. Donec sit amet nulla eget massa euismod ultrices vitae at nisi. Donec tempor justo auctor libero dapibus viverra. Cras commodo fermentum nisi. Maecenas porttitor euismod metus lacinia sodales. Aliquam egestas ligula purus, id sollicitudin risus. Nullam vel odio et libero viverra blandit vel et dolor.
Nullam mauris dui, consequat a placerat eu, semper non mi. Nam in leo vel lorem adipiscing commodo. Duis vestibulum erat vel felis tincidunt in congue ipsum rutrum. Sed in ipsum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra nisi eget arcu malesuada at dapibus elit varius. Morbi sodales, justo fermentum lobortis elementum, orci turpis vehicula nisl, quis laoreet sapien libero a leo. Aenean ac arcu augue, vitae pellentesque ipsum. Ut nec mauris at nisl luctus tempor a sed turpis. Pellentesque in odio libero, sit amet tincidunt nisl. Duis dictum tortor vitae sem sagittis in molestie nisl interdum. Maecenas mollis adipiscing augue, eget accumsan justo ultrices a. Suspendisse scelerisque justo et nisl consectetur a varius lacus sodales. Duis accumsan iaculis nulla, non pretium metus venenatis et. Sed gravida elementum ipsum sed aliquet.
Vestibulum tincidunt pulvinar aliquet. Nullam bibendum vulputate diam quis mattis. Etiam mollis dui eu quam feugiat pharetra. Donec non tempus eros. Fusce eleifend magna eu lorem imperdiet bibendum rhoncus eget odio. Etiam adipiscing nibh sit amet augue elementum tempus. Etiam hendrerit massa a augue laoreet vitae pretium enim aliquet. Mauris malesuada lorem vitae neque pretium convallis. Sed condimentum semper ipsum, consectetur imperdiet eros interdum eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec adipiscing nisi in erat feugiat tempor. Nunc tincidunt neque non nisl tristique quis ornare elit ornare.
Praesent nec augue ligula, quis iaculis diam. Nam eget felis est, eget pellentesque lectus. Ut suscipit varius magna, ac vestibulum risus egestas ac. Quisque id sapien sed leo luctus faucibus in non leo. Integer sit amet pellentesque velit. Vivamus convallis, lacus nec tincidunt viverra, nunc velit aliquam nisi, eu pretium tellus nisl eget eros. Etiam dolor leo, feugiat vel faucibus ac, ullamcorper quis turpis. Mauris nec felis elit. Donec dignissim ullamcorper arcu. Proin tempor, dui vel malesuada viverra, lacus mauris ullamcorper lacus, eu convallis dolor justo non massa. Maecenas volutpat, leo gravida eleifend pharetra, dolor mauris tempor odio, quis facilisis tellus nisl quis sapien. Donec quam mauris, malesuada id iaculis ut, pellentesque non mauris. Nullam interdum justo id nunc tempor sed consequat quam venenatis.
Curabitur ipsum augue, posuere at adipiscing nec, rutrum in nisi. Ut mattis placerat est aliquam vulputate. Nullam faucibus, libero in facilisis auctor, lectus metus suscipit ligula, quis sollicitudin ligula erat sit amet nisi. Suspendisse et suscipit lectus. Sed fermentum porta lorem, vel congue tortor sollicitudin molestie. Nulla imperdiet purus non velit ornare vestibulum id at massa. Curabitur lorem urna, fermentum ut suscipit sed, pretium sed ante. Nullam ligula ante, aliquam at blandit ac, aliquam in velit. Cras nisl libero, iaculis at rutrum ac, mollis nec tortor. Aenean dignissim viverra molestie. Vivamus ultricies sem purus, tempor pharetra elit. Sed placerat est at turpis eleifend accumsan. Cras metus ante, imperdiet et suscipit ut, interdum eget est. In rutrum imperdiet mi in consectetur.
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
</body>
CSS:
#menudiv{
display:inline-block;
float:none;
padding-bottom:20px;
}
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:980px;
height: 100%;
margin: auto;
}
#headerdiv{
width:950px;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#content.container{
height:100%;
width: 640px;
padding-top:50;
margin-top:50;
padding-left: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#sidebar{
position:absolute
float:left;
float:right;
top:250px;
height:100%;
width: 280px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
Here #html, body you don't need the '#' in front of html. On #sidebar you have
float:left;
float:right;
... don't think you any of it since you're positioning it absolute.
JSFiddle would be helpful as well.
Wrap your content with DIV
<div id="content" class="container">
<div id="maincontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing
velit, a pharetr
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
.container#maincontent {float:left: width:75%} //75% minus paddings minus margins minus borders
.container#sidebar {float:right; width:25%} //25% minus paddings minus margins minus borders
Your question seems a bit contradictory... as does a bit of your code.
If you simply want the sidebar to fall along the right side of the content div, then you could move your sidebar div, in the code, above the content div and assign it a "float: right".
If by "but it sits below the content div" you're referring to the code as opposed to the visual layout, then you can float the content div to the left and remove float on the sidebar (or float: right).
I also noticed that in your #sidebar css you're declaring conflicting floats for both left AND right.
Include float in your container as well.
I am new to the world of coding as well as CSS and am confused by the relationships each div tag has with its predecessor or parent. For example, my code is as below. A copy of the entire code is at the bottom of this question if that should make a difference.
Now if I were to zoom into just look at the container <div id="content">, is it safe to assume and say that its child <div id="innercontent"> is only affected by <div id="content">. The same principle would hold that <div id="content"> is affected by <div id="header">. Hence my CSS box model approach would be affected by each of the preceding div elements. Is that correct?
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo"><img src="images/logo.gif" width="150" height="96" alt="logo" /></div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="innercontent">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div id="rightcol"><img src="http://htmldog.com/r/logo.gif" width="140" height="91" alt="html" /></div>
</div>
<div id="footer">footer</div>
<div>
</body>
ENTIRE CODE
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Example</title>
<base href="" />
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, verdana, sans-serif;
font-size: 0.8em;
}
#wrapper {
/* background-image: url('images/bg-inner-page.gif'); */
background-color: #808080;
height: 200px;
}
#innerwrapper {
width: 960px;
overflow: auto;
}
#header {
}
#logo {
float: left;
margin-top: 20px;
margin-left: 50px;
background-color: gray;
}
#topnav {
float: left;
margin-top: 50px;
margin-left:30px;
color: #ffffff;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#content {
clear: both;
}
#innercontent {
float: left;
margin-top: 100px;
margin-left: 225px;
margin-bottom: 20px;
width: 400px;
}
#rightcol {
float: left;
margin-top: 125px;
margin-left: 50px;
width: 200px;
}
#footer {
background-color: gray;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo"><img src="images/logo.gif" width="150" height="96" alt="logo" /></div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="innercontent">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div id="rightcol"><img src="http://htmldog.com/r/logo.gif" width="140" height="91" alt="html" /></div>
</div>
<div id="footer">footer</div>
<div>
</body>
</html>
HTML is strutured into what is known as the Document Object Model http://en.wikipedia.org/wiki/Document_Object_Model .
Child divs are affected only by its parent elements (or any grandparent further up). However, when you start floating elements around, as your example shows, you may find that elements outside of their container start to interfere.
On the screen this can cause chaos as the elements push each other around to align, however, the DOM will always remain structured, independent of any css.