i have no idea how to put yellow(bottom) div exactly under the pink(left) one.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AutoDealer</title>
<style>
.container{
width: 860px;
height: 1074px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
}
.nav{
}
.wrapper{
display: block;
overflow: hidden;
border: 1px solid green;
}
.left{
width: 399px;
float: left;
background-color: pink;
}
.right{
height:350px;
width: 449px;
float: left;
overflow: hidden;
background-color: blue;
overflow: hidden;
}
.bottom{
clear: both;
width: 399px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="nav"></div>
<div class="wrapper">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies aliquet tellus sit amet ultrices. Sed faucibus, nunc vitae accumsan laoreet, enim metus varius nulla, ac ultricies felis ante venenatis justo. In hac habitasse platea dictumst. In cursus enim nec urna molestie, id mattis elit mollis. In sed eros eget nibh congue vehicula. Nunc vestibulum enim risus, sit amet suscipit dui auctor et. Morbi orci magna, accumsan at turpis a, scelerisque congue eros. Morbi non mi vel nibh varius blandit sed et urna.</p>
</div>
<div class="right">
<p>Quisque vulputate mi id turpis luctus, quis laoreet nisi vestibulum. Morbi facilisis erat vitae augue ornare convallis. Fusce sit amet magna rutrum, hendrerit purus vitae, congue justo. Nam non mi eget purus ultricies lacinia. Fusce ante nisl, efficitur venenatis urna ut, pellentesque egestas nisl. In ut faucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesque maximus. Quisque a tempus lectus.</p>
</div>
<div class="bottom">
<p>ucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesq</p></div>
</div>
</div>
</body>
</html>
clear: both is causing the div to do just that, clear both sides and force itself into a position where the blue element isn't right next to it.
Remove that and it'll be right under the one above it.
Hi please check the update code
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AutoDealer</title>
<style>
.container{
width: 860px;
height: 1074px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
}
.nav{
}
.wrapper{
display: block;
overflow: hidden;
border: 1px solid green;
}
.left{
width: 399px;
float: left;
background-color: pink;
}
.right{
height:350px;
width: 449px;
float: left;
overflow: hidden;
background-color: blue;
overflow: hidden;
}
.bottom{
width: 399px;
background-color: yellow;
}
.pull-left
{
float:left
}
</style>
</head>
<body>
<div class="container">
<div class="nav"></div>
<div class="wrapper">
<div class="pull-left">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies aliquet tellus sit amet ultrices. Sed faucibus, nunc vitae accumsan laoreet, enim metus varius nulla, ac ultricies felis ante venenatis justo. In hac habitasse platea dictumst. In cursus enim nec urna molestie, id mattis elit mollis. In sed eros eget nibh congue vehicula. Nunc vestibulum enim risus, sit amet suscipit dui auctor et. Morbi orci magna, accumsan at turpis a, scelerisque congue eros. Morbi non mi vel nibh varius blandit sed et urna.</p>
</div>
<div class="bottom">
<p>ucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesq</p>
</div>
</div>
<div class="right">
<p>Quisque vulputate mi id turpis luctus, quis laoreet nisi vestibulum. Morbi facilisis erat vitae augue ornare convallis. Fusce sit amet magna rutrum, hendrerit purus vitae, congue justo. Nam non mi eget purus ultricies lacinia. Fusce ante nisl, efficitur venenatis urna ut, pellentesque egestas nisl. In ut faucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesque maximus. Quisque a tempus lectus.</p>
</div>
</div>
</div>
</body>
</html>
Related
I have a container that can not have an explicit height, it must expand to the height of the children. Both children must be equal height regardless of content, which is set by the taller of the two children.
Here is a fiddle of my issue:
https://jsfiddle.net/efrntzwx/74/
I need the blue section to expand to the height of the red container while keeping padding intact.
html, body, .container {
/* height: 100%; */
}
body {
padding-bottom: 100px;
}
.container {
display: flex;
width: 100%;
border: 1px solid red;
}
.child1, .child2 {
height: 100%;
width: 50%;
padding: 50px 100px;
}
.child1 {
border: 1px solid green;
}
.child2 {
border: 1px solid blue;
}
.child1content {
height: 100%;
background-color: green;
}
.child2content {
height: 100%;
background-color: blue;
}
<html>
<body>
<div class="container">
<div class="child1">
<div class="child1content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at tellus eget ex semper feugiat. Etiam maximus non est at egestas. Proin fermentum ipsum eget enim iaculis mattis eu non elit. Fusce fringilla neque vel mauris vulputate elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque sodales erat augue, a volutpat nunc ultrices quis. Cras feugiat, metus a dapibus condimentum, lorem nulla malesuada enim, et sodales arcu sapien eu sem. Proin vel vulputate magna. Integer rhoncus iaculis justo, eget dignissim massa tempus a. Nullam ut malesuada diam. Vestibulum aliquam ligula eget turpis viverra dignissim. Maecenas elementum nec erat sit amet bibendum. Nulla in hendrerit orci. Duis elit dui, iaculis quis dapibus condimentum, viverra id libero. Suspendisse potenti.
Etiam blandit scelerisque eleifend. Vestibulum non mauris erat. Mauris sed massa sodales, tristique mi ut, suscipit leo. Nam porttitor urna ac nulla malesuada, ac blandit orci bibendum. Aliquam luctus quis ante ac suscipit. Sed sed sapien vestibulum nulla venenatis sodales. Pellentesque ultricies tellus non vehicula ornare. Cras quis aliquet tellus. Mauris nec leo quis metus dignissim laoreet non a nisi. Aenean finibus nunc a augue laoreet, porttitor ullamcorper odio imperdiet. Vivamus pellentesque, leo vitae dignissim varius, elit metus faucibus justo, vel pharetra lectus erat eu lorem. Pellentesque scelerisque tortor elit, at facilisis nisi suscipit at. Nulla facilisi.
</div>
</div>
<div class="child2">
<div class="child2content">
test
</div>
</div>
</div>
</body>
</html>
I added flex-1 property for two child. In this way, the two elements will have the same width and height in each case. What I have changed and added is the specification in the comment lines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
padding-bottom: 100px;
}
.container {
display: flex;
width: 100%;
border: 1px solid red;
}
.child1,
.child2 {
padding: 50px 100px;
/* if you want to always same height and width in the container remove this*/
}
.child1 {
border: 1px solid green;
flex: 1;
/*added*/
}
.child2 {
border: 1px solid blue;
flex: 1;
/*added*/
}
.child1content {
height: 100%;
background-color: green;
}
.child2content {
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="child1">
<div class="child1content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at tellus eget ex semper feugiat. Etiam maximus non est at egestas. Proin fermentum ipsum eget enim iaculis mattis eu non elit. Fusce fringilla neque vel mauris vulputate elementum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque sodales erat augue, a volutpat nunc ultrices quis. Cras feugiat, metus a dapibus condimentum, lorem nulla malesuada enim, et sodales arcu sapien eu sem.
Proin vel vulputate magna. Integer rhoncus iaculis justo, eget dignissim massa tempus a. Nullam ut malesuada diam. Vestibulum aliquam ligula eget turpis viverra dignissim. Maecenas elementum nec erat sit amet bibendum. Nulla in hendrerit orci.
Duis elit dui, iaculis quis dapibus condimentum, viverra id libero. Suspendisse potenti. Etiam blandit scelerisque eleifend. Vestibulum non mauris erat. Mauris sed massa sodales, tristique mi ut, suscipit leo. Nam porttitor urna ac nulla malesuada,
ac blandit orci bibendum. Aliquam luctus quis ante ac suscipit. Sed sed sapien vestibulum nulla venenatis sodales. Pellentesque ultricies tellus non vehicula ornare. Cras quis aliquet tellus. Mauris nec leo quis metus dignissim laoreet non a nisi.
Aenean finibus nunc a augue laoreet, porttitor ullamcorper odio imperdiet. Vivamus pellentesque, leo vitae dignissim varius, elit metus faucibus justo, vel pharetra lectus erat eu lorem. Pellentesque scelerisque tortor elit, at facilisis nisi
suscipit at. Nulla facilisi.
</div>
</div>
<div class="child2">
<div class="child2content">
test
</div>
</div>
</div>
</body>
</html>
I have a web page with a fixed header.
As you can see from the snippet below, the page isn't necessarily as wide as the viewport. To ensure the header width remains in sync with the rest of the page (and doesn't overflow), I use the following CSS on the app bar:
max-width: inherit;
width: inherit;
Simple fixed header example:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam vitae
sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula turpis
arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
However, I need to make some changes to the page structure to allow a full-height fixed left nav drawer. In order to do so, I need to create space by shifting the entire content to the right.
Required fixed header functionality:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-content">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
As you can see, the result is that the app-bar doesn't sync across the full width - instead it overflows the page container.
If I remove the width from app-content, the app-bar shrinks to it's content width.
What I'm looking for is to make the app-bar the same width as the app-content container, as it does in the first snippet.
Any advice appreciated as I'm running out of ideas.
Since width of your page is constant you can just give the app-bar it's desired width in this case 250px if I'm understanding you correctly:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: 250px;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-content">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
I don't know whether you can do that due to browser compatibility, but I would suggest using position: sticky.
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
position: relative;
}
.main {
background-color: aqua;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: sticky;
top: 0;
left: 0;
z-index: 2;
width: 100%;
}
<div class="page">
<div class="app-bar">App bar</div>
<div class="app-content">
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
#import url('https://fonts.googleapis.com/css?family=Roboto');
html,
body {
background-color: lightgray
}
.header {
position: fixed;
top: 0px;
width: 780px;
background-color: rgb(84, 153, 199);
padding: 40px 0;
}
.container {
background-color: white;
width: 780px;
margin: 0 auto;
padding-top: 120px;
}
.photo {
height: 160px;
}
h1,
.help {
font-family: 'Roboto', sans-serif;
}
h1 {
color: white;
margin: 0 1em;
}
.right {
float: right;
margin-right: 18px;
margin-left: 30px;
}
.figure {
border-bottom: solid #BBBBBB;
border-width: 1px;
margin-left: 214px;
width: 340px;
}
.left {
float: left;
margin-right: 20px;
margin-left: 20px;
height: 160px;
border-style: solid;
border-color: #BBBBBB;
border-width: 1px;
padding: 1px;
}
p {
padding-left: 10px;
padding-right: 10px;
}
div.help {
max-width: 40px;
max-height: 40px;
min-width: 40px;
min-height: 40px;
padding: 20px;
position: absolute;
border-radius: 20px;
background-color: blue;
margin-left: 800px;
margin-top: -1000px;
color: white;
font-size: 40px;
}
.photo-grid {
width: 228px;
}
<body>
<div class="container">
<div class="header">
<h1>Layout i HTML</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis commodo purus, et imperdiet sapien varius vel. Aliquam quis massa at neque fringilla pharetra eu at ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Nam a orci mattis, efficitur arcu ac, porta dolor. Aenean massa metus, dictum ut nibh ut, porttitor gravida tellus. Maecenas ex velit, pharetra quis pulvinar quis, rhoncus et augue. Donec sit
amet ex elit. Sed at nibh in lorem porttitor eleifend id ac justo. Aliquam eget libero facilisis, faucibus libero nec, ornare elit. Nunc accumsan libero vitae justo hendrerit, sed facilisis velit efficitur. Nullam aliquet dolor nibh, vel fringilla
tortor facilisis ut. Curabitur ultrices dapibus purus. Nullam porttitor odio a malesuada accumsan. Duis eget diam metus. Suspendisse potenti.</p>
<div class="right photo">
<img src="img/photo-one.png">
<img src="img/photo-two.png">
</div>
<p>Vestibulum cursus tellus id pulvinar pellentesque. Suspendisse euismod augue sit amet lorem tempus, vitae ornare quam auctor. Sed placerat eleifend nunc, at semper metus hendrerit ut. Suspendisse nulla libero, suscipit quis euismod quis, sagittis
non lectus. Integer convallis quam suscipit, lacinia felis at, molestie quam. Duis sagittis facilisis erat eget semper. Maecenas a odio enim. Morbi at odio egestas, pharetra est eu, tristique mi. Sed sed facilisis sapien, nec molestie nisl. Curabitur
faucibus risus viverra metus ultricies, vitae bibendum sem cursus. Maecenas quis nulla sollicitudin, luctus ex efficitur, fringilla sem.</p>
<p>Nunc rhoncus dolor vel nisi posuere imperdiet. Phasellus auctor turpis in vestibulum sodales. Vestibulum vitae nibh turpis. Sed vel vestibulum ex. Pellentesque ex lacus, venenatis a condimentum nec, venenatis id risus. Nullam mattis blandit tellus
quis dignissim. In ultrices lacinia interdum. Maecenas quam metus, egestas eu augue aliquam, mollis elementum lorem. Sed vel nulla consequat, porta eros non, porttitor enim. Praesent id turpis in ipsum pulvinar ornare. In tincidunt sit amet nulla
sed euismod. Sed scelerisque arcu justo, ac fringilla magna mollis vel. Phasellus ultricies sed ligula ac fringilla. Vestibulum venenatis velit non dui feugiat faucibus. Duis ut ante malesuada, egestas eros non, hendrerit sem. Fusce vehicula ante
at maximus consectetur.</p>
<div class="figure">
<div>
<img src="img/photo-three.png">
<p>Figur 1: Duis placerat quam at lacus facilisis, a semper dolor aliquet.</p>
</div>
</div>
<p>Aenean ut nisl convallis, volutpat ex vulputate, varius eros. Curabitur urna quam, euismod et egestas vel, dictum vel erat. Quisque dictum quis ex id auctor. Mauris efficitur libero neque, id pulvinar odio facilisis sit amet. Fusce eleifend sem eget
ipsum luctus pharetra. Sed efficitur non enim in blandit. Sed lacus quam, molestie nec volutpat quis, tincidunt et eros. Suspendisse id magna dictum, semper metus ac, ultricies nisi. Sed quis euismod nibh, non pulvinar turpis. Curabitur vulputate
massa luctus varius auctor. Aenean rutrum vitae arcu quis placerat. Donec sagittis porta purus, sed posuere lorem imperdiet quis.</p>
<div class="left photo"><img src="img/photo-four.png"></div>
<div class="right photo-grid">
<img src="img/photo-five.png">
<img src="img/photo-six.png">
<img src="img/photo-seven.png">
<img src="img/photo-eight.png">
</div>
<p>Suspendisse vel consequat risus. Phasellus et posuere orci. Suspendisse iaculis pellentesque neque quis luctus. Vestibulum eget sagittis lorem. Vivamus finibus risus venenatis, gravida diam blandit, tristique eros. Interdum et malesuada fames ac ante
ipsum primis in faucibus. Quisque non congue eros. Quisque venenatis blandit enim, quis elementum dolor iaculis at. Mauris ut magna magna. Nulla facilisi.</p>
<p>Fusce lacinia mauris nec nunc malesuada sollicitudin. Maecenas non enim purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare auctor nunc, et commodo elit condimentum ac. Mauris feugiat feugiat tortor ut egestas. Sed pellentesque
dictum nulla sit amet euismod. Fusce lacinia pulvinar fringilla. Duis eget ante blandit, tristique sapien nec, convallis dolor. Morbi elementum ornare neque non faucibus. Quisque aliquet nisl vitae risus euismod, vitae pretium justo porta. Suspendisse
vel tellus dictum, egestas nisl accumsan, scelerisque tellus. Nunc et faucibus mauris. Duis varius magna erat, a ullamcorper magna ullamcorper et.</p>
<div class="help">
<p>?</p>
</div>
</div>
</body>
So I have these as main.css and index.html, it should look like the linked picture but instead it looks like the gyazo, the things I need to do are, border around the 2 pictures on the right, correct the orange figure and fix the questionmark help button.
Image of how its supposed to look
Image of how it currently looks
You can add the CSS class to main.css and the desired output is achieved.
.help p{
margin:0px;
}
#import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
background-color: lightgray
}
.header{
position: fixed;
top: 0px;
width: 780px;
background-color: rgb(84, 153, 199);
padding: 40px 0;
}
.container {
background-color: white;
width: 780px;
margin: 0 auto;
padding-top: 120px;
}
.photo{
height: 160px;
}
h1, .help {
font-family: 'Roboto', sans-serif;
}
h1 {
color: white;
margin: 0 1em;
}
.right {
float: right;
margin-right: 18px;
margin-left: 30px;
}
.figure {
border-bottom: solid #BBBBBB;
border-width: 1px;
margin-left: 214px;
width: 340px;
}
.left {
float: left;
margin-right: 20px;
margin-left: 20px;
height: 160px;
border-style: solid;
border-color: #BBBBBB;
border-width: 1px;
padding: 1px;
}
p {
padding-left: 10px;
padding-right: 10px;
}
div.help {
max-width: 40px;
max-height: 40px;
min-width: 40px;
min-height: 40px;
padding: 20px;
position: absolute;
border-radius: 20px;
background-color: blue;
margin-left: 800px;
margin-top: -1000px;
color: white;
font-size: 40px;
}
.photo-grid {
width: 228px;
}
.help p{
margin:0px;
}
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>Lorem Ipsum</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Layout i HTML</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis commodo purus, et imperdiet sapien varius vel. Aliquam quis massa at neque fringilla pharetra eu at ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam a orci mattis, efficitur arcu ac, porta dolor. Aenean massa metus, dictum ut nibh ut, porttitor gravida tellus. Maecenas ex velit, pharetra quis pulvinar quis, rhoncus et augue. Donec sit amet ex elit. Sed at nibh in lorem porttitor eleifend id ac justo. Aliquam eget libero facilisis, faucibus libero nec, ornare elit. Nunc accumsan libero vitae justo hendrerit, sed facilisis velit efficitur. Nullam aliquet dolor nibh, vel fringilla tortor facilisis ut. Curabitur ultrices dapibus purus. Nullam porttitor odio a malesuada accumsan. Duis eget diam metus. Suspendisse potenti.</p>
<div class="right photo">
<img src="img/photo-one.png">
<img src="img/photo-two.png">
</div>
<p>Vestibulum cursus tellus id pulvinar pellentesque. Suspendisse euismod augue sit amet lorem tempus, vitae ornare quam auctor. Sed placerat eleifend nunc, at semper metus hendrerit ut. Suspendisse nulla libero, suscipit quis euismod quis, sagittis non lectus. Integer convallis quam suscipit, lacinia felis at, molestie quam. Duis sagittis facilisis erat eget semper. Maecenas a odio enim. Morbi at odio egestas, pharetra est eu, tristique mi. Sed sed facilisis sapien, nec molestie nisl. Curabitur faucibus risus viverra metus ultricies, vitae bibendum sem cursus. Maecenas quis nulla sollicitudin, luctus ex efficitur, fringilla sem.</p>
<p>Nunc rhoncus dolor vel nisi posuere imperdiet. Phasellus auctor turpis in vestibulum sodales. Vestibulum vitae nibh turpis. Sed vel vestibulum ex. Pellentesque ex lacus, venenatis a condimentum nec, venenatis id risus. Nullam mattis blandit tellus quis dignissim. In ultrices lacinia interdum. Maecenas quam metus, egestas eu augue aliquam, mollis elementum lorem. Sed vel nulla consequat, porta eros non, porttitor enim. Praesent id turpis in ipsum pulvinar ornare. In tincidunt sit amet nulla sed euismod. Sed scelerisque arcu justo, ac fringilla magna mollis vel. Phasellus ultricies sed ligula ac fringilla. Vestibulum venenatis velit non dui feugiat faucibus. Duis ut ante malesuada, egestas eros non, hendrerit sem. Fusce vehicula ante at maximus consectetur.</p>
<div class="figure">
<div>
<img src="img/photo-three.png">
<p>Figur 1: Duis placerat quam at lacus facilisis, a semper dolor aliquet.</p>
</div>
</div>
<p>Aenean ut nisl convallis, volutpat ex vulputate, varius eros. Curabitur urna quam, euismod et egestas vel, dictum vel erat. Quisque dictum quis ex id auctor. Mauris efficitur libero neque, id pulvinar odio facilisis sit amet. Fusce eleifend sem eget ipsum luctus pharetra. Sed efficitur non enim in blandit. Sed lacus quam, molestie nec volutpat quis, tincidunt et eros. Suspendisse id magna dictum, semper metus ac, ultricies nisi. Sed quis euismod nibh, non pulvinar turpis. Curabitur vulputate massa luctus varius auctor. Aenean rutrum vitae arcu quis placerat. Donec sagittis porta purus, sed posuere lorem imperdiet quis.</p>
<div class="left photo"><img src="img/photo-four.png"></div>
<div class="right photo-grid">
<img src="img/photo-five.png">
<img src="img/photo-six.png">
<img src="img/photo-seven.png">
<img src="img/photo-eight.png">
</div>
<p>Suspendisse vel consequat risus. Phasellus et posuere orci. Suspendisse iaculis pellentesque neque quis luctus. Vestibulum eget sagittis lorem. Vivamus finibus risus venenatis, gravida diam blandit, tristique eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque non congue eros. Quisque venenatis blandit enim, quis elementum dolor iaculis at. Mauris ut magna magna. Nulla facilisi.</p>
<p>Fusce lacinia mauris nec nunc malesuada sollicitudin. Maecenas non enim purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare auctor nunc, et commodo elit condimentum ac. Mauris feugiat feugiat tortor ut egestas. Sed pellentesque dictum nulla sit amet euismod. Fusce lacinia pulvinar fringilla. Duis eget ante blandit, tristique sapien nec, convallis dolor. Morbi elementum ornare neque non faucibus. Quisque aliquet nisl vitae risus euismod, vitae pretium justo porta. Suspendisse vel tellus dictum, egestas nisl accumsan, scelerisque tellus. Nunc et faucibus mauris. Duis varius magna erat, a ullamcorper magna ullamcorper et.</p>
<div class="help">
<p>?</p>
</div>
</div>
</body>
</html>
I'm working on a school project. I am new to html. My page won't scroll down once my content goes past the footer. How do I fix this? Why won't it scroll down? I would like to keep my footer at the bottom and I tried playing around with it but can't seem to get it right.
<!DOCTYPE html>
<html lang="en">
<head>
<title>TRIP TO LONDON</title>
<meta charset="utf-8">
<link href="layout.css" rel="stylesheet" type="text/css">
<style>
<!--
Jasmine
Web Programming 1
10/28/14
- ids can be used 1 time per html page
- classes can be used unlimited time per html page
- ids typically contain margin, width of the divs
- classes contain styles of the divs
WCAG Guidelines (Section 508) WAI > W3C
AA - Headings Navigation
AAA - large bodies of text paragraphs -->
body {
font-family: Helvetica;
}
#main{
width: 950px;
margin: 0px auto;
background-color: #ececec;
}
<!--center div-->
#banner{
width: 800px;
margin-left: 45px;
margin-right: 45px;
border: medium;
}
.bg {
background-color:#ececec;
font-size: 88.5%;
font-family: helvetica;
}
#content{
width: 850px;
margin-top: 50px;}
#left{
width: 450px;
float: left;
padding: 20px 10px 10px 20px;
}
#bottom {
width: 450px;
float: left;
padding: 20px 10px 10px 20px;
margin-top: 10px;
}
#right{
width: 300px;
float: right;
padding: 20px 10px 10px 20px;
}
#footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 8px;
background-color: #4285f4;
text-align: center;
color: white;
}
.grid1{
color: #000000;
background-color: #FFFFFF;
font-family: sans-serif;
box-shadow: 0px 2px 4px #888888;
}
.grid2{
color:#000000;
background-color: #FFFFFF;
border-style: dashed;
border-width: 5px;
border-color: #000000;
box-shadow: 0px 2px 4px #888888;
}
#banner1
{
background: #4285f4;
color: white;
position: fixed;
left: 0;
right: 0;
padding: 10px;
height: 30px;
text-align: center;
top: 0;
width: 100%;
font-family: Helvetica;
font-size: 18px;
}
</style>
</head>
<body id="body" class="bg">
<div id="main">
<div id="banner1">TRIP TO LONDON</div><!--close banner-->
<div id="content">
<div id="left" class="grid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis turpis ut sapien egestas euismod. Pellentesque a ultricies neque. Cras sed nisl mollis, iaculis metus vel, venenatis lectus. Cras nisi orci, convallis sit amet nibh ac, vestibulum aliquet lectus. Curabitur eget cursus lorem. Praesent hendrerit in nunc non rutrum. Suspendisse ac elit vitae odio condimentum consequat. Cras a fringilla dui, dapibus lacinia quam. Sed quis sagittis ante. Quisque non congue lacus, et scelerisque arcu. Cras cursus finibus gravida. Nulla id lacus consequat, finibus quam ac, ultricies purus. Curabitur scelerisque massa id leo malesuada, vel semper quam venenatis. Fusce viverra, erat at convallis laoreet, tellus erat bibendum nulla, id dapibus tellus orci viverra leo. Cras posuere id nibh at ornare. Praesent luctus magna et lacus malesuada, id ullamcorper enim vulputate. Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam.</div><!--close left-->
<div id="right" class="grid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis turpis ut sapien egestas euismod. Pellentesque a ultricies neque. Cras sed nisl mollis, iaculis metus vel, venenatis lectus. Cras nisi orci, convallis sit amet nibh ac, vestibulum aliquet lectus. Curabitur eget cursus lorem. Praesent hendrerit in nunc non rutrum. Suspendisse ac elit vitae odio condimentum consequat. Cras a fringilla dui, dapibus lacinia quam. Sed quis sagittis ante. Quisque non congue lacus, et scelerisque arcu. Cras cursus finibus gravida. Nulla id lacus consequat, finibus quam ac, ultricies purus. Curabitur scelerisque massa id leo malesuada, vel semper quam venenatis. Fusce viverra, erat at convallis laoreet, tellus erat bibendum nulla, id dapibus tellus orci viverra leo. Cras posuere id nibh at ornare. Praesent luctus magna et lacus malesuada, id ullamcorper enim vulputate. Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam.
</div><!--close right-->
<div id="bottom" class="grid1"> Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam. sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, elis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus bla.
</div>
</div><!--close content-->
<div id="footer">J.O. Copyright 2014</div><!--close footer-->
</div><!--close main-->
</body>
</html>
Your content is scrolled to the bottom of your page as it is supposed to do. You can't see it because you have your footer on top of your content with a fixed position. The simple solution is to put height on your footer and add the same height as padding to the content. Or just add some padding-bottom to #content like this. And add overflow: hidden to #content so it has height. If the parent is filled with floated children element it doesn't have height. So either add overflow: hidden; or use a clearfix :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>TRIP TO LONDON</title>
<meta charset="utf-8">
<link href="layout.css" rel="stylesheet" type="text/css">
<style>
<!--
Jasmine
Web Programming 1
10/28/14
- ids can be used 1 time per html page
- classes can be used unlimited time per html page
- ids typically contain margin, width of the divs
- classes contain styles of the divs
WCAG Guidelines (Section 508) WAI > W3C
AA - Headings Navigation
AAA - large bodies of text paragraphs -->
body {
font-family: Helvetica;
}
#main{
width: 950px;
margin: 0px auto;
background-color: #ececec;
}
<!--center div-->
#banner{
width: 800px;
margin-left: 45px;
margin-right: 45px;
border: medium;
}
.bg {
background-color:#ececec;
font-size: 88.5%;
font-family: helvetica;
}
#content{
width: 850px;
margin-top: 50px;
padding-bottom: 50px;
overflow: hidden;
}
#left{
width: 450px;
float: left;
padding: 20px 10px 10px 20px;
}
#bottom {
width: 450px;
float: left;
padding: 20px 10px 10px 20px;
margin-top: 10px;
}
#right{
width: 300px;
float: right;
padding: 20px 10px 10px 20px;
}
#footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 8px;
background-color: #4285f4;
text-align: center;
color: white;
}
.grid1{
color: #000000;
background-color: #FFFFFF;
font-family: sans-serif;
box-shadow: 0px 2px 4px #888888;
}
.grid2{
color:#000000;
background-color: #FFFFFF;
border-style: dashed;
border-width: 5px;
border-color: #000000;
box-shadow: 0px 2px 4px #888888;
}
#banner1
{
background: #4285f4;
color: white;
position: fixed;
left: 0;
right: 0;
padding: 10px;
height: 30px;
text-align: center;
top: 0;
width: 100%;
font-family: Helvetica;
font-size: 18px;
}
</style>
</head>
<body id="body" class="bg">
<div id="main">
<div id="banner1">TRIP TO LONDON</div><!--close banner-->
<div id="content">
<div id="left" class="grid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis turpis ut sapien egestas euismod. Pellentesque a ultricies neque. Cras sed nisl mollis, iaculis metus vel, venenatis lectus. Cras nisi orci, convallis sit amet nibh ac, vestibulum aliquet lectus. Curabitur eget cursus lorem. Praesent hendrerit in nunc non rutrum. Suspendisse ac elit vitae odio condimentum consequat. Cras a fringilla dui, dapibus lacinia quam. Sed quis sagittis ante. Quisque non congue lacus, et scelerisque arcu. Cras cursus finibus gravida. Nulla id lacus consequat, finibus quam ac, ultricies purus. Curabitur scelerisque massa id leo malesuada, vel semper quam venenatis. Fusce viverra, erat at convallis laoreet, tellus erat bibendum nulla, id dapibus tellus orci viverra leo. Cras posuere id nibh at ornare. Praesent luctus magna et lacus malesuada, id ullamcorper enim vulputate. Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam.</div><!--close left-->
<div id="right" class="grid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis turpis ut sapien egestas euismod. Pellentesque a ultricies neque. Cras sed nisl mollis, iaculis metus vel, venenatis lectus. Cras nisi orci, convallis sit amet nibh ac, vestibulum aliquet lectus. Curabitur eget cursus lorem. Praesent hendrerit in nunc non rutrum. Suspendisse ac elit vitae odio condimentum consequat. Cras a fringilla dui, dapibus lacinia quam. Sed quis sagittis ante. Quisque non congue lacus, et scelerisque arcu. Cras cursus finibus gravida. Nulla id lacus consequat, finibus quam ac, ultricies purus. Curabitur scelerisque massa id leo malesuada, vel semper quam venenatis. Fusce viverra, erat at convallis laoreet, tellus erat bibendum nulla, id dapibus tellus orci viverra leo. Cras posuere id nibh at ornare. Praesent luctus magna et lacus malesuada, id ullamcorper enim vulputate. Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam.
</div><!--close right-->
<div id="bottom" class="grid1"> Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam. sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, elis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus bla.
</div>
</div><!--close content-->
<div id="footer">J.O. Copyright 2014</div><!--close footer-->
</div><!--close main-->
</body>
</html>
if your content is going off too far below and you can't scroll it means the element containing the content isn't big enough. Try to set the element that has all the content with a larger height value (I'm guessing the body element in your case)
so in your css if:
height:800px
set it to
height:1200px
or enough to hold all the content
I'm currently having trouble with http://jsfiddle.net/XB2r7/6/, or:
.content {
margin-right: auto;
margin-left: auto;
background-color:rgba(64,64,64,0.9);
width: 1000px;
height: auto;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px solid #333;
color: #fff;
overflow: auto;
margin-bottom: 20px;
box-shadow: 0px 1px 1px #333;
}
.clear {
clear: both;
}
.sidebar {
width: 23.5%;
height: auto;
display: block;
float: left;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.9);
}
.content2 {
width: 73.5%;
height: auto;
display: block;
float: right;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.9);
}
.h1 {
font-weight: bold;
}
.content hr {
border: 0;
height: 2px;
background: url('bg3.jpg');
}
As you can see at JSFiddle the sidebar is going down as I place a second content2-div. Is there a way to fix this without placing it both in other containers?
Remove float:left from .sidebar class
.sidebar {
float:left; /*remove*/
}
Demo
I've updated your fiddle.
Just removed .sidebar {float:left}
try this
<div class="content">
<div class="sidebar">
<h1>Consectetur adipiscing elit.</h1>
<hr>
Morbi vel porttitor augue, eu rhoncus massa. Vivamus venenatis, arcu at euismod semper, ipsum nunc interdum ante, in semper mauris metus eu risus. Aliquam nibh massa, venenatis in turpis vitae, tempor lacinia metus. Vestibulum sed metus ut lectus lacinia tincidunt ac eu erat. Phasellus eu fermentum lacus. Duis vitae bibendum magna, a ullamcorper libero. In hac habitasse platea dictumst. Phasellus molestie nisl id lectus blandit, ac rhoncus dui pellentesque. Praesent sit amet tempus turpis, eu elementum mauris. Sed ipsum dui, luctus eu vehicula id, eleifend nec libero. Donec.
<h1>Consectetur adipiscing elit.</h1>
<hr>
Morbi vel porttitor augue, eu rhoncus massa. Vivamus venenatis, arcu at euismod semper, ipsum nunc interdum ante, in semper mauris metus eu risus. Aliquam nibh massa, venenatis in turpis vitae, tempor lacinia metus. Vestibulum sed metus ut lectus lacinia tincidunt ac eu erat. Phasellus eu fermentum lacus. Duis vitae bibendum magna, a ullamcorper libero. In hac habitasse platea dictumst. Phasellus molestie nisl id lectus blandit, ac rhoncus dui pellentesque. Praesent sit amet tempus turpis, eu elementum mauris. Sed ipsum dui, luctus eu vehicula id, eleifend nec libero. Donec.
</div>
<div class="content2">
<h1>Duis ac felis neque. Ut leo massa, hendrerit et nulla at.</h1>
<hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquet leo at eros convallis rhoncus. Sed malesuada tincidunt dolor, nec ornare sem tincidunt vel. Maecenas placerat ipsum eu quam semper, eu tincidunt felis fringilla. Ut placerat vehicula vulputate. Sed id ultricies odio, eu congue nisi. Vivamus venenatis mauris id urna ullamcorper, ut posuere ipsum sodales. Proin gravida varius urna eu eleifend. Praesent a interdum sapien. Cras scelerisque nisi sit amet nibh convallis bibendum a eu diam. Nam porttitor elementum fringilla. Etiam accumsan dictum metus vitae cursus.
<br><br>
Vivamus ante mi, tincidunt quis commodo tempor, consequat vel nisl. Phasellus vestibulum elit a dui laoreet, nec congue velit vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam condimentum orci sit amet orci imperdiet gravida. Proin porta luctus quam, quis bibendum urna lobortis porttitor. Pellentesque nec lobortis ipsum. Pellentesque sit amet felis quis risus luctus semper in id ante. Nullam condimentum neque eget sollicitudin interdum. Duis imperdiet enim felis, in facilisis nisl facilisis at. Aliquam ut enim vehicula ligula dignissim molestie. Quisque dignissim quis ante ut eleifend. Suspendisse vitae mi vitae ligula interdum egestas ut sed nibh.
<br><br>
Mauris sit amet egestas augue. Aliquam ultrices tristique dolor vel luctus. Vestibulum cursus eleifend magna nec varius. Sed cursus magna in mi feugiat eleifend id quis purus. Fusce sollicitudin ultricies augue ac viverra. Curabitur tempor feugiat justo eu porta. Suspendisse eu sollicitudin ipsum. Proin rutrum turpis id massa molestie sollicitudin. Maecenas sit amet justo cursus, blandit mi sit amet, scelerisque quam. Nam ut arcu fringilla, sodales nibh sed, sodales elit. Nam vel tortor sed erat interdum sollicitudin sed non libero. Donec tristique, justo id interdum fermentum, lacus augue dictum nisl, sit amet adipiscing est enim vitae neque.
</div>
<div class="content2">
<h1>Duis ac felis neque. Ut leo massa, hendrerit et nulla at.</h1>
<hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquet leo at eros convallis rhoncus. Sed malesuada tincidunt dolor, nec ornare sem tincidunt vel. Maecenas placerat ipsum eu quam semper, eu tincidunt felis fringilla. Ut placerat vehicula vulputate. Sed id ultricies odio, eu congue nisi. Vivamus venenatis mauris id urna ullamcorper, ut posuere ipsum sodales. Proin gravida varius urna eu eleifend. Praesent a interdum sapien. Cras scelerisque nisi sit amet nibh convallis bibendum a eu diam. Nam porttitor elementum fringilla. Etiam accumsan dictum metus vitae cursus.
<br><br>
Vivamus ante mi, tincidunt quis commodo tempor, consequat vel nisl. Phasellus vestibulum elit a dui laoreet, nec congue velit vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam condimentum orci sit amet orci imperdiet gravida. Proin porta luctus quam, quis bibendum urna lobortis porttitor. Pellentesque nec lobortis ipsum. Pellentesque sit amet felis quis risus luctus semper in id ante. Nullam condimentum neque eget sollicitudin interdum. Duis imperdiet enim felis, in facilisis nisl facilisis at. Aliquam ut enim vehicula ligula dignissim molestie. Quisque dignissim quis ante ut eleifend. Suspendisse vitae mi vitae ligula interdum egestas ut sed nibh.
<br><br>
Mauris sit amet egestas augue. Aliquam ultrices tristique dolor vel luctus. Vestibulum cursus eleifend magna nec varius. Sed cursus magna in mi feugiat eleifend id quis purus. Fusce sollicitudin ultricies augue ac viverra. Curabitur tempor feugiat justo eu porta. Suspendisse eu sollicitudin ipsum. Proin rutrum turpis id massa molestie sollicitudin. Maecenas sit amet justo cursus, blandit mi sit amet, scelerisque quam. Nam ut arcu fringilla, sodales nibh sed, sodales elit. Nam vel tortor sed erat interdum sollicitudin sed non libero. Donec tristique, justo id interdum fermentum, lacus augue dictum nisl, sit amet adipiscing est enim vitae neque.
</div>
</div>
Change the order of your HTML elements:
http://jsfiddle.net/XB2r7/6/
<div class="content"></div>
<div class="sidebar"></div>
<div class="content"></div>
<div class="sidebar"></div>
try this in your css file :
.content {
margin-right: auto;
margin-left: auto;
background-color:rgba(64,64,64,0.9);
width: 1000px;
height: auto;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px solid #333;
color: #fff;
overflow: auto;
margin-bottom: 20px;
box-shadow: 0px 1px 1px #333;
}
.clear {
clear: both;
}
.sidebar {
width: 23.5%;
height: auto;
display: block;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.9);
}
.content2 {
width: 73.5%;
height: auto;
display: block;
float: right;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.9);
}
.h1 {
font-weight: bold;
}
.content hr {
border: 0;
height: 2px;
background: url('bg3.jpg');
}
it works :