So basically I can't remove the top section of the page. It is just white space, and no matter how much I alter my css, I can't seem to change anything. I want to have my navbar at the top of the page, with no padding or border or anything. Here is my code, and I am aware it is probably the most easiest thing, it's just that i can't find it at the moment.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="Description" content="This is a test website!"/>
<meta name="author" content="Me!"/>
<title>test | Home</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="wrapper">
<nav id="navmenu">
<ul>
<li>Home</a>
<li>About</li>
<li>Tutorials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<aside id="sidenews">
</aside>
<div id="center">
<section id="mainsection">
<article>
<header>
<hgroup>
<h1>This is a test</h1>
<h2>I like tests!</h2>
</hgroup>
</header>
<section>
<p>This is the main section of my section (sectception)</p>
</section>
<footer>
<p>Time and date</p>
</footer>
</article>
</section>
</div>
<footer id="cright">
<p>This is the copyright section. All rights reserved.</p>
</footer>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
header, section, footer, aside, nav, article, hgroup{
display: block;
}
a{
text-decoration: none;
color: #FFF;
}
a:hover{
color: #333399;
}
#wrapper{
width: 1000px;
margin: 20px auto;
text-align: left;
background-color: #FFF;
}
#navmenu{
background: #3366CC;
color: #eee;
text-align: center;
height: 100px;
padding: 0;
margin:0;
float: top;
width: 100%;
}
#navmenu li{
display: inline-block;
list-style: none;
padding: 20px;
}
#navmenu li:hover{
color: #FFF;
background: #3399FF;
border-radius: 15px;
-moz-border-radius: 5px;
}
#mainsection{
float:left;
width: 630px;
margin:30px;
margin-top: 2
background-color:#FFF;
color: #222;
text-align: left;
}
#cright{
text-align: center;
background-color: #AAA;
clear: both;
}
#center{
width: 1000px;
height: 1000px;
background-color:#FFF;
}
#sidenews{
float:right;
width: 250px;
height: 940px;
margin: 0px 0px;
padding: 30px;
background-color:#FFF;
}
Change the margin of the wrapper to 0 ?
#wrapper{
margin: 0 auto;
}
Your #wrapper element has a top margin of 20px - is that it?
#wrapper{
width: 1000px;
margin: 0 auto;
text-align: left;
background-color: #FFF;
}
Set margin to 0 on wrapper
#wrapper {
background-color: #FFFFFF;
margin: auto;
text-align: left;
width: 1000px;
}
Related
I am having some problems with floated nav. As can be seen in the first image below, I use position in my code and the result is that the nav is floated above the logo when I scaled the browser.
But I want the nav and the logo to be separated (like the second image) whenever I scale the browser. What should I do?
Are there any other ways to do that without using float?
This my my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<style>
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav{
float: right;
position: absolute;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="images\logo.png" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
There are many ways to do that. Here's one:
Add this to your style:
nav {margin-left: 50px;}
Here is one version where nav floats right: jsfiddle
CSS:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
margin-left: 50px;
}
/* width is set to 80% and nav floats right, no pos absolute */
header nav{
float: right;
width: 80%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
This is other method using display:flex.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header {
display: flex !important;
justify-content: space-between;
}
.logo img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
#media screen and (max-width:1024px){
.logo {
width: 20%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/250x150/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
You might need to adjust the widths a little bit. You can add max-width and min-with to both your logo and nav too.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
/* add the width and margin to your logo class*/
header .logo{
float: left;
margin-right:2%;
width:26%;
}
/* make sure your image has a width */
header .logo img{
width:100%;
}
/* add the width to your nav class */
header nav{
float: right;
width:70%;
padding-top:5%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
This is one method using float:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav {
float: right;
position: relative;
margin-top: 35px;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
#media screen and (max-width:1169px){
header .logo {
width: 19%;
}
}
#media screen and (max-width:767px){
header .logo {
width: 15%;
}
header a {
padding: 5px;
font-size: 14px;
}
header nav {
margin-top: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
Sorry, i am a beginner also i'd like to understand the solution.
I want the text to be floated next to the image also i noticed that the image doesn't fully show up instead a proportion of it is underneath the header.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p, h1 {
margin: 0;
padding: 0;
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-top:0;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showtime img {
width:300px;
height:300px;
}
.clearfix {
overflow:auto;
}
#img1 {
float:right;
}
#img2 {
float:left;
}
footer {
margin-top:30px;
background-color:#191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear:both;
}
footer p{
text-align: center;
color: white;
}
<!doctype html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet"/>
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showtime">
<div>
<img src="./images/Person1.jpg" width="300px;" height="300px;">
<h2>Image</h2>
<p>The image will always try to be unique from the odthers and we will always try to deliver the best photo in our limited time</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
Use align="left" to float an image next to some text. The section showtime needs blank space to allow for the header height overlapping it.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p, h1 {
margin: 0;
padding: 0;
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-top:0;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showtime {
padding-top:60px;
}
#showtime img {
width:300px;
height:300px;
}
.clearfix {
overflow:auto;
}
#img1 {
float:right;
}
#img2 {
float:left;
}
footer {
margin-top:30px;
background-color:#191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear:both;
}
footer p{
text-align: center;
color: white;
}
<!doctype html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet"/>
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showtime">
<div>
<img align="left" src="./images/Person1.jpg" width="300px;" height="300px;">
<h2>Image</h2>
<p>The image will always try to be unique from the odthers and we will always try to deliver the best photo in our limited time</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
Replace CSS for the header with:
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-top: 0;
top: 0; // Added. Is required for fixed positioning
}
And add the following:
#showtime {
margin-top: 70px;
}
You need to add to css #showtime { padding-top: 100px;} because position: fixed; removes your element from relative positioning, so you need to add extra space on top,.
and add id to img tag <img id="img1" src="./images/Person1.jpg" width="300px;" height="300px;">. This is actually not the best idea. It's better to use classes.
You should do it the proper way by adding a class to img, id must be unique for all HTML document elements, you can't use it more than once. For example you could do:
CSS
.img1 { float: left; }
HTML
<img class="img1" src="./images/Person1.jpg" width="300" height="300">
Am having layout issues, trying to understand floats and how to position elements. Am very new to css/html. Could someone help me understand how this layout is going to work. Some problems:
1) Unable to change the height of footer without ruining layout, footer seems to get pushed upwards.
2) When i inspect the page through chrome the footer div is included inside the 'wrapper' div when it's outside it in the code.
3) Adding padding to the content div also seems to break the layout
<!DOCTYPE html>
<html lang="en">
<head>
<title>DCW</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!--NAV BAR -->
<nav>
<ul>
<div class="float-left">
<li><a class="active" href="default.asp">PD</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="float-right">
<li>Hire Us!</li>
</div>
</ul>
</nav>
<!-- HEADER -->
<header>
<div id="title_wrapper">
</div>
</header>
<!-- BODY CONTENT -->
<div id="wrapper">
<div id="content">
<div class="info">
col1
</div>
<div class="info">
col2
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-text">
content 2
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
Footer
</footer>
</body>
CSS:
html, body
{
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
p.thick {
font-weight: bold;
}
h1, p {
padding: 0;
margin: 0;
}
/*Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
/* Header */
header #title_text{
font-size: 100px;
font-family: arial;
}
header #title_wrapper{
text-align:center;
position: relative;
top: 200px;
}
header {
background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;
}
/*Content*/
#wrapper{
min-height: 70%;
height: auto;
height: 70%;
}
#content{
float:left;
width:100%;
height: 100%;
text-align: center;
}
#sidebar{
float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;
}
#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}
.img-circle {
border-radius: 50%;
}
.info{
width: 50%;
float: left;
}
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;
}
/* footer */
footer{
background-color: orange;
}
Cheers
I did make a +200px padding content with a +200px footer. Didn't changed anything besides the display:inline-block on the footer plus box-sizing: border-box; on the content.
html, body
{
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
p.thick {
font-weight: bold;
}
h1, p {
padding: 0;
margin: 0;
}
/*Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
/* Header */
header #title_text{
font-size: 100px;
font-family: arial;
}
header #title_wrapper{
text-align:center;
position: relative;
top: 200px;
}
header {
background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;
}
/*Content*/
#wrapper{
min-height: 70%;
height: auto;
height: 70%;
}
#content{
float:left;
width:100%;
height: 100%;
text-align: center;
padding:100px;
box-sizing: border-box;
}
#sidebar{
float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;
}
#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}
.img-circle {
border-radius: 50%;
}
.info{
width: 50%;
float: left;
}
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;
}
/* footer */
footer{
display: inline-block;
background-color: orange;
height:200px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>DCW</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!--NAV BAR -->
<nav>
<ul>
<div class="float-left">
<li><a class="active" href="default.asp">PD</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="float-right">
<li>Hire Us!</li>
</div>
</ul>
</nav>
<!-- HEADER -->
<header>
<div id="title_wrapper">
</div>
</header>
<!-- BODY CONTENT -->
<div id="wrapper">
<div id="content">
<div class="info">
col1
</div>
<div class="info">
col2
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-text">
content 2
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
Footer
</footer>
</body>
It is not necessary to give width and height as 100% for html and body or div in css width is 100% by default. You can mention the width only when it is required.
for giving height to footer just add clear:both for footer selector
footer{background-color: orange;clear:both;height:50px;}
this will solve problems 1 & 2. When you add padding the design breaks because each time when you add width it keeps adding to the current width already given to the same div or element. This can be solved either by re adjusting the element width or using box-sizing: border-box.
I'm currently learning HTML and CSS and I tried making my very first webpage but got stuck when I realized my h2 is not appearing anywhere on the page. Sorry Im a noob and have no idea what I did wrong. Please help! Thank you!
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: fixed;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: red;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>TryOne</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<h2>Hello!</h2>
</div>
</body>
</html>
Your header is fixed ... You need to move your div down with margin ..FIDDLE
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="DIV">
<h2>Hello!</h2>
</div>
--
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: fixed;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: red;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
#DIV{
position:absolute;
margin-top: 125px;
}
The issue here is related to your use of a fixed header.
Take a look at this:
http://codepen.io/anon/pen/XXpggN
All I did was put some padding on the top of the div with the h2 in it, which brought it out from underneath the header. For future reference, a fixed position header will float above the rest of the contents, so the next elements that you add are going to begin appearing right at the very top of the body because the header div floating up top there is not occupying any space on the main body page.
If you ever want to organize your divs in a manner such as this, you just need to specify the z-index values of the divs. In this case though, all you needed was to push the first element (h2 div) down a bit.
position:inherit; padding-top:110px;
your header overwrite other tag.
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: relative;
padding-bottom: 50px;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: back;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>TryOne</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<h2>Hello!</h2>
</div>
</body>
</html>
CSS:
h2 {
color: blue;
background-color: white;
text-align: center;
}
header {
background-color: black;
width: 100%;
height: 100px;
}
Hope this work :)
I know this question has been asked on this forum before but none of the answers helped, so I'm here to ask again, my html5 and css website has a wrapper (as most do), but its not resizing with the contents, I've checked everything that I think that could have gone wrong, here's the code for all who want to try to see what's up, thanks!
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li>Home</li>
<li> | </li>
<li>Blog</li>
<li> | </li>
<li>Videos</li>
<li> | </li>
<li>Contact-Me</li>
</ul>
<h1>Zormion's Blog</h1>
</div>
<div id="content">
<h2>Latest Blog Post:</h2>
</div>
<div id="sidebar">
<h3>Tweets:</h3>
<a class="twitter-timeline" href="https://twitter.com/Zormion" data-widget-id="537398875540455424">Tweets by #Zormion</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>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: #DFC1B0
}
#wrapper {
margin: 20px auto;
width: 1000px;
text-align: left;
background-color: #CCCCCC;
}
#header {
width: 100%;
height: 40px;
background-color: #000;
}
#header h1 {
margin-left: 10px;
color: white;
}
#header ul {
padding-top: 10px;
float: right;
margin-right: 20px;
}
#header ul li {
display: inline-block;
list-style: none;
color: #fff;
font-size: 16px;
}
#content {
width: 63%;
height: 150px;
background-color: grey;
float: left;
margin: 10px;
padding: 20px;
}
#content h2 {
text-align: center;
font-size: 32px;
}
#sidebar {
width: 25%;
float: left;
background-color: grey;
margin: 10px;
padding: 20px;
border: 1px black;
}
#sidebar h3 {
text-align: center;
color: black;
font-size: 32px;
margin-bottom: 10px;
margin-top: -10px;
}
.twitter-timeline {
height: 500px;
}
Use like this:
#wrapper {
margin: 20px auto;
width: 100%;
max-width: 1000px;
text-align: left;
background-color: #CCCCCC;
}