So i was trying to make a copy of the BBC website, and everything was fine until i tried i tried to zoom in.The header's color was slowly going away from right to left as i kept zooming in, is this some kind of browser bug or is there somthing wrong with my code?Everything looks good at 100% size. This is how it looks zoomed in http://i.imgur.com/GyZ6Wov.png
<!doctype html>
<html>
<head>
<title>Hristijan BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body,p,ul{
margin: 0;
font-family: Arial;
color: black;
padding:0;
}
#topMenu{
height: 40px;
font-size: 0.9em;
font-weight: bold;
}
.fixedWidth{
height: inherit;
width: 1000px;
margin: 0 auto;
}
#logo{
float: left;
padding:8px 6px 4.2px 4px ;
border-right: 1px solid gray;
}
#signIn{
float: left;
padding: 12px 85px 10px 10px;
border-right: 1px solid gray;
}
#signIn img{
float:left;
background-color: lightgray;
}
#signIn p{
float: left;
margin-left: 10px;
}
ul{
margin: 0;
list-style: none;
}
.headerItem{
float: left;
padding-left: 14px;
padding-top: 10px;
padding-right: 14px;
border-right: 1px solid gray;
padding-bottom: 13px;
}
#search{
float:left;
padding-top:10px;
padding-left: 10px;
}
#search input{
float:left;
height: 22px;
padding-left:5px;
width:140px;
background-color: lightgray;
border:none;
}
#search img{
float:left;
height: 20px;
}
#newsLine{
background-color: #BB1919;
height: 60px;
}
#newsLine p{
float: left;
color:white;
font-size: 2.5em;
padding-top:4px;
}
#navMenu{
background-color: #A91717;
height: 35px;
}
.mainMenuItem{
float:left;
color:white;
padding-top:0;
padding-left:0px;
padding-right: 15px;
margin-top:10px;
border-right: 1px solid orangered;
padding-left:5px;
}
h1{
color:gray;
}
h1:hover{
color: #1167A8;
}
#mainContent{
float:left;
width: 650px;
}
#description{
float:left;
text-align: justify;
float:left;
width: 225px;
color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="topMenu">
<div class="fixedWidth">
<div id="logo">
<img src="http://static.bbci.co.uk/frameworks/barlesque/2.93.13/orb/4/img/bbc-blocks- dark.png">
</div>
<div id="signIn">
<img src="http://static.bbci.co.uk/id/0.32.25/img/bbcid_orb_signin_dark.png">
<p>Sign in</p>
</div>
<ul >
<li class="headerItem">News</li>
<li class="headerItem">Sport</li>
<li class="headerItem">Weather</li>
<li class="headerItem">Shop</li>
<li class="headerItem">Earth</li>
<li class="headerItem">Travel</li>
<li class="headerItem">More...</li>
</ul>
<div id="search">
<input type="text" placeholder="Search">
<img src="http://static.bbci.co.uk/frameworks/barlesque/2.93.13/orb/4/img/orb-search-dark.png">
</div>
</div>
</div>
<div id="newsLine">
<div class="fixedWidth">
<p>NEWS</p>
</div>
</div>
<div id="navMenu">
<div class="fixedWidth">
<ul>
<li class="mainMenuItem">Home</li>
<li class="mainMenuItem">Video</li>
<li class="mainMenuItem">World</li>
<li class="mainMenuItem">UK</li>
<li class="mainMenuItem">Business</li>
<li class="mainMenuItem">Tech</li>
<li class="mainMenuItem">Science</li>
<li class="mainMenuItem">Magazine</li>
<li class="mainMenuItem">Entertainment & Arts</li>
<li class="mainMenuItem">Health</li>
<li class="mainMenuItem">In Pictures</li>
<li class="mainMenuItem">More</li>
</ul>
</div>
</div>
<div id="content">
<div class="fixedWidth">
<div id="mainContent">
<h1>Pope arrives in conflict with CAR</h1>
<div id="description">
<p>Pope Francis has arrived in the Central African Republic, a country torn apart by violence between Muslim rebels and Christian militias, on the last leg of his African tour.</p>
</div>
</div>
</div>
</div>
</div>
Related
I need "tumbnail.jpg" , "child.png" and "nanny.png" to be in square shape.
also "tumbnail.jpg" as a thumbnail. (It's already a thumbnail I guess)
other two I need them as just squared images side by side. Please help me with this. I tried to solve this since 4 days but I couldn't.
how should I style those 3 to be squared?
body { background-image: url( "bg.jpg" ); }
h2, p { text-align: center; }
.lulu{font-family:Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}
.parent{ background-color:lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height:200px;}
.column {
float: left;
width: 30%;
padding: 5px;
}
.child-1{
background-color:lightgray;
width:73%;
float:center;
height:900px;
text-align:center;
padding-top:50px;
padding-bottom:50px;
padding-right:50px;
padding-left:50px;
margin-left:130px;
margin-right:150px;
margin-top:80px;
margin-bottom:80px;
}
.child-1 p {
color: white;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:center;
width:80%;}
.child-2{
background-color:aliceblue;
width:300px;
float:right;
height:400px;
margin:50px;
text-align:left;
padding-left:10px;}
.child-2 p{
color: black;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:left;
width:80%;}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=styles.css>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Daycare Center</title>
</head>
<body>
<div>
<div class="parent">
<header>
<h1 class="lulu"> DAYCARE</h1>
</header>
<style>
img {
border: 1px solid #ddd;
border-radius:2px;
padding: 5px;
max-width:auto;
max-height:auto;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<img src="tumbnail.jpg" alt="kids" style="width:100px" style="height:100px">
</div>
<div>
<div class="child-1">
<h3 style="color:white;">
Child care: Making the best choice
for your family</h3>
<p>.</p>
<div class="row">
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="house.jpg" alt="house" style="width:100px" style="height:100px">
</div>
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="heart.jpg" alt="heart" style="width:100px" style="height:100px">
</div>
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="feet.jpg" alt="feet" style="width:100px" style="height:100px">
</div>
<div class="row">
<div class="column">
<img src="child.png" alt="child" style="width:100%">
</div>
<div class="column">
<img src="nanny.png" alt="nanny" style="width:100%">
</div>
</div>
<div>
<div style="position:relative; right:8px; top:90px;">
<div class="child-2">
<h3>About us:</h3>
<p>.</p>
<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<main>
<section>
</section>
</main>
</div>
</body>
</html>
It is not ideal to use several differant styling options on one page.
It is recommened that all styling is maintained seperately from your pages code.
e.g by using a css.
Using the img tag in your css will affect ALL img tags in your code.
If you want to add additional specific changes to certain images then you should add a class e.g
<img class="fill"/>
.fill {
width:100%;
height:100%;
}
SPECIFICITY
If an item in your css is after a conflicting class the subsequent one will take priority as long as the element doesn't have a more dominat identifier.
You can read more about that here: https://www.w3schools.com/css/css_specificity.asp
For this example, having .fill after img will cause this image to be width and height 100% rather than 100px
EXAMPLE
img {
background:#cdf;
width:100px;
height:100px;
}
.fill {
width:100%;
height:100%;
}
<img src="https://i.stack.imgur.com/BxBTo.png">
<img class="fill" src="https://i.stack.imgur.com/BxBTo.png">
I recommend you clear the styling from your html and add it to your css.
body {
background-image: url("bg.jpg");
}
h2,
p {
text-align: center;
}
img {
border: 1px solid #ddd;
border-radius: 2px;
padding: 5px;
height: 100px;
width: 100px;
max-width: auto;
max-height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.lulu {
font-family: Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}
.parent {
background-color: lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height: 200px;
}
.column {
float: left;
width: 30%;
padding: 5px;
}
.child-1 {
background-color: lightgray;
width: 73%;
float: center;
height: 900px;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-left: 50px;
margin-left: 130px;
margin-right: 150px;
margin-top: 80px;
margin-bottom: 80px;
}
.child-1 p {
color: white;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
text-align: center;
width: 80%;
}
.child-2 {
background-color: aliceblue;
width: 300px;
float: right;
height: 400px;
margin: 50px;
text-align: left;
padding-left: 10px;
}
.child-2 p {
color: black;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
text-align: left;
width: 80%;
}
<div>
<div class="parent">
<header>
<h1 class="lulu"> DAYCARE</h1>
</header>
<img src="tumbnail.jpg" alt="kids">
</div>
<div>
<div class="child-1">
<h3 style="color:white;">Child care: Making the best choice for your family</h3>
<p>.</p>
<div class="row">
<div class="column">
<img src="house.jpg" alt="house">
</div>
<div class="column">
<img src="heart.jpg" alt="heart">
</div>
<div class="column">
<img src="feet.jpg" alt="feet">
</div>
<div class="row">
<div class="column">
<img src="child.png" alt="child" style="width:100%">
</div>
<div class="column">
<img src="nanny.png" alt="nanny" style="width:100%">
</div>
</div>
<div>
<div>
<div class="child-2">
<h3>About us:</h3>
<p>.</p>
<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<main>
<section>
</section>
</main>
</div>
</div>
</div>
</div>
<style type="text/css">
* {margin: 0px; padding: 0px;}
#Header {width:100%;height: 100px;background-color: black;}
#Header #Tools { width: 600px;height: 100px;line-height: 100px;float: left;background-color: brown;overflow:hidden}
#Header #Tools a {position:relative; text-align:center;padding-left:50px; padding-right:50px;border-style:solid;border-width: 5px;border-color: chartreuse;text-decoration: none;font-size: 20px;color: aliceblue;}
#Header #Tools li { float: left;list-style: none;}
#Header #Login {width: 150px;height: 100px; background-color: brown;float: right;line-height: 100px}
#Header #Search {width: 700px; height: 100px;float: left;line-height: 100px; padding-left: 200px;position:relative}
#Header #Search #Text {border:0px;height: 38px;width: 300px;padding-left: 10px; font-size: 15px;position:absolute;top:31px}
#Header #Search #Submit {border-style: none;background: url("../pictures/search.jpg");width: 35px;height: 38px;position:absolute;top:31px;left:500px}
#Header #Login a {border-color: chartreuse;text-decoration: none;font-size: 20px;color: aliceblue;padding-left: 10px}
#Header #Tools .tools1_content {display:none;border-width:2px;border-style: solid;border-color:red; width: 400px;height: 250px;background-color: burlywood;position:absolute;top:80px;left:50px}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestPage</title>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<div id="Header">
<div id="Tools">
<ul>
<li id="Li" onmouseover="showdiv()" onmouseout="hidediv()">
Tools1
<div class="tools1_content" id="Li_div">
<div>SubTools1</div>
</div>
</li>
<li>
Tools12
<div class="tools1_content">
<div>SubTools2</div>
</div>
</li>
<li>
Tools13
<div class="tools1_content">
<div>SubTools3</div>
</div>
<li/>
</ul>
</div>
<div id="Search">
<form>
<input id="Text" type="text" placeholder="please enter keywords to search" />
<input id="Submit" type="submit" value="" />
</form>
</div>
<div id="Login">
Loagin
Info
</div>
<div id="Content_Left">
<ul>
<li>T1</li>
<li>T2</li>
<li>T3</li>
</ul>
</div>
</div>
</body>
</html>
The Normal behavior
The issues
I just want them in one horizontal line,but when I drag the browser edge resulting in browser screen smaller.
The html element will drop to unexpected position.I want them only change in header div.
You should not use float for layout unless you need support for Internet Explorer. Since flex does not work in IE<10 at all and is buggy in IE>=10.
Flexbox is widely (display: flex) used nowdays and you should rely on this.
You will need to remove or adjust the widths of the element to % values to keep everything responsive.
I set flex as display to the parent element already to keep the element horizontally aligned. (see below)
Also you should try to avoid absolute display as much as possible and also try to use % or "em" values where possible. They are more responsive and more dynamic than static px values.
Resource: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Responsive Design (adjust design on different sizes): https://developer.mozilla.org/de/docs/Web_Development/Mobile/Responsive_design
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#Header {
width:100%;
height: 100px;
background-color: black;
display: flex;
}
#Header #Tools {
margin: 0;
padding: 0;
width: 50%;
height: 100px;
line-height: 100px;
background-color: brown;
overflow:hidden
}
#Header #Tools li {
display: inline;
list-style: none;
margin-left: 20px
}
#Header #Tools a {
position:relative;
text-align:center;
padding-left:50px;
padding-right:50px;
border-style:solid;
border-width: 5px;
border-color: chartreuse;
text-decoration: none;
font-size: 20px;
color: aliceblue;
}
#Header #Login {
height: 100px;
background-color: brown;
line-height: 100px
}
#Header #Search {
width: 40%;
height: 100px;
line-height: 100px;
margin-left: 5%;
position:relative
}
#Header #Search #Text {
border:0px;
height: 38px;
padding-left: 10px;
font-size: 15px;
position:relative;
}
#Header #Search #Submit {
border-style: none;
background: url("../pictures/search.jpg");
width: 35px;
height: 38px;
position:relative;
}
#Header #Login {
width: 10%;
border-color: chartreuse;
text-decoration: none;
font-size: 20px;
color: aliceblue;
padding-left: 10px
}
#Header #Login a {
border-color: chartreuse;
text-decoration: none;
font-size: 20px;
color: aliceblue;
padding-left: 10px
}
#Header #Tools .tools1_content {
display:none;
border-width:2px;
border-style: solid;
border-color:red;
height: 250px;
background-color: burlywood;
position:absolute;
top:80px;
left:50px
}
#Content_Left{
display: none;
}
</style>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestPage</title>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<div id="Header">
<ul id="Tools">
<li id="Li" onmouseover="showdiv()" onmouseout="hidediv()">
Tools1
<div class="tools1_content" id="Li_div">
<div>SubTools1</div>
</div>
</li>
<li>
Tools12
<div class="tools1_content">
<div>SubTools2</div>
</div>
</li>
<li>
Tools13
<div class="tools1_content">
<div>SubTools3</div>
</div>
<li/>
</ul>
<div id="Search">
<form>
<input id="Text" type="text" placeholder="please enter keywords to search" />
<input id="Submit" type="submit" value="" />
</form>
</div>
<div id="Login">
Loagin
Info
</div>
<div id="Content_Left">
<ul>
<li>T1</li>
<li>T2</li>
<li>T3</li>
</ul>
</div>
</div>
</body>
</html>
I effectively have one goal in mind:
The ".hours" div should be centered and BELOW the two divs (.phone and .mail) which share the screen size equally.
so effectively:
.nav
.phone / .mail
.hours
\\\\\.footer/////
HOWEVER: Here is the tricky part... it shows up okay in Atom. Whenever I try to see it in Chrome though, it puts .hours before the .phone and .mail line...
Why?
Note: Just checked in Safari as well, and the same error is displayed. Thoughts?
* {
margin:0;
font-family: 'Roboto', sans-serif;
}
.topWrapper{
position: fixed;
top:0;
z-index:10;
width: 100%;
}
.header{
/*border: 1px solid rgb(0,0,0);*/
text-align: left;
width: 100%;
background-color: white;
height:75px;
position: relative;
top:0px;
}
#title{
padding-left: 10px;
padding-top: 10px;
font-size: 50px;
}
#contactBox{
position:fixed;
right:20px;
top:20px;
width:100px;
height:40px;
background-color: black;
color:white;
}
/*CONTACT US BUTTON = FTEXT*/
.fText{
font-size: 15px;
padding: 10px;
}
.nav{
height:50px;
width:100%;
border: 1px solid rgb(200,200,200);
background-color: white;
}
#nBar{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
li {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 15px 40px 10px 40px;
}
#home{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
}
#bio{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
}
#projects{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
}
#contact{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
}
#home:hover{
background-color: black;
color:white;
/*transition: 0.25s;*/
}
#bio:hover{
background-color: black;
color:white;
/*transition: 0.25s;*/
}
#projects:hover{
background-color: black;
color:white;
/*transition: 0.25s;*/
}
#contact:hover{
background-color: black;
color:white;
/*transition: 0.25s;*/
}
a{
text-decoration: none;
color:black;
}
/*body starts here*/
.contentWrap{
width:100%;
position:absolute;
top:135px;
z-index: 1;
}
.container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
min-width: 960px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.phone{
width:48%;
height: 350px;
-webkit-box-ordinal-group:2;
-ms-flex-order:1;
order:1;
border-right: 1px solid rgb(200,200,200);
padding-left:10px;
/*padding-right: ;*/
}
.phone:hover{
background-color: rgb(208, 177, 202);
}
.phoneImg{
height:auto;
width:75%;
}
.mail{
width:47%;
height:350px;
-webkit-box-ordinal-group:2;
-ms-flex-order:1;
order:1;
padding-left: 10px;
}
.mail:hover{
background-color: rgb(208, 177, 202);
}
.mailImg{
height:auto;
width:75%;
}
/*hours is the entire hours div*/
.hours{
width:100%;
-webkit-box-ordinal-group:3;
-ms-flex-order:2;
order:2;
padding-bottom: 50px;
}
/*title of hours*/
.textHours{
padding-top: 10px;
text-align: center;
font-size: 50px;
}
/*available times*/
.timewindow{
text-align: center;
padding-top: 10px;
font-size: 20px;
}
/*the explanation of the time*/
.timeExp{
text-align: center;
padding:10;
}
.footer{
text-align: center;
width:100%;
-webkit-box-ordinal-group:4;
-ms-flex-order:3;
order:3;
height:65px;
border-top: 1px solid rgb(200,200,200);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Dockmann Web Services">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Paul A">
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styleContact.css" />
<script src="jquery-3.1.1.min.js"></script>
type="text/javascript" src="scriptContact.js"></script>
<title>dockmann</title>
</head>
<body>
<div class="topWrapper">
<div class="header">
<h1 id="title">DOCKMANN</h1>
<a href="mailto:"><div id="contactBox">
<p class="fText">
Contact Us!
</p>
</div>
</a>
</div>
<div class="nav">
<ul id="nBar">
<!--inserted .navigation because it will help
differentiate the nav bar links when I add
other "<a> links" along the page -->
<a class="navigation" href=""><li id="home">
HOME
</li></a>
<a class="navigation" href=""><li id="bio">
BIO
</li></a>
<a class="navigation" href=""><li id="projects">
PROJECTS
</li></a>
<a class="navigation" href=""><li id="contact">
CONTACT
</li>
</a>
</ul>
</div>
</div>
<!-- body starts here -->
<div class="contentWrap">
<div class="container">
<div class="phone">
<center>
<a class="phoneLink" href="tel:">
<img class="phoneImg" src="images/phone.png" /></a>
</center>
</div>
<div class="mail">
<center>
<a class="mailLink" href="mailto:">
<img class="mailImg" src="images/mail.png" /></a>
</center>
</div>
<div class="Hours">
<h1 class="textHours">HOURS:</h1>
<h5 class="timewindow">9:00 (EST) - 21:00 (EST)</h5>
<p class="timeExp">
We normally pick up our phones during this time window.
<br />
However, it is okay to call afterhours.
<br />
(All times shown are shown in local Miami time)
</p>
</div>
<div class="footer">
footer;
</div>
</div>
</div>
</body>
</html>
Classes are case-sensitive, and you accidentally put class="Hours" in your HTML. Fix that and you'll see the CSS apply.
I've been racking my brains to to figure out where I went wrong. The bottom div stretches all the way right will everything stays center page but the left side won't stretch full. Also when I resize the window smaller all the sub-divs collapse. Ideas???
https://jsfiddle.net/g506gk51/
Thank you in advance!
<style type="text/css">
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
body {
background-color: white ;
color: #543864 ;
z-index: -10;
clear: both;
}
#topmenu {
float: left;
padding-top: 50px;
position: relative;
}
#topmenu ul {
list-style:none;
}
#topmenu li {
float:left;
padding: 5px 30px 0px 20px;
margin-right: 20px;
border-right: 1px solid #292E37;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #292E37;
}
#name {
margin-bottom: 5px;
color: #543864;
display:inline-block;
}
#topcontainer {
width: 100%;
height: 60px;
margin-bottom: 15%;
font-family: Lucida Grande;
margin-right: 50px;
border-radius: 25px;
float: left;
position: relative;
text-align: center;
padding-bottom: 10%;
}
#footer {
background-color:#B9B7C4;
height: 11%;
width: 100%;
z-index: 1;
position:absolute;
margin-top: 10%;
margin-bottom: 10%;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#Header {
float:left;
padding-left: 75px;
}
.circlefooter {
width: 50px;
height: 50px;
float: left;
margin: 25px 25px 0 175px;
}
.circlefooter p {
padding-left: 75px;
width: 150px;
font-size: 12px;
}
.circlefooter img {
height: 50px;
float: left;
}
.circlefooter a:hover {
font-size: 12px;
}
</style>
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div id="topcontainer">
<div id ="Header">
<h1 id="name">Johnny</h1>
<br />
Software QA | Software Developer <br />
Six Sigma Black Belt | Veteran <br />
Entrepreneur
</div>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--<div id="break"></div>-->
<div id="footer">
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028867_MB__phone_zps8zdslqey.png" />
<p >Cell: <br/> 123-456-7890</p>
</div>
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028672_18_email-128_zps9hghdji6.png"/>
<p>Email: <br/> test#domain.com</p>
</div>
<div class="circlefooter">
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028664_06_linkedin-128_zpsd5onsu1x.png"/>
</div>
</div>
</div>
</body>
</html>
I try to understand what you meant, I got this from your code.
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
html{
height: 100%;
}
body {
position: relative;
min-height: 100%;
background-color: white ;
color: #543864 ;
z-index: -10;
clear: both;
}
#topmenu {
float: left;
padding-top: 50px;
position: relative;
}
#topmenu ul {
list-style:none;
}
#topmenu li {
float:left;
padding: 5px 30px 0px 20px;
margin-right: 20px;
border-right: 1px solid #292E37;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #292E37;
}
#name {
margin-bottom: 5px;
color: #543864;
display:inline-block;
}
#topcontainer {
display: block;
height: 60px;
margin-bottom: 15%;
font-family: Lucida Grande;
position: relative;
text-align: center;
padding-bottom: 10%;
}
#topcontainer:after {
content: "";
clear: both;
}
#footer {
background-color:#B9B7C4;
height: 11%;
width: 100%;
z-index: 1;
margin-top: 10%;
margin-bottom: 10%;
display: table;
table-layout: fixed;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
display: block;
float: left;
}
.circlefooter {
display: table-cell;
padding: 15px;
vertical-align: middle;
}
.circlefooter p {
margin: 0;
padding-left: 75px;
font-size: 12px;
}
.circlefooter img {
height: 50px;
float: left;
}
.circlefooter a:hover {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div id="topcontainer">
<div id ="header">
<h1 id="name">Johnny</h1>
<br />
Software QA | Software Developer <br />
Six Sigma Black Belt | Veteran <br />
Entrepreneur
</div>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--<div id="break"></div>-->
<div id="footer">
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028867_MB__phone_zps8zdslqey.png" />
<p >Cell: <br/> 123-456-7890</p>
</div>
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028672_18_email-128_zps9hghdji6.png"/>
<p>Email: <br/> test#domain.com</p>
</div>
<div class="circlefooter">
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028664_06_linkedin-128_zpsd5onsu1x.png"/>
</div>
</div>
</div>
</body>
</html>
I've set the height of my wrapper to auto so it would automatically adjust to any screen but the wrapper isn't wrapping around the inner divs. The wrapper is seems to be 150px even though I don't know why. Note: The wrapper is the container.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Playstation 4 Home Page English</title>
<style type="text/css">
#import url("styles/Default Style.css");
#import url("styles/Homepage.css");
#import url("styles/styles.css");
</style>
<link rel="shortcut icon" href="images/icons/Playstation-logoicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../engine1/style.css" />
<script type="text/javascript" src="../engine1/jquery.js"></script>
</head>
<body style="background:#CCCCCC;">
<div id="Container">
<div id="Header"> <img src="images/Header.png" width="400" height="95"
style=
"position: absolute;
left: 189px;
top:10px;">
<div id="Social-Networks"><img src="images/icons/Playstation-logo.png" width="36" height="36"><img src="images/icons/1387937374_Youtube.png" width="36" height="36" style="margin-left:5px;"><a href="https://twitter.com/PlayStation" title="Officiële Playstation Twitter" target="_blank"><img src="images/icons/1387937314_Twitter.png" width="36" height="36"
style="margin-left:5px;"></a><img src="images/icons/1387947454_Facebook.png" width="36" height="36" style="margin-left:5px;"></div>
</div>
<div id="ContentHolder">
<div id='cssmenu'>
<ul>
<li class='active'><a href='homepage.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Artikelen</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Nederlands</span></a> </li>
<li class='has-sub'><a href='#'><span>Engels</span></a> </li>
</ul>
</li>
<li><a href='gallery.html'><span>Galerij</span></a></li>
<li style="float:right" class='last'><a href='#'><span>Over</span></a></li>
<li style="float:right" class='has-sub'><a href='#'><span>Contact</span></a></li>
</ul>
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="../data1/images/SonyPlaystationGeschiedenisSlider.jpg" alt="SonyPlaystationGeschiedenisSlider" title="Het onstaan van Het Gaming Icoon" id="wows1_0"/></li>
<li><img src="../data1/images/RemotePlayPS4PSVita.jpg" alt="RemotePlayPS4PSVita" title="Remote-Play voor de PS4 en PS Vita" id="wows1_1"/></li>
</ul></div>
<div class="ws_bullets"><div>
1
2
</div></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="../engine1/wowslider.js"></script>
<script type="text/javascript" src="../engine1/script.js"></script>
<div id="Side-Content">
<script type="text/javascript" src="http://output78.rssinclude.com/output?type=js&id=815822&hash=b0095ae8bebb910e5dc0f397a646173e"></script>
</div>
<div id="ContentHolder1">
<h1>Welkom op onze Playstation 4 News Website!</h1>
adjskl;fjaklsfdjaflds;
<hr>
lkdajf;lkdaj;fas
</div>
</div>
</div>
<div id="Copyright">©Copyright Mounteder Abdulrazag, Tom Borghouts</div>
</div>
</body>
</html>
And my CSS:
#charset "utf-8";
/* CSS Document */
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
#Container {
height:auto;
width: 975px;
margin-left:auto;
margin-right:auto;
background-color:#006;
overflow:hidden;
}
#Wrapper {
margin:auto;
background-color:#EEEEEE;
width: 975px;
margin-left: auto;
margin-right: auto;
}
#ContentHolder {
width:975px;
background-color:#0F0;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
#Header {
height: 125px;
margin-right: auto;
margin-left: auto;
background-color: #000;
width: 975px;
}
#Social-Networks {
height:36px;
width:164px;
margin-right:230px;
margin-top:80px;
float:right;
}
#Social-Networks img {
opacity:1;
}
#Social-Networks img:hover {
opacity:0.9;
}
#ContentHolder1 {
width:650px;
height:925px;
margin-left:42px;
margin-right:auto;
margin-top:-10px;
background-color:transparent;
color: #8B8B8B;
}
#Side-Content {
width:250px;
height:600px;
float:right;
background-color:transparent;
}
#Content1 {
width: 725px;
height:1235px;
color: #9B9B9B;
margin-top:-18px;
margin-left:5px;
background-color: #03C;
border-radius: 4px 0px 0px 0px;
text-align: center;
font-family: "Open Sans";
}
hr {
height: 1px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 4px;
}
#Copyright {
height: 25px;
width: 975px;
margin-right: auto;
margin-left: auto;
background-color: #0000d3;
text-align:left;
font-family:"Open Sans";
}
try
#Container {
float: left; //this
display: inline-block; // or this
}