Dear more expert Pros!
What I'm unable to achieve - making the mcontent div stylized properly. Actually I have no idea why is not working this very simple css code. The lside and the content div are inside in the mcontent div. I'd like to have the mcontent div left and right border but I can't achieve that. If I take out the content and/or the lside formatting from the css file, the borders seemable. If I format the lside and the content div, the mcontent div even seems to me unvisible. (gave it background color and that is unvisible under these mentioned divs) I have no idea why. I've checked the html file for coding error - I did not discover any problem.
This is the HTML file:
<html>
<head>
<link rel="stylesheet" href="firstsite.css" type="text/css" />
<meta charset="utf-8" />
<title>Website</title>
</head>
<body>
<div id="main">
<div id="header">
<h1>Website</h1>
</div>
<div id="navi">
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Menu 2_1</li>
<li>Menu 2_2</li>
<li>Menu 2_3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Menu 3_1</li>
<li>Menu 3_2</li>
<li>Menu 3_3</li>
<li>Menu 3_4</li>
<li>Menu 3_5</li>
</ul>
</li>
<li>Menu 4</li>
</ul>
</div>
<div id="mcontent">
<div id="lside">
<div id="lside_1">DIV 1
</div>
<div id="lside_2">DIV 2
</div>
<div id="lside_3">DIV 3
</div>
</div>
<div id="content">
<h2 text-aling="center">1. menupoint - no submenu</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum maximus leo, id euismod enim finibus ac. Fusce velit tortor, tincidunt a commodo et, elementum in enim. Ut eget varius elit, vel fermentum eros. Sed at nulla ornare odio rhoncus hendrerit sit amet nec massa. Integer at ultrices urna. Fusce a libero vel purus fringilla condimentum et sed eros. Fusce vestibulum velit eget libero bibendum maximus. Suspendisse in libero mattis magna fringilla interdum vel quis nulla. Pellentesque dapibus, elit eget efficitur pretium, diam dui luctus massa, non semper elit orci eget mi. Nunc condimentum pretium dapibus. Nulla iaculis urna nec eros commodo, eu lacinia eros ullamcorper. Phasellus euismod rutrum nulla id malesuada. In pellentesque turpis vel vehicula lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum maximus leo, id euismod enim finibus ac. Fusce velit tortor, tincidunt a commodo et, elementum in enim. Ut eget varius elit, vel fermentum eros. Sed at nulla ornare odio rhoncus hendrerit sit amet nec massa. Integer at ultrices urna. Fusce a libero vel purus fringilla condimentum et sed eros. Fusce vestibulum velit eget libero bibendum maximus. Suspendisse in libero mattis magna fringilla interdum vel quis nulla. Pellentesque dapibus, elit eget efficitur pretium, diam dui luctus massa, non semper elit orci eget mi. Nunc condimentum pretium dapibus. Nulla iaculis urna nec eros commodo, eu lacinia eros ullamcorper. Phasellus euismod rutrum nulla id malesuada. In pellentesque turpis vel vehicula lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum maximus leo, id euismod enim finibus ac. Fusce velit tortor, tincidunt a commodo et, elementum in enim. Ut eget varius elit, vel fermentum eros. Sed at nulla ornare odio rhoncus hendrerit sit amet nec massa. Integer at ultrices urna. Fusce a libero vel purus fringilla condimentum et sed eros. Fusce vestibulum velit eget libero bibendum maximus. Suspendisse in libero mattis magna fringilla interdum vel quis nulla. Pellentesque dapibus, elit eget efficitur pretium, diam dui luctus massa, non semper elit orci eget mi. Nunc condimentum pretium dapibus. Nulla iaculis urna nec eros commodo, eu lacinia eros ullamcorper. Phasellus euismod rutrum nulla id malesuada. In pellentesque turpis vel vehicula lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>
<div id="footer">
<h2>PHP Website by FGB 2016</h2>
</div>
</div>
</body>
and this is the CSS file:
body {
margin: 0px;
padding: 0px;
}
#main {
margin: 0px auto;
padding: 20px;
width: 940px;
border: 1px solid red; /* just for seeing*/
}
#header {
margin: 0px auto;
background-color: #808080;
width: 900px;
border: 1px #808080 solid;
border-bottom: 2px #FA801D solid;
border-radius: 15px 15px 0px 0px;
}
#header h1 {
color: white;
text-align: center;
}
#mcontent {
margin: 0px auto;
width: 892px;
border-left: 5px solid #808080;
border-right: 5px solid #808080;
}
#lside {
margin-left: 10px;
float: left;
width: 200px;
height: auto;
border: 1px solid black;
}
#lside_1 {
border: 1px solid black;
}
#lside_2 {
border: 1px solid black;
}
#lside_3 {
border: 1px solid black;
}
#content {
float: right;
margin-right: 10px;
width: 600px;
padding: 0px 15px;
border: 1px solid;
}
#content h2 {
text-align: center;
}
#content p {
text-align: justify;
}
#footer {
clear: both;
margin: 0px auto;
background-color: #808080;
width: 900px;
height: 60px;
border-width: 0px 1px 1px 1px;
border-style: solid;
line-height: 60px;
border-radius: 0px 0px 15px 15px;
border-top: 10px #FA801D solid;
}
#footer h2 {
margin: 0px;
color: white;
text-align: center;
}
/*
* navi section
*/
.menu {
margin: 0px auto;
height: 40px;
width: 900px;
background: #808080;
padding: 0px;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
border-bottom: 10px #FA801D solid;
}
.menu li {
position: relative;
text-align: center;
list-style: none;
width: 25%;
height: 40px;
float: left;
}
.menu li a {
text-align: center;
display: block;
line-height: 40px;
text-decoration: none;
font-family: Verdana, Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 1.2em;
color: white;
transition: .3s background-color;
}
.menu li:hover > a {
background-color: #FA801D;
}
.menu ul {
position: absolute;
padding: 0;
top: 50px;
background: #808080;
opacity: 0;
box-shadow: 3px 3px 3px #888888;
}
.menu li:hover > ul {
opacity:1;
}
.menu ul li {
height:0;
overflow: hidden;
padding: 0;
width: 100%;
border-top: 1px grey solid;
border-bottom: 1px grey solid;
}
.menu li:hover > ul li {
height: 40px;
overflow: visible;
}
/*
* end of navi section
*/
Thank you in advance for your help!
You are trying to style an empty div - no contents inside it but other div(s) - the style won't work until you add content or to give it a height
add min-height:200px; and display: table; to #mcontent to be like this
#mcontent {
margin: 0px auto;
width: 892px;
border-left: 5px solid #808080;
border-right: 5px solid #808080;
min-height:200px;
display: table;
}
here is a fiddle https://jsfiddle.net/majali/vzx80x97/6/
<div id="mcontent" >
<div id="lside">
<div id="lside_1">DIV 1
</div>
<div id="lside_2">DIV 2
</div>
<div id="lside_3">DIV 3
</div>
</div>
<div style="clear:both">
and style :
#mcontent {
margin: 0px auto;
display:inline-block;
border-left: 5px solid #808080;
border-right: 5px solid #808080;
}
Related
It's ancient, but there are still some people who use InsaneJournal (an offshoot of Danga Interactive's LiveJournal), myself included.
I'm trying to add some very basic content organizers; specifically, CSS-only (InsaneJournal prevents the use of jQuery) tabs and a modal window. But I cannot get them to work. I've tested the code snippets in JSFiddle, and they work fine (I'll include the snippets below, too), which makes me think there is something in the pre-made layout I'm using which prevents the snippets from working as expected.
Can anyone offer any insight? The website is here and these are the snippets:
Modal Window:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
<h1>Open Modal</h1>
<div id="openModal" class="modalDialog">
<div> X
<h2>Modal Window</h2>
<p>This is a modal window.</p>
</div>
</div>
CSS Tabs:
.tabs {
color: #333;
font-family: arial, sans-serif;
margin: auto;
font-size: 1em;
width: 80%;
}
.tabs ul.tab-nav {
display: table;
border-spacing: 2px;
list-style: none;
margin: 0;
padding: 0;
width: 100%
}
.tabs ul.tab-nav li {
display: table-cell;
}
.tabs ul.tab-nav li a {
padding: 10px;
background-color: #ccc;
color: #333;
display: block;
font-size: 1.214em;
font-weight: bold;
margin: 2px 0;
padding: 10px;
text-decoration: none;
}
.tabs ul.tab-nav li a:hover {
background-color: #ddd;
}
.tabs section article {
display: none;
padding: 0 5px 0 10px;
}
.tabs section:target article {
display: block;
}
<div class="tabs">
<h1>CSS-only Tabs (POC)</h1>
<ul class="tab-nav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<section id="option1">
<article>
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut lacus vel eros maximus pharetra. Nullam mattis posuere eros, ac pellentesque felis lobortis id. Fusce sed varius mauris. Integer ut pulvinar metus. Vestibulum ?obortis non enim
quis pulvinar. Maecenas et pulvinar mi. Pellentesque gravida eleifend nisl vitae efficitur. Curabitur sit amet convallis elit, sit amet ultrices enim. Integer vitae erat sit amet mi viverra gravida.</p>
</article>
</section>
<section id="option2">
<article>
<h2>Heading 2</h2>
<p>Aenean eu mauris sagittis magna fringilla rhoncus. Mauris ornare felis at rutrum condimentum. Fusce in fermentum ipsum. Duis et dignissim orci, at venenatis urna. Etiam condimentum malesuada placerat. In sollicitudin justo fermentum velit facilisis
aliquam. Duis psuere, neque iaculis dignissim scelerisque, dolor orci vulputate dui, et pulvinar dui ante pharetra ipsum.</p>
</article>
</section>
<section id="option3">
<article>
<h2>Heading 3</h2>
<p>Duis lectus magna, tristique quis tristique ac, eleifend nec sapien. Quisque vel eros nec tortor efficitur malesuada. Suspendisse malesuada, erat eu posuere finibus, velit tellus placerat mauris, id pharetra nunc velit et nisi. Phasellus non diam
sapien. Ut tellus est, tristique sit amet arcu eget, egestas porta sapien. Sed maximus, turpis ut tempor imperdiet, sem nisi lobortis enim, vel ultrices elit turpis eu nisi. Morbi efficitur luctus justo, eget ultrices lorem luctus ac. Quisque
id augue risus. Cras sagittis dapibus sapien vehicula auctor. Nullam iaculis ipsum leo, sed ornare arcu placerat sit amet. Aenean aliquet dictum ligula non rhoncus. Duis lacinia, nisl sed porttitor scelerisque, ex ex viverra massa, sit amet ullamcorper
sem nulla sit amet urna.</p>
</article>
</section>
</div>
These are pasted directly from the code I'm using on my blog. As you can see, they operate (here, in Codepen, in jsFiddle, everywhere) as expected.
I do not see why (or what) would prevent these really very simple codes from operating as they ought to. Can anyone tell me what is going on here? Or point me in the right direction? Or even offer a means of circumventing what's going on here? I'll take any kind of help.
Thank you for your time, and I apologize if this is very simplistic. I'm not very advanced at all (as if that isn't obvious).
EDIT As pointed out by Mehravish Temkar, the div ids are not showing up in the page even after they've been entered. Does anyone know what is removing them from the code? And, for that matter (and just out of curiosity), why they would be removed?
I am working on my portfolio for school (I am a developer on Mediacollege Amsterdam) and I need help with my css. I have searched for answers, but I cannot get my page as desired. I have 3 divs, i want 2 of them to be next to each other and the third one below the first one, how would I do that?
I want the picture where it's at and I want the block that starts with "my tasks" where it is, but I want the block that starts with "About the game" positioned directly underneath the image
This is how I have the divs sorted, the div gameplay is the video, the div info is the "my tasks" block and the about div is the "about the game" block.
<div class="item">
<div class="legend">Fear The Blue</div>
<div class="content">
<div class="gameplay">
<video autoplay loop muted>
<source src="resources/video/portfolioVideos/FTB.webm" type="video/webm" />
<source src="resources/video/portfolioVideos/FTB.mp4" type="video/mp4" />
Video not available :(
</video>
</div>
<div class="info">
<span class="tit">My tasks:</span>
<ul>
<li>Puzzle logic</li>
<li>First puzzle</li>
<li>Second puzzle</li>
<li>Audio Manager</li>
<li>Controller support</li>
<li>Inventory</li>
<li>Outline Shader</li>
<li>Movement</li>
<li>Start menu</li>
<li>VR support</li>
<li>Keypad logic</li>
<li>Performance improvements</li>
<li>Door/teleport logic</li>
</ul>
<span class="tit">Engine:</span> Unity3D
<br />
<span class="tit">Language:</span> C#
<br />
<span class="tit">team:</span>
<ul>
<li>2 programmers</li>
<li>3 artists</li>
<li>2 mediamanagers</li>
</ul>
</div>
<div class="about">
<span class="tit">About the game:</span>
<ul>
<li>Single player puzzle game</li>
<li>Oculus support</li>
<li>Best played with controller</li>
</ul>
I've chosen to put this game on my portfolio, because this is my first oculus game. I am also proud of my audiomanager class, inventory class and the endproduct.
</div>
</div>
<div class="foot">
<img class="git" src="resources/images/resources/GithubIcon.png" />
<!--<img class="trailer" src="Images/resources/filmklapper.png"/>-->
<a><img class="game" src="resources/images/resources/controller.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac.zip" web="SchoolFiles/IDP/FearTheBlue/web-build/FearTheBlue.html" /></a>
<a><img class="game" src="resources/images/resources/oculus.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win_Oculus.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac_Oculus.zip" /></a>
</div>
</div>
My full css:
.item
{
font-family: normalFont, sans-serif;
margin: 0.9em auto 0.5em auto;
background-color: #222222;
border-radius: 1em;
display: block;
color: white;
width: 95%;
}
.item .legend
{
font-family: headerFont, sans-serif;
border-top-right-radius: .5em;
border-top-left-radius: .5em;
padding: 0.2em 0 0.2em 0.4em;
background-color: #4CAF50;
font-size: 1.2em;
}
.item .content{padding: .5em;}
.item .gameplay
{
max-width: 100%;
display: block;
margin: 0 auto;
}
.item .gameplay video{width: 100%;}
.item .gameplay img{width: 100%;}
.item .info
{
text-align: left;
display: block;
height: auto;
}
.item .info :visited,
.item .info a:link
{
text-decoration: none;
color: darkorange;
}
.item .info a:hover
{
text-decoration: underline;
color: lightblue;
}
.tit{color: #4CAF50;}
.item ul
{
padding: 0 0 0 1em;
margin: 0;
}
.item li{list-style-type: "- ";}
.item .foot
{
border-radius: 0;
border-bottom-right-radius: .5em;
border-bottom-left-radius: .5em;
background-color: #4CAF50;
width: 100%;
height: 2em;
}
.item .foot a
{
margin: 0.05em 0 0 0.6em;
display: inline-block;
width: 30px;
float: left;
}
.item .foot img
{
cursor: pointer;
width: 100%;
}
.item .foot .game, .item .foot .git{margin-top: 1px;}
#popup .message
{
text-align: center;
margin: 1em;
}
#popup
{
width:11em;
border-radius: .5em;
outline:none;
height:7em;
background-size: 100% 100%;
background-color: #333;
z-index:2;
position:absolute;
margin:0 0 0 -4.56em;
}
.input-group
{
width: 85% !important;
margin: .5em auto !important;
}
.input-field
{
background-color: #222 !important;
border: 1px solid #111 !important;
}
.input-field:hover
{
background-color: #111 !important;
}
.icon-background
{
border: 1px solid #111 !important;
}
#media screen and (min-width:600px){.item{width: 80%;}}
#media screen and (min-width:1000px)
{
.item{width: 60%;}
.item .legend{font-size: 2em;}
.item .gameplay
{
display: inline-block;
margin-top: .3em;
width: 25em;
float: left;
}
.item .about
{
width: 20em;
}
.item .info
{
display: inline-block;
margin: 0 0 0 1em;
max-width: 40%;
}
}
regards,
Dani
Try removing the property
float:left for the image div
Or you can put the two divs that want to be one below the other in one big div and the div you want at right outside in a different div.
From the information you provided, I think you're trying to make a 2 column layout. If you're floating all of your div containers to the left, since you added your "about" div last in your html and because your 2 first div's take up the full width of the container, your third div will be positioned below the div with the greatest height. If you want to avoid this You should use 2 divs (one for each column). Float them both left and add your content inside your respective columns.
.container {
position: relative;
width:100%;
}
.col1{
position: relative;
float:left;
width:60%;
}
.col2 {
position: relative;
float: left;
width: 40%;
}
img {
max-width:100%;
}
<div class="container">
<div class="col1">
<div class="image">
<img src="http://www.telegraph.co.uk/content/dam/pets/2016/03/18/bunny-large_trans_NvBQzQNjv4BqqVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg" />
</div>
<div class="about">
bla bla bla
</div>
</div>
<div class="col2">Cras quis venenatis est, in pretium eros. Duis a rutrum sem, ac ultricies nunc. Nulla non placerat turpis, a elementum lorem. Duis porttitor, tortor eu congue feugiat, arcu dolor pellentesque ante, sit amet ullamcorper mauris elit quis dui. Suspendisse sem lacus, viverra eget nunc id, ornare volutpat eros. Aliquam erat volutpat. Maecenas eu efficitur neque. Curabitur tortor ex, dictum tempor neque vitae, semper suscipit arcu. In at velit non velit molestie fringilla nec a nunc. Integer et tincidunt risus. Integer finibus, arcu eu hendrerit tincidunt, ante urna vestibulum ante, sit amet accumsan turpis purus id arcu. Curabitur non aliquet sapien, malesuada imperdiet orci. Sed posuere lectus ac nulla viverra, consequat semper lorem commodo. In fermentum nisl lacus, non congue velit sagittis sit amet. Phasellus mollis diam mi, id mollis lectus imperdiet ut. Mauris egestas neque urna, vehicula cursus nisi auctor vitae.
Aliquam ornare vitae urna auctor pretium. Ut vestibulum suscipit volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras viverra lorem non ex maximus, tempus gravida justo tempus. Pellentesque fermentum volutpat tortor ut pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur mattis tortor. Fusce et lectus pulvinar, sollicitudin leo interdum, molestie risus. Nullam non consectetur arcu. Phasellus congue, eros vel euismod pulvinar, erat ex viverra velit, vitae bibendum arcu odio in dolor. Maecenas efficitur massa faucibus pretium accumsan. Duis id suscipit neque.
Nulla pulvinar tempus dui, vitae pellentesque orci dapibus id. Nullam hendrerit egestas dui. Nullam tempus mattis dui. Proin in rutrum purus. Vivamus tempor justo mauris, non bibendum dui luctus ac. Nunc vulputate libero velit, sed auctor nulla mattis ut. Nullam finibus mollis ante eget rhoncus. Suspendisse at purus ante. Vivamus tristique felis eu quam pulvinar, nec viverra quam porta. Phasellus gravida enim non sem facilisis maximus. In varius ac lacus nec convallis. Quisque molestie commodo mi in fermentum.
</div>
</div>
This is very basic CSS and I'm sure if you google enough you will find other grid methods (as mentioned above) that will make your layouts a whole lot easier. Hope this helps.
From my code and logic, everything seems right. Why on earth would my news DIV overflow onto my Box D, where all the buttons are. It just doesn't make any sense to me.
Here is a pic of the problem:
* {
font-family: Segoe UI;
font-size: 9pt;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
background-color: #bbc3cb;
width: 100%;
height: 100%;
}
#main {
border: 1px solid rgb(112, 112, 112);
width: 800px;
height: 650px;
margin: 0 auto;
}
#boxA {
padding-top: 7px;
padding-bottom: 7px;
padding-left: 3px;
border-bottom: 1px solid rgb(180, 180, 180);
background: #FFF;
}
#boxB {
height: 573px;
width: 200px;
border: 0;
float: left;
background: #FFF;
}
#boxC {
background: rgb(240, 240, 240);
height: 573px;
width: 598px;
border-left: 1px solid rgb(180, 180, 180);
border-top: 0;
border-bottom: 0;
border-right: 0;
display: inline-block;
}
#boxD {
background: rgb(240, 240, 240);
border-top: 1px solid rgb(180, 180, 180);
height: 44px;
text-align: center;
display: table;
width: 100%;
;
}
#menu {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
padding: 4px;
border: 1px solid #FFF;
}
#menu li:hover {
cursor: pointer;
}
.selected {
background: rgb(51, 153, 255);
color: #FFF;
border: 1px solid #FFF;
font-weight: bold;
}
.hidden {
display: none;
}
.item {
width: 100%;
height: 100%;
}
input[type="button"] {
cursor: pointer;
border: 1px solid #707070;
background-color: #F0F0F0;
border-radius: 4px;
box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%);
padding: 3px 6px;
width: 75px;
}
input[type="button"]:hover {
cursor: pointer;
background-color: #EAF6FD;
border: 1px solid #3C7FB1;
box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
}
input[type="button"][disabled],
input[type="button"][disabled]:hover {
border: 1px solid #ADB2B5;
text-shadow: 1px 1px #fff;
cursor: default;
background-color: #F4F4F4;
box-shadow: inset 0 1px 2px #fff;
}
div.frameT {
width: 100%;
padding: 0;
display: table;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
div.frameTC {
padding: 0;
vertical-align: middle;
display: table-cell;
margin: 0;
}
.section-title {
padding: 0;
margin: 0;
color: rgb(11, 63, 113);
font-weight: bold;
}
#news {
overflow-y: scroll;
height: 100%;
margin-bottom: 5px;
border: 1px solid red;
display: block;
}
<div class="frameT">
<div class="frameTC">
<div id="main">
<div id="boxA"><b>Application Title</b>
</div>
<div id="boxB">
<ul id="menu">
<li data-show="#1">Notes and Updates</li>
<li data-show="#2">Menu Item 2</li>
<li data-show="#3">Menu Item 3</li>
</ul>
</div>
<div id="boxC">
<div id="1" class="hidden item">
<span class="section-title">Notes and Updates</span>
<br>
<div id="news"></div>
</div>
<div id="2" class="hidden item">
Content Tab 2
</div>
<div id="3" class="hidden item">
Content Tab 3
</div>
</div>
<div id="boxD">
<div style="display: table-cell; vertical-align: middle;">
<input type="button" value="Search" class="btn" disabled>
<input type="button" value="Save" class="btn" disabled>
<input type="button" value="Add" class="btn" disabled>
<input type="button" value="Clear All" class="btn">
<input type="button" value="Delete" class="btn" disabled>
<input type="button" value="Export" class="btn" disabled>
<input type="button" value="Recall" class="btn" disabled>
</div>
</div>
<!-- End of Main -->
</div>
</div>
Height and width are always relative to the parent. In this case, your news div will be as tall as boxC. Since you have a title above, the height of this section will be 100% of the parent for news + ~20px for your title.
My suggestion is to set a specific height to your title using display:inline-block and height:20px like this:
.section-title {
padding: 0;
margin: 0;
color: rgb(11, 63, 113);
font-weight: bold;
height: 20px;
display: inline-block;
}
So you know exactly which size it will be on every browsers. Now you can use CSS3 calc function to determine the height of your box like this height:calc(100% - 20px):
#news {
overflow-y: scroll;
height: calc(100% - 20px);
margin-bottom: 5px;
border: 1px solid red;
display: block;
}
You can see this fiddle
Your news div is 100% but you also have this:
<span class="section-title">Notes and Updates</span>
which is taking up some space. You could resize the news div (make is smaller), maybe have the tag in another div that's 10% and make the news div 90%
ETA - or you might want to set the container div overflow-y property to hidden or scroll.
It's simple, just use overflow:auto to do this. Look your example:
* {
font-family: Segoe UI;
font-size: 9pt;
box-sizing: border-box;
}
html {
height:100%;
}
body {
padding: 0;
margin: 0;
background-color: #bbc3cb;
width: 100%;
height: 100%;
}
#main {
border: 1px solid rgb(112,112,112);
width: 800px;
height: 650px;
margin: 0 auto;
}
#boxA {
padding-top: 7px;
padding-bottom: 7px;
padding-left: 3px;
border-bottom: 1px solid rgb(180,180,180);
background: #FFF;
}
#boxB {
height: 573px;
width: 200px;
border: 0;
float: left;
background: #FFF;
}
#boxC {
background: rgb(240,240,240);
max-height: 573px;
width: 598px;
border-left: 1px solid rgb(180,180,180);
border-top: 0;
border-bottom: 0;
border-right: 0;
display: inline-block;
overflow:auto;
}
#boxD {
background: rgb(240,240,240);
border-top: 1px solid rgb(180,180,180);
height: 44px;
text-align: center;
display: table;
width: 100%;;
}
#menu {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
padding: 4px;
border: 1px solid #FFF;
}
#menu li:hover {
cursor: pointer;
}
.selected {
background: rgb(51,153,255);
color: #FFF;
border: 1px solid #FFF;
font-weight: bold;
}
.hidden{ display:none; }
.item {
width: 100%;
height: 100%;
}
input[type="button"]
{
cursor:pointer;
border: 1px solid #707070;
background-color: #F0F0F0;
border-radius: 4px;
box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%);
padding: 3px 6px;
width: 75px;
}
input[type="button"]:hover
{
cursor:pointer;
background-color: #EAF6FD;
border: 1px solid #3C7FB1;
box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
}
input[type="button"][disabled], input[type="button"][disabled]:hover
{
border: 1px solid #ADB2B5;
text-shadow: 1px 1px #fff;
cursor:default;
background-color: #F4F4F4;
box-shadow: inset 0 1px 2px #fff;
}
div.frameT {
width: 100%;
padding: 0;
display: table;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
div.frameTC {
padding: 0;
vertical-align: middle;
display: table-cell;
margin: 0;
}
.section-title {
padding:0;
margin:0;
color: rgb(11,63,113);
font-weight: bold;
}
#news {
overflow-y: scroll;
height: 100%;
margin-bottom: 5px;
border: 1px solid red;
display: block;
}
<div class="frameT">
<div class="frameTC">
<div id="main">
<div id="boxA"><b>Application Title</b></div>
<div id="boxB">
<ul id="menu">
<li data-show="#1">Notes and Updates</li>
<li data-show="#2">Menu Item 2</li>
<li data-show="#3">Menu Item 3</li>
</ul>
</div>
<div id="boxC">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac blandit sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis lectus vel pharetra tempus. Nulla sagittis enim mauris, vel imperdiet purus lobortis et. Nullam laoreet neque eget lectus finibus mattis. Cras sagittis, tortor vel vehicula placerat, dui sem imperdiet lectus, sit amet ultricies ante est nec elit. Sed consectetur lobortis dui non dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur elit dui, laoreet in orci et, feugiat malesuada quam. Pellentesque hendrerit diam et leo blandit, non tristique nisi blandit. Praesent ac sem quis turpis euismod malesuada et non justo. Quisque in diam risus. Donec eget sapien at libero ullamcorper sagittis. Integer nunc dolor, suscipit nec tincidunt quis, varius vitae mauris. Quisque malesuada enim ut semper tincidunt.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat ullamcorper iaculis. Donec sit amet turpis eu dui eleifend cursus eget a ante. Vivamus nec ligula a nunc consequat luctus a in libero. Nunc eu felis vel ante pellentesque aliquam eu sed augue. Mauris nec mi sit amet quam euismod pulvinar. Donec euismod sollicitudin bibendum. Maecenas accumsan neque vel pulvinar tempor. Morbi sit amet dolor pellentesque, vehicula lectus sit amet, accumsan mauris. Sed aliquam mi imperdiet quam scelerisque, et euismod felis auctor. Curabitur sit amet eros leo.
Duis placerat, ipsum quis lacinia tempus, purus dolor congue quam, eu tempor orci augue et libero. Curabitur ut ullamcorper mauris, tristique sollicitudin nisi. Ut est dolor, varius id tellus a, sagittis eleifend libero. Fusce gravida scelerisque facilisis. Aenean sollicitudin dolor in ante porttitor, ut finibus felis maximus. Morbi aliquet risus lectus. Pellentesque tincidunt enim quis cursus rutrum. Pellentesque at placerat enim, id consequat ex. Praesent justo magna, fermentum non erat in, aliquam euismod velit. Nulla facilisi. Donec mi nulla, bibendum vel nibh varius, consectetur vestibulum nunc. Vestibulum suscipit mollis efficitur.
Nunc dapibus eget nunc non feugiat. Etiam dictum nulla sed gravida volutpat. Quisque non metus tristique, accumsan tortor sed, sollicitudin lorem. Suspendisse facilisis suscipit lacus fringilla pulvinar. Suspendisse placerat condimentum justo, vel mollis ante lacinia non. Sed tempus elementum ligula, pulvinar accumsan justo viverra eu. Suspendisse justo massa, elementum nec hendrerit a, congue nec arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac blandit sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis lectus vel pharetra tempus. Nulla sagittis enim mauris, vel imperdiet purus lobortis et. Nullam laoreet neque eget lectus finibus mattis. Cras sagittis, tortor vel vehicula placerat, dui sem imperdiet lectus, sit amet ultricies ante est nec elit. Sed consectetur lobortis dui non dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur elit dui, laoreet in orci et, feugiat malesuada quam. Pellentesque hendrerit diam et leo blandit, non tristique nisi blandit. Praesent ac sem quis turpis euismod malesuada et non justo. Quisque in diam risus. Donec eget sapien at libero ullamcorper sagittis. Integer nunc dolor, suscipit nec tincidunt quis, varius vitae mauris. Quisque malesuada enim ut semper tincidunt.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat ullamcorper iaculis. Donec sit amet turpis eu dui eleifend cursus eget a ante. Vivamus nec ligula a nunc consequat luctus a in libero. Nunc eu felis vel ante pellentesque aliquam eu sed augue. Mauris nec mi sit amet quam euismod pulvinar. Donec euismod sollicitudin bibendum. Maecenas accumsan neque vel pulvinar tempor. Morbi sit amet dolor pellentesque, vehicula lectus sit amet, accumsan mauris. Sed aliquam mi imperdiet quam scelerisque, et euismod felis auctor. Curabitur sit amet eros leo.
Duis placerat, ipsum quis lacinia tempus, purus dolor congue quam, eu tempor orci augue et libero. Curabitur ut ullamcorper mauris, tristique sollicitudin nisi. Ut est dolor, varius id tellus a, sagittis eleifend libero. Fusce gravida scelerisque facilisis. Aenean sollicitudin dolor in ante porttitor, ut finibus felis maximus. Morbi aliquet risus lectus. Pellentesque tincidunt enim quis cursus rutrum. Pellentesque at placerat enim, id consequat ex. Praesent justo magna, fermentum non erat in, aliquam euismod velit. Nulla facilisi. Donec mi nulla, bibendum vel nibh varius, consectetur vestibulum nunc. Vestibulum suscipit mollis efficitur.
Nunc dapibus eget nunc non feugiat. Etiam dictum nulla sed gravida volutpat. Quisque non metus tristique, accumsan tortor sed, sollicitudin lorem. Suspendisse facilisis suscipit lacus fringilla pulvinar. Suspendisse placerat condimentum justo, vel mollis ante lacinia non. Sed tempus elementum ligula, pulvinar accumsan justo viverra eu. Suspendisse justo massa, elementum nec hendrerit a, congue nec arcu.
<div id="1" class="hidden item">
<span class="section-title">Notes and Updates</span>
<br>
<div id="news"></div>
</div>
<div id="2" class="hidden item">
Content Tab 2
</div>
<div id="3" class="hidden item">
Content Tab 3
</div>
</div>
<div id="boxD">
<div style="display: table-cell; vertical-align: middle;">
<input type="button" value="Search" class="btn" disabled>
<input type="button" value="Save" class="btn" disabled>
<input type="button" value="Add" class="btn" disabled>
<input type="button" value="Clear All" class="btn">
<input type="button" value="Delete" class="btn" disabled>
<input type="button" value="Export" class="btn" disabled>
<input type="button" value="Recall" class="btn" disabled>
</div>
</div><!-- End of Main -->
</div>
</div>
i am having trouble sorting out my layout for my website, basically the footer at the bottom is being overlayed by the content above it and i cant figure out what is causing this.
Here is the - https://jsfiddle.net/2py4tus9/4/
Thanks for your help
Here is the html
html,
body {
height: 100%;
width: 100%;
min-width: 1000px;
margin: 0px;
padding: 0px;
background-color: #f0f0f0;
overflow: auto;
}
#indexWrapper {
width: 100%;
height: 100%;
background-color: #9f1717;
margin-bottom: 100px;
}
#mainContentWrapper {
width: 100%;
height: 100%;
height: auto;
/* position: absolute;*/
min-height: 100%;
/* min-height: 1000px;*/
margin-top: -20px;
/* background-color: #fafafa;*/
background-color: palevioletred;
}
/*----- Tabs -----*/
.tabs {
position: relative;
width: 100%;
height: 100%;
background-color: greenyellow;
display: inline-block;
}
/*----- Content of Tabs -----*/
.tab-content {
float: left;
height: auto;
width: 100%;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
/* background:#fff;*/
background-color: blue;
}
.tab {
display: none;
}
.tab.active {
display: block;
}
.tabContentBox {
width: 50%;
height: auto;
clear: both;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
}
.tabElementBox {
height: auto;
border-bottom: 4px solid #eee;
padding: 30px;
}
.footerWrapper {
width: 100%;
height: 100px;
background-color: gold;
}
<div id="indexWrapper">
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<div id="mainContentWrapper">
<div class="tabContentBox">
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
</div>
<!--end tabContentBox-->
</div>
<!--end mainContentWrapper-->
</div>
<!--tab-->
</div>
<!--end tab-content-->
</div>
<!--end tabs-->
<div class="footerWrapper"></div>
<!--end footerWrapper-->
</div>
<!-- end indexWrapper-->
Remove height:100% from your tabs class.
.tabs {
position: relative;
width:100%;
/*height: 100%;*/
background-color: greenyellow;
display:inline-block;
}
DEMO
Your body element is set to width 100% and height 100% this is makes your page align to the viewport.
So removing the height and width makes the content scale more reasonably.
This also causes the the elements to expend the content on body so that they don't overlap.
I believe this is what happened with your footer.
html,
body {
min-width: 1000px;
margin: 0px;
padding: 0px;
background-color: #f0f0f0;
overflow: auto;
}
#indexWrapper {
width: 100%;
height: 100%;
background-color: #9f1717;
margin-bottom: 100px;
}
#mainContentWrapper {
width: 100%;
height: 100%;
height: auto;
/* position: absolute;*/
min-height: 100%;
/* min-height: 1000px;*/
margin-top: -20px;
/* background-color: #fafafa;*/
background-color: palevioletred;
}
/*----- Tabs -----*/
.tabs {
position: relative;
width: 100%;
height: 100%;
background-color: greenyellow;
display: inline-block;
}
/*----- Content of Tabs -----*/
.tab-content {
float: left;
height: auto;
width: 100%;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
/* background:#fff;*/
background-color: blue;
}
.tab {
display: none;
}
.tab.active {
display: block;
}
.tabContentBox {
width: 50%;
height: auto;
clear: both;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
}
.tabElementBox {
height: auto;
border-bottom: 4px solid #eee;
padding: 30px;
}
.footerWrapper {
width: 100%;
height: 100px;
background-color: gold;
}
<div id="indexWrapper">
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<div id="mainContentWrapper">
<div class="tabContentBox">
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
</div>
<!--end tabContentBox-->
</div>
<!--end mainContentWrapper-->
</div>
<!--tab-->
</div>
<!--end tab-content-->
</div>
<!--end tabs-->
<div class="footerWrapper"></div>
<!--end footerWrapper-->
</div>
<!-- end indexWrapper-->
The idea to develop my own blog's theme just poped into my mind, probably I enjoy making my own things, but I have very little experience in CSS and HTML, so I've run into some weird problems already.
Actually, it's about the footer. I've written a large piece of code and now I'm trying to trace back the problem, but no results yet. I've used the search here, analyzed some of the similar problems, still no result. Even wrapped everything still nothing.
What I'm trying is to make footer appear at the very bottom of the page content but it always pops on the bottom of the browser's window (somewhere in the middle of the content). Could you guys take a look at the code - I'd really appreciate help, because I've heard there are some good coders slash helpers here.
Please, do not take me as an idiot or something like that. Newbie, that's who I am! Just that.
Styles.css
h
tml{
min-height: 100%;
}
body {
margin: 0;
padding: 0;
font: 16px Georgia;
line-height:25.88854px;
color:#222222;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#footeris {
position: absolute;
bottom:-20px;
height: 100px;
min-width: 100%;
background: #00a651;
}
#blogheader {
min-width: 100%;
height: 55px;
background: #00a651;
position: fixed;
z-index:3;
}
#menu {
width: 900px;
height: 55px;
background: #00a651;
display: block;
margin: auto;
}
#social {
width: 200px;
height: 55px;
display: block;
float: right;
margin: auto;
}
#twitter {
margin-top:12px;
margin-right: 15px;
float: right;
}
#twitter:hover
{
margin-top:15px;
}
#googleplus:hover
{
margin-top:15px;
}
#youtube:hover
{
margin-top:15px;
}
#googleplus {
margin-top:12px;
margin-right: 15px;
float: right;
}
#youtube {
margin-top:12px;
margin-right: 15px;
float: right;
}
#menubutton1 {
display:inline-block;
height:55px;
background: #00a651;
}
#menubutton1:hover
{
background-color:#000000;
}
#navigacija {
width: 600px;
height:55px;
float: left;
padding:0;
}
#navigacija li {
display:inline;
}
#navigacija li a {
font-family:Arial;
font-size:20px;
font-weight: bold;
text-decoration: none;
letter-spacing: 1.5px;
padding-top:100%;
padding-bottom:14px;
padding-left:18px;
padding-right:18px;
background-color: #00a651;
color:#ffffff;
}
#navigacija li a:hover {
background-color:#000000;
}
#name {
position:relative
color: #FFFFFF;
padding-top: 18px;
padding-left: 9px;
padding-right: 9px;
height:55px;
}
#name a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
#line {
margin-left: auto;
margin-right: auto;
height: 7px;
background: #C9C9C7;
}
#blogbody {
width: 1024px;
min-height:100%;
margin-left: auto;
margin-right: auto;
padding-bottom:60px;
z-index:2;
}
#myinfo {
float: right;
max-width: 300px;
background: #DDE3DC;
z-index: 1;
border-bottom: 2px solid #cccccc;
display:inline-block;
}
#myinfotext {
margin-bottom: 20px;
font: 17px Georgia;
line-height:25.88854px;
color:#222222;
text-align:left;
padding-left:40px;
}
a {
color: #00a651;
text-decoration: none;
}
h1 {
font-size: 25px;
font-weight:normal;
font-family: Helvetica Neue;
color: #474A46;
}
#me {
margin-left:auto;
margin-right:auto;
background: url(images/me.png) no-repeat;
width: 120px;
height: 120px;
}
#content {
width: 615px;
float: left;
margin-top: 55px;
min-height:100%;
}
#blogprojects {
width: 615px;
height: 200px;
display: block;
float: left;
padding: 20px;
border-bottom: 1px solid #cccccc;
}
#newsfeed {
width: 615px;
float: left;
padding: 20px;
padding-top: 15px;
}
#blogpost {
width: 615px;
float: left;
padding: 20px;
}
#blogsidebar {
width: 300px;
min-height: 100%;
background: #DDE3DC;
display: block;
float: right;
border-left: 2px dashed #cccccc;
padding: 25px;
margin-top: 55px;
z-index:1;
}
#blogwidget {
margin-top: 20px;
width: 300px;
display:inline-block;
border-bottom: 2px solid #cccccc;
}
#blogwidgetcontent {
margin-bottom: 20px;
}
HTML Code
<!DOCTYPE HTML>
<html>
<head>
<title>Lukas Valatka Blog</title>
<link rel="stylesheet" href="styles.css">
</link>
</head>
<body>
<div id="wrapper">
<div id="blogheader">
<div id="menu">
<div id="navigacija">
<ul id="navigacija">
<li>POSTS</li>
<li>About</li>
<li>About</li>
</ul>
</div>
<div id="social">
<div id="twitter">
<img src="images/social/twitter.png" alt="Twitter" >
</div>
<div id="googleplus">
<img src="images/social/googleplus.png" alt="Google Plus" >
</div>
<div id="youtube">
<img src="images/social/youtube.png" alt="Youtube" >
</div>
</div>
</div>
<div id="line">
</div>
</div>
<div id="blogbody">
<div id="content">
<div id="blogprojects">
<h1>Recent Projects</h1>
test
</div>
<div id="linijele">
</div>
<div id="newsfeed">
<h1>What's Going On</h1>
<div id="blogpost">
<h2>Test</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus, ante at gravida condimentum, nibh eros bibendum dolor, non aliquam augue velit sit amet lectus. Phasellus pellentesque diam quis metus fermentum sollicitudin. Suspendisse suscipit, enim quis ultricies congue, lectus sem luctus orci, non lacinia nunc ante non augue. Praesent at ante lectus. In quam magna, eleifend ornare facilisis sed, dignissim a nunc. Nullam ultricies vulputate lorem nec sagittis. Nullam vulputate nisi vel lorem pharetra volutpat. Suspendisse dui est, consectetur malesuada consequat nec, egestas et lorem. Nulla facilisi. Maecenas eleifend pulvinar tincidunt. Donec eu orci at libero ultricies ornare. Suspendisse potenti. Nullam tortor ante, rutrum ut sollicitudin at, pulvinar vel orci. Sed semper sem tincidunt urna cursus et ultrices tortor aliquet. Vestibulum pellentesque arcu dictum nisl mollis auctor.
Proin ut vehicula risus. Nulla ut urna sit amet neque commodo venenatis. Nulla hendrerit tincidunt tellus, congue convallis orci porta non. Nam sollicitudin ultricies dui, id dignissim odio tempus eu. Fusce viverra condimentum euismod. Suspendisse mauris magna, pulvinar venenatis porttitor id, interdum a purus. Donec nisi augue, semper eu fermentum ac, blandit at justo. Phasellus aliquet ultrices dapibus. Donec nibh libero, tempus ut pellentesque a, aliquet ut libero. In hac habitasse platea dictumst. Nam eget nunc lectus, in commodo odio.
Nulla a justo nunc, quis sollicitudin ante. Proin mi magna, tempor sit amet porttitor volutpat, luctus eu sem. Vestibulum porttitor arcu eget magna vulputate quis laoreet massa mollis. Maecenas justo nibh, ornare elementum ornare quis, aliquam sit amet velit. Cras hendrerit consequat viverra. Aenean eget libero at urna viverra rutrum. Fusce eleifend tincidunt dignissim. Nam pellentesque aliquam lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Etiam massa nisl, luctus sollicitudin congue non, suscipit ac justo. Morbi pretium elementum urna, et dignissim lectus viverra vel. Duis sit amet massa felis, ut consequat dolor. Nullam in justo lectus, id rutrum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent fringilla urna rutrum orci dignissim a mollis leo varius. Vivamus accumsan neque a nisl ornare vel ultricies eros ultrices. Quisque nec odio non libero pellentesque molestie in ut quam. Phasellus feugiat consequat nunc, commodo venenatis tortor volutpat eget. Curabitur tristique posuere mollis. Quisque sit amet lacus nec elit fermentum laoreet sed vitae neque. Sed sem leo, fermentum eu sagittis in, auctor eget lacus. Duis lacus orci, semper vitae faucibus vitae, bibendum ac augue. Curabitur at felis ac mi dictum adipiscing.
</div>
</div>
</div>
<div id="blogsidebar">
<div id="myinfo">
<div id="me">
</div>
<center>
<h1>
L
</h1>
<div id="myinfotext">
Hey
</div>
</center>
</div>
<div id="blogwidget">
<div id="blogwidgetcontent">
<h1>
Latest Tweets
</h1>
<a class="twitter-timeline" data-tweet-limit="3" href="https://twitter.com/" data-widget-id="3168357470">Tweets by #L</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
</div>
<div id="footeris">Copyright 2013.</div>
</div>
</body>
</html>
An easy solution is to use floats, and clear it if needed.
Lets say you got 4 div's, a header, content, sidebar and footer:
.header { width:100%; height:100px; float:left; }
.content { width:65%; float:left; }
.sidebar { width:35%; float:right; }
.footer { width:100%; float:left; clear:both; }
Use the Chrome console (rightclick-inspect element) to see what is happening and adjust where needed if you're unsure.