I build a web page on a 1366 * 768 resolution PC. I used percentage and px to adjust distance etc. But after competition when I ran it into 1920*1080 resolution then everything just jumbled up.
So, how to manage CSS so that it runs without distortion on any PC with any resolution.
<html>
<head>
<title>About US..</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/about.js"></script>
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/about.css">
</head>
<body>
<div class="main">
<div class="header">
<div class="header1">
</div>
<div class="left">
</div>
<a href="index.html"><div class="left1">
</div></a>
<div class="left2">
In a Nut Shell..
</div>
<a href="about.html" id="left1a"><div class="left3">
About Us
</div></a>
<a href="contact.html" id="left1b"><div class="left4">
Contact Us
</div></a>
</div>
<div class="content">
Meet developers Of "In a Nut Shell.."<br>
<div class="geetika">
<div id="top">
<div id="circle">
</div>
</div>
<div id="bottom"><br>
<font color="black">Geetika</font><br>
<p>I am currently Pursuing My Btech From KIIT University. Have a lot Of interest in Website Designing and other Stuff<p>
<br><br><br>
Click to know more
</div>
</div>
<div class="nikhil">
<div id="top">
<div id="circle">
</div>
</div>
<div id="bottom"><br>
<font color="black">Nikhil Srivastava</font><br>
<p>I am currently Pursuing My Btech From KIIT University. Have a lot Of interest in Website Designing and other Stuff<p>
<br><br><br>
<a href="#" id="nik1" >Wanna Know More ;)</a>
</div>
</div>
<div class="sumegha">
<div id="top">
<div id="circle">
</div>
</div>
<div id="bottom"><br>
<font color="black">Sumegha Mukherjee</font><br>
<p>I am currently Pursuing My Btech From KIIT University. Have a lot Of interest in Website Designing and other Stuff<p>
<br><br><br>
Click to know more
</div>
</div>
<div class="nikdetail">
Nikhil Srivastava
<div id="banner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis iaculis lectus vitae finibus. Sed ac turpis at eros semper interdum et et sem. Pellentesque convallis dictum ligula, et luctus dolor tristique vel. Fusce non augue in risus venenatis fermentum quis eu purus. Ut dictum tincidunt est, eu commodo orci hendrerit ultrices. Phasellus fermentum metus a purus finibus, et sagittis lacus placerat. Integer rutrum, sapien et efficitur fringilla, metus elit scelerisque turpis, et iaculis massa lacus ut odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula pretium ligula vitae mollis. Vestibulum sed sem ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris rutrum turpis eget pulvinar vulputate. Vestibulum consectetur vulputate egestas. Sed dictum, augue in volutpat aliquam, ante nisi eleifend massa, non tempus dui leo eu odio.
</p>
<br><br><br>
Go Back
</div>
</div>
<div class="geetdetail">
Geetika
<div id="banner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis iaculis lectus vitae finibus. Sed ac turpis at eros semper interdum et et sem. Pellentesque convallis dictum ligula, et luctus dolor tristique vel. Fusce non augue in risus venenatis fermentum quis eu purus. Ut dictum tincidunt est, eu commodo orci hendrerit ultrices. Phasellus fermentum metus a purus finibus, et sagittis lacus placerat. Integer rutrum, sapien et efficitur fringilla, metus elit scelerisque turpis, et iaculis massa lacus ut odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula pretium ligula vitae mollis. Vestibulum sed sem ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris rutrum turpis eget pulvinar vulputate. Vestibulum consectetur vulputate egestas. Sed dictum, augue in volutpat aliquam, ante nisi eleifend massa, non tempus dui leo eu odio.
</p>
<br><br><br>
Go Back
</div>
</div>
<div class="sumeghadetail">
Sumegha Mukherjee
<div id="banner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis iaculis lectus vitae finibus. Sed ac turpis at eros semper interdum et et sem. Pellentesque convallis dictum ligula, et luctus dolor tristique vel. Fusce non augue in risus venenatis fermentum quis eu purus. Ut dictum tincidunt est, eu commodo orci hendrerit ultrices. Phasellus fermentum metus a purus finibus, et sagittis lacus placerat. Integer rutrum, sapien et efficitur fringilla, metus elit scelerisque turpis, et iaculis massa lacus ut odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula pretium ligula vitae mollis. Vestibulum sed sem ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris rutrum turpis eget pulvinar vulputate. Vestibulum consectetur vulputate egestas. Sed dictum, augue in volutpat aliquam, ante nisi eleifend massa, non tempus dui leo eu odio.
</p>
<br><br><br>
Go Back
</div>
</div>
</div>
</div>
</body>
</html>
and CSS:
body{
background: #BDBDBD;
}
.main{
width: 100%;
height: 100%;
}
.header {
width:100%;
height:5%;
z-index: 10;
float: left;
}
.header1 {
z-index: 10;
position: fixed;
width: 100%;
background-image: url("../img/w3.jpg");
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
float: left;
height: inherit;
margin-top: -8px;
margin-left:-8px;
}
.left{
float:left;
z-index: 9999;
font-size: 30px;
font-family: cursive;
color: white;
height: 40px;
width: 30%;
}
.left1{
position: fixed;
float:left;
z-index: 9999;
font-size: 30px;
font-family: cursive;
color: white;
height: 40px;
background-image: url("../img/favicon.ico");
background-repeat: no-repeat;
background-size: 45px 34px;
width: 40px;
margin-left: 10%;
margin-top: -5px;
}
.left2{
position: fixed;
float:left;
z-index: 11;
z-index: 9999;
font-size: 35px;
font-family: buxton sketch;
color: white;
margin-left: 15%;
margin-top: -5px;
}
.left3{
position: fixed;
float:left;
z-index: 9999;
font-size: 20px;
font-family: cursive;
color: white;
float: left;
margin-left: 70%;
width: 100px;
padding-left: 5px;
}
.left4{
position: fixed;
float:left;
z-index: 11;
font-size: 20px;
font-family: cursive;
color: white;
margin-left: 80%;
width: 110px;
padding-left: 5px;
}
.content{
background: -webkit-linear-gradient(#BDBDBD, #FBEFFB);
background: -o-linear-gradient(#99390D, #D25318);
background: -moz-linear-gradient(#99390D, #D25318);
background: linear-gradient(#BDBDBD, #FBEFFB);
width: auto;
height: inherit;
margin-right: -8px;
margin-left: -8px;
padding-bottom: 8px;
font-size: 35px;
text-align: center;
font-family: buxton sketch;
color: black;
}
.nikhil{
float: left;
width:250px;
height: 500px;
margin-top: 25px;
margin-left: 50px;
background-color:rgba(0,0,0,0.1);
box-shadow:5px 5px 5px 1px black;
}
.geetika{
width:250px;
float: left;
height: 500px;
margin-top: 25px;
margin-left: 18%;
background-color:rgba(0,0,0,0.1);
box-shadow:5px 5px 5px 1px black;
}
.sumegha{
width:250px;
height: 500px;
float: left;
margin-top: 25px;
margin-left: 50px;
background-color:rgba(0,0,0,0.1);
box-shadow:5px 5px 5px 1px black;
}
.nikhil #top{
width: 100%;
height: 100px;
background-color:#0000FF;
}
.nikhil #bottom{
width: 100%;
height: 400px;
font-size: 20px;
text-align: center;
font-family: cursive;
color: #4B4B4E;
}
.nikhil #bottom a{
color: black;
text-decoration: none;
}
.nikhil #top #circle{
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
margin-left: 75px;
background-image: url("../img/nik1.JPG");
background-size: 100px 100px;
background-repeat: no-repeat;
}
.sumegha #bottom a{
color: black;
text-decoration: none;
}
.sumegha #top{
width: 100%;
height: 100px;
background-color:#0000FF;
}
.sumegha #bottom{
width: 100%;
height: 400px;
font-size: 20px;
text-align: center;
font-family: cursive;
color: #4B4B4E;
}
.sumegha #top #circle{
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
margin-left: 75px;
background-image: url("../img/sumegha.jpg");
background-size: 100px 100px;
background-repeat: no-repeat;
}
.geetika #top{
width: 100%;
height: 100px;
background-color:#0000FF;
}
.geetika #bottom{
width: 100%;
height: 400px;
font-size: 20px;
text-align: center;
font-family: cursive;
color: #4B4B4E;
}
.geetika #top #circle{
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
margin-left: 75px;
background-image: url("../img/geetika.jpg");
background-size: 100px 100px;
background-repeat: repeat;
}
.geetika #bottom a{
color: black;
text-decoration: none;
}
.nikdetail{
border: 1px solid black;
margin-left: 5%;
width: 90%;
height: 500px;
background-color: black;
font-family: ALGERIAN;
color: white;
display:none;
}
.nikdetail #banner{
font-family:Lucida Handwriting;
font-size: 18px;
}
.nikdetail #banner a{
font-family:Lucida Handwriting;
text-decoration: none;
color: white;
}
.geetdetail{
border: 1px solid black;
margin-left: 5%;
width: 90%;
height: 500px;
background-color: black;
font-family: ALGERIAN;
color: white;
display:none;
}
.geetdetail #banner{
font-family:Lucida Handwriting;
font-size: 18px;
}
.geetdetail #banner a{
font-family:Lucida Handwriting;
text-decoration: none;
color: white;
}
.sumeghadetail{
border: 1px solid black;
margin-left: 5%;
width: 90%;
height: 500px;
background-color: black;
font-family: ALGERIAN;
color: white;
display:none;
}
.sumeghadetail #banner{
font-family:Lucida Handwriting;
font-size: 18px;
}
.sumeghadetail #banner a{
font-family:Lucida Handwriting;
text-decoration: none;
color: white;
}
With CSS media queries, you can target screen resolutions.
#media (max-width: 767px) {
/*mobile screen styles*/
}
#media (min-width: 768px) and (max-width: 991px) {
/*tablet screen styles*/
}
#media (min-width: 992px) and (max-width: 1199px) {
/*small desktop screen styles*/
}
#media (min-width: 1200px) {
/*large desktop screen styles*/
}
I would strongly recommend looking at Bootstrap as a frontend framework. It has responsive design already built into it and much more.
Related
I am doing private project and I don't know how to set background color of the article for the whole width of the page, not just around the text, like in screen1.
.logo
{
text-align: center;
font-size: 40px;
margin-top: 40px;
margin-bottom: 30px;
letter-spacing: 5px;
text-transform: uppercase;
color: #ddd;
font-weight: 700px;
}
nav
{
background-color: #1c74b2;
text-align: center;
width: 100%;
}
body
{
background-color: #2F3336;
color: #efefef;
}
.menu
{
padding-top: 13px;
padding-bottom: 13px;
color: #efefef;
list-style-type: none;
margin: 0;
font-size: 18px;
min-height: 40px;
line-height: 200%;
width: 100%;
}
.menu > li
{
display: inline-block;
border-right: 1px dashed #0a2b42;
padding-right: 20px;
padding-left: 20px;
width: 145px;
}
.menu > li:last-child
{
border-right: 1px dashed #0a2b42;
}
.menu > li:first-child
{
border-left: 1px dashed #0a2b42;
}
.menu a
{
text-decoration: none;
color: #fff;
transition: transform .2s ease-in-out;
}
.menu a:hover
{
color: #0a2b42;
transform: scale(1.2);
}
h1
{
font-size: 40px;
font-weight: 500px;
color: #39a5f1;
margin-top: 40px;
margin-bottom: 20px;
}
.one
{
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 950px;
}
.two
{
background-color: #191d21;
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 950px;
}
.footer
{
width: 100%;
min-height: 50px;
background-color: #1c74b2;
text-align: center;
font-size: 16px;
padding: 17px;
margin: 0px;
}
#Lorem
{
background-color: #191d21;
}
<!DOCTYPE html>
<html>
<head>
<title>STRONA GŁÓWNA</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Comaptible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="styleindex.css">
</head>
<body>
<header>
<h1 class="logo">DRUGA WOJNA ŚWIATOWA</h1>
<nav>
<ul class="menu">
<li>Strona Główna</li>
<li>Fronty wojny</li>
<li>Nowe technologie</li>
<li>Mapy polityczne</li>
<li>Materiały źródłowe</li>
<li>Logowanie</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<main>
<section>
<div class="one">
<header>
<h1>INTRODUCTION</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar nibh id dolor placerat, et luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In vulputate facilisis velit ut interdum. Nam commodo ex quis ipsum rutrum, convallis venenatis ex tincidunt. Praesent tincidunt semper ex, eget semper ante porta vel. Integer egestas turpis vitae ullamcorper ultricies. Ut arcu tortor, imperdiet vel felis et, fermentum rutrum dolor. Vestibulum bibendum eu massa et tincidunt. Integer a porta enim. Curabitur quis imperdiet ante, aliquam tincidunt felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam.
</p>
</header>
</div>
<div class="two">
<article id="Lorem">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar nibh id dolor placerat, et luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In vulputate facilisis velit ut interdum. Nam commodo ex quis ipsum rutrum, convallis venenatis ex tincidunt. Praesent tincidunt semper ex, eget semper ante porta vel. Integer egestas turpis vitae ullamcorper ultricies. Ut arcu tortor, imperdiet vel felis et, fermentum rutrum dolor. Vestibulum bibendum eu massa et tincidunt. Integer a porta enim. Curabitur quis imperdiet ante, aliquam tincidunt felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam.</p>
</article>
</div>
</section>
</main>
<footer>
<div class="footer">
<p>II WOJNA ŚWIATOWA © wszelkie prawa zastrzeżone. Dzięki za odwiedzenie i zapraszam ponownie.</p>
</div>
</footer>
</body>
</html>
<!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>
.two {
background-color: #f0f0f0;
margin-bottom: 125px;
text-align: center;
width: 100%;
}
#Lorem {
background-color: #f0f0f0;
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 950px;
}
</style>
</head>
<body>
<div class="two">
<article id="Lorem">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar nibh id dolor placerat, et
luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In
vulputate facilisis velit ut interdum. Nam commodo ex quis ipsum rutrum, convallis venenatis ex
tincidunt. Praesent tincidunt semper ex, eget semper ante porta vel. Integer egestas turpis vitae
ullamcorper ultricies. Ut arcu tortor, imperdiet vel felis et, fermentum rutrum dolor. Vestibulum
bibendum eu massa et tincidunt. Integer a porta enim. Curabitur quis imperdiet ante, aliquam tincidunt
felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam.</p>
</article>
</div>
</body>
</html>
use this one i hope your problem will be solved
It is simple, width: 100% will stretch the div across the whole page.
.one {
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 100%;
}
.two {
background-color: #191d21;
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 100%;
}
Additional, you need to remove padding and margin upon loading the page
html, body {
margin:0;
padding:0;
}
Use this css to get the full width while the content is still in the middle.
main > section {
width: 100%;
background-color: #191d21;
margin-bottom: 125px;
}
.one, .two {
width: 100%;
max-width: 950px;
margin 0 auto;
text-align: center;
}
<main>
<section>
<div class="one">
....
</div>
</section>
<section>
<div class="two">
....
</div>
</section>
</main>
Help, have been working for hours on this HTML Page. I've been viewing it in Chrome, but when I resize the page I notice that the sidebars I've added cover up everything.
Here is what I wanted to do:
Have a scroll bar when the page is resized (Keeping the page the same)
Have one side bar one side, and to be able to slide over the page to find the other scroll bar. (I dont want the. covering everything up like they are now..)
Here is the code:
#img1 {
width: 400px;
padding-bottom: 25px;
}
#container1 {
text-align: center;
}
#heading-contain {
background-color: LightSeaGreen;
width: 650px;
margin: auto;
border-radius: 7px;
font-family: "adam", arial;
color: white;
}
#heading2 {
border-top: 1px solid white;
}
#heading1 {
position: relative;
top: 15px;
}
#heading2 h3 {
position: relative;
bottom: 6px;
color: DarkSlateGrey;
}
#main-content {
width: 650px;
margin: auto;
margin-top: 30px;
background-color: LightSlateGrey;
border-radius: 8px;
}
#text1 {
padding-bottom: 30px;
padding-top: 20px;
font-family: arial;
color: white;
margin-left: 20px;
margin-right: 20px;
line-height: 200%;
}
#name {
color: DarkSeaGreen;
font-weight: bold;
font-family: "dragon is coming";
font-size: 300%;
}
body {
background-image: url("https://lh4.ggpht.com/X5kjAhye8_5IE9Ws3Z0e05aIAsP_jCSbsh1hja0nNdF8GczkNd0aZQEe7w1V5-2B-9k=h900");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#footer {
background-color: LightSeaGreen;
color: white;
border: 1px double white;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
height: 30px;
padding: 5px;
font-family: "adam";
font-weight: bold;
}
#footer p {
margin: 5px;
}
#name:hover {
color: LightCoral;
cursor: default;
}
#line1 {
text-align: center;
}
#paragraph {
text-indent: 50px;
display: inline-block;
}
#sidebar-left {
background-color: LightSeaGreen;
width: 200px;
height: 100%;
display: block;
position: absolute;
left: 0px;
top: 0px;
position: fixed;
font-family: "adam";
color: white;
}
ul {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
ul li a {
background-color: LightSlateGrey;
color: white;
border-bottom: 1px solid white;
display: block;
width: 180px;
padding: 10px;
text-decoration: none;
}
li:hover {
background-color: DarkSeaGreen;
}
#sidebar-right {
background-color: LightSeaGreen;
width: 200px;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
position: fixed;
font-family: "adam";
color: white;
}
#sidebar-right h4 {
width: 180px;
padding: 10px;
}
#sidebar-right img {
width: 160px;
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
#sidebar-right p {
font-size: 13px;
padding-right: 6px;
padding-left: 6px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML WEBPAGE 2 | Brett Carwile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container1">
<!-- Container1 contains all the elements on the page !-->
<div id="heading-contain">
<!-- Heading-container contains everything in the header !-->
<div id="heading1">
<!-- Heading1 is the top of the header which includes the h1 !-->
<h1>HTML Webpage 2</h1>
</div>
<div id="heading2">
<!-- Heading2 is the bottom half of the header including the h3 !-->
<h3>By Brett Carwile</h3>
</div>
</div>
<div id="sidebar-right">
<h4>About the Author</h4>
<img src="DSC00071.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper gravida facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed dui diam. Nulla facilisi. Donec rhoncus dolor malesuada urna commodo lacinia. Sed vel nisi
venenatis, aliquet nibh at, lobortis lacus. Etiam enim lacus, venenatis a sagittis ac, rhoncus in velit. Pellentesque turpis massa, condimentum eget eleifend non, sit amet justo. Vivamus accumsan iaculis placerat. Quisque blandit diam ut risus
ultrices rutrum. Mauris pretium in augue ut lobortis. Vivamus tempor ac nisl at euismod. Maecenas laoreet a erat a varius. Curabitur consequat nunc vehicula tellus ornare, vitae aliquet sapien varius.
</P>
</div>
<div id="sidebar-left">
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
<li>Link 5
</li>
</ul>
<p>Check out the awesome links above!!</p>
</div>
<div id=main-content>
<!-- This div is the main area below the header (text, img ect...) !-->
<p id="text1">
<!-- This span is to seperate the first line from the rest of the text !-->
<span id="line1"> This is an HTML webpage by <span id="name">Brett Carwile</span>.</span>
<br>
<!-- This span is so that we can indent the text !-->
<span id="paragraph">This is a text sample. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id quam nulla. Nam sollicitudin porta ligula, sit amet pharetra elit tincidunt sit amet. Suspendisse rhoncus, elit at consectetur sagittis, nisi eros molestie urna, et cursus elit sapien quis ante. Sed sit amet pulvinar neque. Pellentesque eget lorem ac lorem sodales rutrum. Nulla erat nisl, consequat non ante vitae, porttitor convallis magna. Duis pulvinar ornare nisi nec varius. Mauris tempus nisi non viverra vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vestibulum viverra erat eu rhoncus.
Cras nec vulputate leo. Donec nunc mauris, varius id ligula eu, tincidunt euismod lorem. Praesent pharetra, ipsum et congue egestas, sapien augue feugiat lacus, ac tincidunt augue leo ut tortor. Mauris efficitur urna ut turpis ornare, eu consectetur lacus dapibus. Curabitur sit amet justo blandit est fermentum volutpat. Sed in gravida nunc. Integer sit amet risus in justo porttitor cursus. Mauris tortor purus, viverra a lacus et, suscipit molestie tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </span>
</p>
<img src="DSC00071.jpg" id="img1">
<div id="footer">
<p>Thank you for viewing!!! © Brett Carwile 2016</p>
</div>
</div>
</div>
</body>
</html>
You can try the HTML/CSS and resize the window to see what I mean.
Adding min-width to the body element and removing the position fixed for the sidebar-left and sidebar-right will make the trick. Please see below the modified css rules.
body {
min-width: 1200px; //Modify depending on your requirements
background-image: url("https://lh4.ggpht.com/X5kjAhye8_5IE9Ws3Z0e05aIAsP_jCSbsh1hja0nNdF8GczkNd0aZQEe7w1V5-2B-9k=h900");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#sidebar-left {
background-color: LightSeaGreen;
width: 200px;
height: 100%;
display: block;
position: absolute;
left: 0px;
top: 0px;
font-family: "adam";
color: white;
}
#sidebar-right {
background-color: LightSeaGreen;
width: 200px;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
font-family: "adam";
color: white;
}
I hope it helps.
So what seems to be the problem is my content div is not extending all the way down the page. The width is just how I want it, but the bottom seems to hover or get stuck in the middle of the page. This causes my footer to stick to the bottom of the content div as well. What can I do to fix this? I know there are a lot of questions like this one, but none of the answers seem to be working for me.
**<---HTML--->**
<!DOCTYPE html>
<html>
<head>
<title>Stan Mattingly</title>
<link type="text/css" rel="stylesheet" href="personalStyle.css"/>
</head>
<body>
<div id="header">
<a href="PersonalHome.html">
<p id = "logo">Stan Mattingly</p>
</a>
<a href="PersonalHome.html">
<p class = "button">Contact</p>
</a>
<a href="PersonalHome.html">
<p class = "button">About</p>
</a>
<a href="PersonalHome.html">
<p class = "button">Home</p>
</a>
</div>
<div id="content">
<h1>Click A Link To Get Started.</h1>
<div id = "social">
<a href="https://www.facebook.com/DontMakeYourArmsFallOff">
<img src="facebook button.png"/>
</a>
<a href="https://twitter.com/StanMattingly">
<img src="twitter logo.png"/>
</a>
<a href="http://soundcloud.com/djmicrocrush">
<img src="soundcloud logo.png"/>
</a>
<a href="http://www.hudl.com/athlete/2671311/stan-mattingly">
<img src="hudle logo.png"/>
</a>
</div>
</div>
<div id="footer">
<p>This is 100% designed and created by yours truly.</p>
</div>
</body>
</html>
<---CSS--->
#header
{
background-color: rgba(225,225,225,.6);
height: 60px;
width: 100%;
margin: -10px -20px 0px 0px;
font-size: 20px;
display: inline-block;
}
#logo
{
float: left;
margin: 15px 10px 0px 10px;
position: absolute;
}
.button
{
float: right;
margin: auto;
margin: 15px 10px 0px 10px;
}
#content
{
background-color: rgba(0,0,0,.8);
height: 100%;
width: 85%;
margin: -9px auto -15px auto;
padding: 10px;
color: white;
text-align: center;
}
#social
{
padding: 40px;
margin: 10px auto 10px auto;
display: inline-block;
}
#footer
{
background-color: rgba(225,225,225,.6);
height: 45px;
width: 100%;
margin-left: 0px;
text-align: center;
clear: both;
}
body, html{
height: auto;
width: auto;
margin-right: 0px;
margin-left: 0px;
margin-bottom:0px;
background-image: url("stars.jpg");
}
*
{
font-family: Segoe Script;
}
#header a:link
{
color: black;
text-decoration: none;
}
#header a:hover
{
color: rgba(0,0,0,.8);
text-decoration: none;
}
#header a:visited
{
text-decoration: none;
color: black
}
#content a:link
{
color: white;
text-decoration: none;
}
#content a:hover
{
color: rgba(225,225,225,.6);
text-decoration: none;
}
#content a:visited
{
text-decoration: none;
color: white;
}
#footer a:link
{
color: black;
text-decoration: none;
}
#footer a:hover
{
color: rgba(0,0,0,.8);
text-decoration: none;
}
#footer a:visited{
text-decoration: none;
color: black
}
Your content div will extend as far as it needs to extend, depending on how much "content" is in your content div. For example if I place a paragraph in the content div, it will extend as long as the paragraph makes it extend. Please check the code below with a paragraph inserted in the content div.
<!DOCTYPE html>
<html>
<head>
<title>Stan Mattingly</title>
<link type="text/css" rel="stylesheet" href="personalStyle.css"/>
</head>
<body>
<div id="header">
<a href="PersonalHome.html">
<p id = "logo">Stan Mattingly</p>
</a>
<a href="PersonalHome.html">
<p class = "button">Contact</p>
</a>
<a href="PersonalHome.html">
<p class = "button">About</p>
</a>
<a href="PersonalHome.html">
<p class = "button">Home</p>
</a>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dapibus turpis, ac tincidunt eros. Nullam eget facilisis est. Nam at malesuada nunc. Duis metus arcu, iaculis at dapibus eu, semper suscipit diam. Pellentesque pellentesque nec libero et fringilla. Praesent pharetra placerat felis, tempor laoreet urna accumsan ac. Vivamus iaculis, odio nec pulvinar varius, magna dui interdum diam, nec blandit ligula justo ac quam. Fusce tempor, velit eu fringilla consequat, metus ante molestie tortor, ac volutpat nisi leo non nulla. Etiam sed nunc non magna porttitor sodales vel id ligula. Cras porta enim lorem, in pulvinar est dictum non. Cras ut dui fringilla sapien porta dictum. Proin egestas fermentum libero, nec tincidunt velit fringilla at. Cras lacinia ligula vehicula egestas interdum. Proin feugiat urna ligula, sodales gravida sem accumsan sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc eros lorem, varius at lobortis ut, vehicula id metus. Donec at tellus at urna eleifend auctor. Fusce vitae orci risus. Quisque convallis ut orci in commodo. Nulla nec tellus non sem adipiscing tristique a sed nisi. Aenean arcu elit, condimentum non odio sit amet, tincidunt consectetur dolor. Ut lorem elit, lacinia nec justo eu, sodales aliquet nulla. Morbi luctus in nunc quis molestie. Maecenas ut bibendum quam. Integer rhoncus viverra ligula et lacinia. Pellentesque augue magna, imperdiet quis nulla vel, congue dignissim justo. Etiam ut vulputate nibh, et lobortis neque. Vestibulum pellentesque orci ut eros posuere, quis malesuada purus vestibulum. Aenean ultricies justo faucibus eros ultrices, sed vestibulum sem luctus. Nam pulvinar, quam in rhoncus facilisis, urna dui blandit magna, nec auctor quam orci eu eros. Ut et justo nisi. Duis ligula lectus, pulvinar eget dui a, porttitor congue risus. Donec ac eros eleifend, faucibus ipsum molestie, lacinia augue. Fusce suscipit quis nunc fermentum posuere. Integer gravida scelerisque mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros mi. Morbi molestie, dolor id pellentesque venenatis, nunc quam venenatis felis, at sollicitudin nisi lectus id lectus. Vestibulum quis vulputate purus, in varius arcu. Donec ut massa tellus. Ut fringilla nisl tempus mi tincidunt scelerisque. Sed sit amet egestas elit, vitae vestibulum nisl. Etiam suscipit commodo varius. Nullam bibendum orci felis, vitae suscipit risus pharetra id. Etiam nec convallis ipsum. Nullam facilisis mi eget nulla pulvinar, at placerat risus malesuada. Nullam id est nulla. Proin aliquet est dui, ut sollicitudin mauris condimentum eget. Nam dictum arcu id venenatis lacinia. Donec vel mi sit amet ipsum adipiscing rhoncus. Phasellus blandit vestibulum nisl ac fringilla. Vestibulum metus augue, auctor vitae accumsan a, bibendum at elit. Proin erat purus, placerat sed cursus vel, placerat ac erat. Pellentesque id egestas enim, ac vehicula tellus. </p>
<h1>Click A Link To Get Started.</h1>
<div id = "social">
<a href="https://www.facebook.com/DontMakeYourArmsFallOff">
<img src="facebook button.png"/>
</a>
<a href="https://twitter.com/StanMattingly">
<img src="twitter logo.png"/>
</a>
<a href="http://soundcloud.com/djmicrocrush">
<img src="soundcloud logo.png"/>
</a>
<a href="http://www.hudl.com/athlete/2671311/stan-mattingly">
<img src="hudle logo.png"/>
</a>
</div>
</div>
<div id="footer">
<p>This is 100% designed and created by yours truly.</p>
</div>
</body>
</html>
A Little Change in CSS
<style type="text/css">
#header
{
background-color: rgba(225,225,225,.6);
height: 60px;
width: 85%;
font-size: 20px;
display: inline-block;
margin-left: 150px;
margin-right: auto;
}
#logo
{
float: left;
margin: 15px 10px 0px 10px;
position: absolute;
}
.button
{
float: right;
margin: auto;
margin: 15px 10px 0px 10px;
}
#content
{
background-color: rgba(0,0,0,.8);
height: 100%;
width: 85%;
margin-left: auto;
margin-right: auto;
padding: 10px;
color: white;
text-align: center;
}
#social
{
padding: 40px;
margin: 10px auto 10px auto;
display: inline-block;
}
#footer
{
background-color: rgba(225,225,225,.6);
height: 45px;
width: 85%;
margin-left: auto;
margin-right: auto;
text-align: center;
clear: both;
}
body, html{
height: auto;
width: auto;
margin-right: 0px;
margin-left: 0px;
margin-bottom:0px;
background-image: url("stars.jpg");
}
*
{
font-family: Segoe Script;
}
#header a:link
{
color: black;
text-decoration: none;
}
#header a:hover
{
color: rgba(0,0,0,.8);
text-decoration: none;
}
#header a:visited
{
text-decoration: none;
color: black
}
#content a:link
{
color: white;
text-decoration: none;
}
#content a:hover
{
color: rgba(225,225,225,.6);
text-decoration: none;
}
#content a:visited
{
text-decoration: none;
color: white;
}
#footer a:link
{
color: black;
text-decoration: none;
}
#footer a:hover
{
color: rgba(0,0,0,.8);
text-decoration: none;
}
#footer a:visited{
text-decoration: none;
color: black }
*.cImg
{
width: 50px;
height: 50px;
}
</style>
HTML:
<div id="header">
<a href="PersonalHome.html">
<p id = "logo">Stan Mattingly</p>
</a>
<a href="PersonalHome.html">
<p class = "button">Contact</p>
</a>
<a href="PersonalHome.html">
<p class = "button">About</p>
</a>
<a href="PersonalHome.html">
<p class = "button">Home</p>
</a>
</div>
<div id="content">
<h1>Click A Link To Get Started.</h1>
<div id = "social">
<a href="https://www.facebook.com/DontMakeYourArmsFallOff">
<img src="facebook button.png"/>
</a>
<a href="https://twitter.com/StanMattingly">
<img src="twitter logo.png"/>
</a>
<a href="http://soundcloud.com/djmicrocrush">
<img src="soundcloud logo.png"/>
</a>
<a href="http://www.hudl.com/athlete/2671311/stan-mattingly">
<img src="hudle logo.png"/>
</a>
</div>
</div>
<div id="footer">
<p>This is 100% designed and created by yours truly.</p>
</div>
I don't know what u mean exactly, but test that and tell me back what u want exactly. I will help u.
#header
{
background-color: rgba(225,225,225,.6);
height: 15%;
width: 100%;
margin: -10px -20px 0px 0px;
font-size: 20px;
display: inline-block;
}
#logo
{
float: left;
margin: 15px 10px 0px 10px;
position: absolute;
}
.button
{
float: right;
margin: auto;
margin: 15px 10px 0px 10px;
}
#content
{
background-color: rgba(0,0,0,.8);
height: 80%;
width: 98%;
margin: -9px auto -15px auto;
padding: 10px;
color: white;
text-align: center;
position:absolute;
}
#social
{
padding: 40px;
margin: 10px auto 10px auto;
display: inline-block;
}
#footer
{
background-color: rgba(225,225,225,.6);
height: 20%;
width: 100%;
margin-left: 0px;
text-align: center;
clear: both;
padding-top:40%
}
body, html{
height: auto;
width: auto;
margin-right: 0px;
margin-left: 0px;
margin-bottom:0px;
background-image: url("stars.jpg");
}
*
{
font-family: Segoe Script;
}
#header a:link
{
color: black;
text-decoration: none;
}
#header a:hover
{
color: rgba(0,0,0,.8);
text-decoration: none;
}
#header a:visited
{
text-decoration: none;
color: black
}
#content a:link
{
color: white;
text-decoration: none;
}
#content a:hover
{
color: rgba(225,225,225,.6);
text-decoration: none;
}
#content a:visited
{
text-decoration: none;
color: white;
}
#footer a:link
{
color: black;
text-decoration: none;
}
#footer a:hover
{
color: rgba(0,0,0,.8);
text-decoration: none;
}
#footer a:visited{
text-decoration: none;
color: black
}
I know there are other questions out there similar to this that have been answered but they don't quite fit what I need. My problem is, whenever I zoom out on the page past a certain point (anything below 50% zoom), the 1 or 2 links at the end of my nav bar get pushed down to a second line below the rest of them. But this doesn't occur when the page is at a normal or large size. The links also don't change size or proportion when the window is resized, only when zoom is at 33% or 25%. I've tried all kinds of "position" stuff with both the ".nav-style" and "a" in my CSS but nothing seems to be working.
How can I get the links on the right end of the nav bar to shrink and stay in their relative proportions to the rest of the page when I zoom all the way out?
Here is my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="div1">
<h1>ConSynth Corporation</h1>
<p></p>
<div class="nav-style">
<p>Home
About Us
Project Gallery
News
Contact Us
Resources
</p>
</div>
</div>
<div class="div2">
<p></p>
</div>
<div class="div3">
<p></p>
</div>
<div id="black-box">
<div id="black-box-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum enim sem, gravida eu facilisis vel, mollis eget turpis. Morbi dignissim magna eu dui sagittis, ac semper enim ullamcorper. Phasellus scelerisque lobortis libero et laoreet. Vivamus suscipit erat sed quam consequat, pharetra dignissim ligula pharetra. Nulla a dui vel eros viverra rutrum sed at orci. Nullam id aliquam sem, in eleifend lectus. Integer non libero et eros sagittis tincidunt. Nam ornare, est sed dapibus auctor, lectus lorem luctus elit, at semper enim odio ac metus. Aliquam lacinia lacinia turpis et dapibus.
<br />
<br />
Integer ac magna lobortis, dictum ligula sed, vestibulum urna. Cras eget placerat augue. Sed sit amet purus magna. Sed malesuada, nulla vitae consectetur posuere, diam odio accumsan metus, eget consectetur odio ante at velit. Etiam tincidunt justo at augue porttitor vulputate. Suspendisse hendrerit sit amet sem porta suscipit. Donec porta libero odio, non commodo orci faucibus at. Duis nisl erat, facilisis ut sem adipiscing, luctus scelerisque ante. Vestibulum felis dolor, porta eu nunc vel, sodales semper lorem. Curabitur varius lorem eget accumsan aliquam. Nam sem odio, condimentum et cursus nec, tempor id ipsum.
<br />
<br />
Duis porttitor lacus a sem lacinia vestibulum nec quis neque.
Fusce sit amet porttitor sem. Nunc a laoreet est. Pellentesque facilisis dolor augue, sit amet aliquam justo vehicula quis. Pellentesque interdum a augue et convallis. Integer augue quam, consectetur at tortor quis, pulvinar gravida dolor. Praesent eu volutpat lacus. Integer risus nisi, venenatis non blandit vitae, feugiat ac ipsum. Etiam eu congue velit. </p></div>
<div id="grey-login">
<form id="usn">
Username: <input type="username" name="usn">
</form>
<form id="pwd">
Password: <input type="password" name="pwd">
</form>
<input type="submit" name="submit" value="Log In" id="submit" onclick="alert('Hello world!')"/>
</div>
</div>
</div>
</body>
</html>
And here is my CSS:
#charset "UTF-8";
/* CSS Document */
.container {
width: 1366px;
height: 1409px;
border: 2px solid black;
border-radius: 10px;
margin: auto;
positon: relative;
}
.div1 {
width: 1366px;
height: 253px;
background-color: black;
margin-top: -68px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
position: relative;
}
.div2 {
width: 1366px;
height: 591px;
background-color: white;
margin: none;
}
.div3 {
width: 1366px;
height: 550px;
background-color: #688E23;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
position: absolute;
z-index: 10;
}
#black-box {
width: 1278px;
height: 437px;
background-color: black;
border-radius: 15px;
position: absolute;
z-index: 20;
margin-top: 30px;
margin-left: 45px;
}
#black-box-text {
width: 730px;
height: 390px;
position: absolute;
z-index: 30;
color: white;
text-align: justify;
font-family: Arial,"Arial", Helvetica, sans-serif;
font-size: 24px;
margin-left: 470px;
padding-left: 10px;
padding-right: 45px;
overflow: auto;
}
#grey-login {
width: 387px;
height: 382px;
background-color: #cfcfcf;
background-image: url('images/login-image.jpg');
background-repeat: no-repeat;
background-position: 5% 5%;
border-radius: 15px;
margin-left: 30px;
margin-top: 25px;
position: relative;
}
#usn {
max-width: 175px;
margin-left: 205px;
padding-bottom: 10px;
padding-top: 20px;
position: relative;
z-index: 40;
text-align:center;
}
#pwd {
max-width: 175px;
margin-left: 205px;
padding-top: 20px;
padding-bottom: 10px;
position: relative;
z-index: 40;
text-align:center;
}
input[type=username] {
border: 1px solid #999;
border-radius: 7px;
height: 30px;
min-width: 150px;
max-width: 150px;
-webkit-appearance: none;
}
input[type=password] {
border: 1px solid #999;
border-radius: 7px;
height: 30px;
min-width: 150px;
max-width: 150px;
-webkit-appearance: none;
}
#submit {
background-color: #353535;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
color: #fff;
font-family: 'Arial';
font-size: 20px;
text-decoration: none;
cursor: pointer;
border:none;
padding: 5px 20px;
margin-top: 20px;
margin-left: 150px;
}
#submit:hover {
border: none;
background: #DD1900;
box-shadow: 0px 0px 1px #777;
}
h1 {
font-family: Baskerville, Georgia, "Times New Roman", Times, serif;
color: #FFF;
font-size: 100px;
font-weight:100;
text-align:center;
margin-bottom:85px;
}
a {
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
color: white;
text-align: center;
margin: 0 35px;
font-size: 22px;
padding-left: 50px;
padding-top: 50px;
}
.nav-style {
position: relative;
}
I am a noob at HTML and CSS, and some of the code in here I copied from other people when in a pinch. I need to submit this ASAP to a person I'm trying to get an internship with so a quick response would be very much appreciated. Thank you.
PS: I just discovered that the zoom option only messes up the link position in Chrome, but it did not occur when I tried it in Safari. I have not yet tried zooming in and out on IE to see how it works on there either. Here's a JSFiddle
Large screen and the zooming window are not same. Do not worry dude. Everything is ok..
you can define your width height etc. in terms of percentage or em
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.