I need help with my css code. I don't want my web site to scroll up and down, I want to make it full screen and responsive. I tried css height:100vh, height: 100% and height:1920px but it was still scrolling up and down. This problem is treated in a lot of place, but I could not find a solution that fit my need.
* {
margin: 0px;
padding: 0px;
font-family:sans-serif ;
}
body{
height: 100%;
width: 100%;
}
#sidebar{
margin: 90px 0px;
position: absolute;
width: 300px;
height: 100%;
background:#22356C ;
left: -240px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:white;
list-style: none;
text-align: center;
padding: 15px 10px;
}
#sidebar .toggle-btn{
position: absolute;
left: 310px;
top: 5px;
}
#sidebar .toggle-btn span{
display: block;
width: 30px;
height: 5px;
background:#22356C ;
margin: 5px 0px ;
}
#menu{
position: absolute;
margin: 40px 220px;
height: 128px;
width: 100%;
}
#menu1{
position: absolute;
margin:0px 100px;
color:white;
list-style: block;
}
#bolock{
height: 100%;
width: 100%;
}
#page{
position: absolute;
margin: 90px 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/stylesheet.css" integrity="" crossorigin="anonymous">
<link rel="stylesheet" href="css/mycss.css" integrity="" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Title</title>
<div id="sidebar">
<ul>
<li></li>
<li></li>
<li>
Admin <img src="icones/admin.png" height="35" width="35" align="right">
</li>
<li>Frigo <img src="icones/frigo.png"height="35" width="35"align="right"></li>
<li><img src="icones/arow%20(1).png" height="10" width="10" onclick="myFunction()"> Paramétrage<img src="icones/Composant%209%20–%201.png"height="35" width="35"align="right"> <ul id="Paramétrage">
<div id="menu1"style="display:none;">
<li>Alerts</li>
<li>Produit</li>
<li>contrainte espace</li>
<li>compte</li>
</div>
</ul>
</li>
</ul>
</div>
<nav class="navbar navbar-light bg-light">
<img src="icones/logo%20bws.png" class="d-inline-block align-top" alt="">
</a>
<div id="menu">
<img src="icones/balise.png"onclick="togglesidebar()">
</div>
<div class="row" id="logs">
<p>
<img src="icones/Groupe%20102.png"height="40" width="40">
</p><p>
<img src="icones/Groupe%20104.png"height="40" width="40">
</p>
</div>
</nav>
</head>
<body>
<div class="page">
<iframe name="bolock" frameborder="0" id="bolock"></iframe>
</div>
<script>
function togglesidebar() {
document.getElementById("sidebar").classList.toggle('active');
}
</script>
<script>
function myFunction() {
var x = document.getElementById("menu1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script src="css/popper.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/slim.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/bootstrap.min.js.js" integrity="" crossorigin="anonymous"></script>
</body>
</html>
responsive sidebar
you should add the property
overflow: hidden
to the body tag
What I understood from your question is that you want that there must be no scrolling at all in the web page, then add overflow: hidden;to the body and the your page will never scroll at all until there is no internal link in it. (learn more about overflow)
Now, the next thing, if you want the body to scroll but don't wants the sidebar to scroll along with it as if it is fixed. Then, try the position: fixed; property of CSS to the element which needs to be fixed at its place and should not be scrolling (learn more about positions).
Related
I'm building a website and I want to make the title and logo to be on the header with the title in the center and logo on the left.
The issue is the title is pushing the logo down.
I've tried the following:
Margin
Padding
Moving the code around
Changing "Display"
What else could I try?
.header {
position: fixed;
height: 100px;
width: 100%;
left: 0;
top: 0;
background-color: rgb(204, 31, 0);
}
.titlemain {
font-size: 4vw;
text-align: center;
padding-top: 1.5%;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
https://pastebin.com/Vvw7LtQE - CSS
<div class="header">
<h1 class="titlemain">The Little Beauty Studio</h1>
<img class="logomain" src="img/lblogo.png" alt="The PHP logo">
</div>
https://pastebin.com/0BKmtkZ8 - HTML
Thanks for any help.
try this code:
css:
.header {
position: fixed;
height: 100px;
width: 100%;
left: 0;
top: 0;
background-color: rgb(204, 31, 0);
}
.titlemain {
font-size: 4vw;
text-align: center;
padding-top: 1.5%;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.header img {
position: absolute;
top: 41%;
left: 3%;
}
html:
<div class="header">
<h1 class="titlemain">The Little Beauty Studio</h1>
<img class="logomain" src="img/lblogo.png" alt="The PHP logo">
</div>
I fixed it by displaying inline, then floating the logo left and adjusting the padding to center the text and position the logo.
.logomain {
float: left;
padding: 2.5px 13.5% 0 175px;
}
.titlemain {
font-size: 4vw;
padding-top: 1.5%;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
display: inline;
}
If you can change your HTML structure, I would do it this way:
HTML
<div class="header">
<img class="logomain" src="img/lblogo.png" alt="The PHP logo">
<h1 class="titlemain">The Little Beauty Studio</h1>
</div>
CSS
.header {
position: fixed;
height: 100px;
width: 100%;
left: 0;
top: 0;
background-color: rgb(204, 31, 0);
display: flex;
flex-direction: row;
}
.header img,
.header h1 {
align-self: center;
}
h1 {
width: 100%;
text-align: center;
}
If you are working on a website, I'd very much like to recommend you use a UI framework (Bootstrap) which will make most of the tasks easier for you.
They are providing a pre-defined set of styles using which you can overcome many primitive issues and also, you can do a really good job with your projects. Most of the commercially available HTML websites use Bootstrap or something related.
That being said, let's look into your problem. This is the simplest way to get done what you want.
<div class="header">
<table width="100%">
<tr>
<td>
<img class="logomain" src="img/lblogo.png" alt="The PHP logo">
</td>
<td>
<h1 class="titlemain">The Little Beauty Studio</h1>
</td>
</tr>
</table>
</div>
Now let's see how we can improve this with the use of Bootstrap!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
</body>
</html>
Do some lite Google search on the topic and you can find some good materials with reference to this.
Good luck!
Please try this code
HTML
<header>
<img src="https://api.akeneo.com/img/illustrations/illus--Assetcategory.svg">
<h1>Your Title Area</h1>
</header>
Css
header {
position: fixed;
width: 100%;
border:solid 1px rgba(0,0,0,0.8);
vertical-align: middle;
line-height: 4em;
}
header img {
width:100px;
float:left;
}
header h1{
text-align:center;
}
https://jsfiddle.net/ajimon/msc3opq5/25/
My ultimate goal is to be able to fit my grid in 2 columns perfectly and also so it fits entire screen on my mobile devices. Right now, I still have to scroll down a bit, however that is not what I wanted. I want my screen to be not scrollable but have images/screen fit in perfectly the way I desire. Getting rid of spaces in between 2 columns perhaps. Right now my screen looks bit off and needs a little scrolling. The 2 pictures on the bottom doesn't fit and requires scrolling like shown on the picture.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/swiper.min.css') }}">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
top: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow-y: auto;
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body {
margin: 0;
padding: 0;
background-color: white;
font: 10px/13px 'Lucida Sans', sans-serif;
}
.wrap {
overflow: hidden;
margin: 10px;
}
.box {
float: center;
position: relative;
width: 200%;
padding-bottom: 100%;
}
.boxInner {
position: absolute;
left: 50px;
right: -5px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.fixed {
position: absolute;
left: 30px;
right: 10px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 79%;
height: 75%
}
.boxInner img.img2 {
width: 100%;
height: 50%
}
body.no-touch .boxInner:hover .titleBox,
body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 100;
}
#media only screen and (max-width: 480px) {
/* Smartphone view: 1 tile */
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.box {
width: 50%;
padding-bottom: 30%;
}
}
.topnav {
overflow: hidden;
background-color: #66CDAA;
}
.topnav a {
float: center;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #98FB98;
color: white;
}
.topnav .icon {
display: none;
}
.header1 {
margin: auto;
float: center;
padding: 15px;
font-size: 20px;
}
</style>
</head>
<body class="no-touch">
<!-- Swiper -->
<div class="topnav" id="myTopnav">
Let's Get To Know You!
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- Define all of the tiles: -->
<div class="header1">What's your skin color?</div><br><br>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/U8pJVY0.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/Kz06qEO.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/43tH7Td.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/3uZKpV2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/SF3vYC9.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/8hujzfl.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/cxvELu2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/zLD3Nv1.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/baYebAV.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/iLd0ukK.png" />
</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="../dist/js/swiper.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='swiper.min.js') }}"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
</script>
<script type="text/javascript">
$(function() {
// See if this is a touch device
if ('ontouchstart' in window) {
// Set the correct body class
$('body').removeClass('no-touch').addClass('touch');
// Add the touch toggle to show text
$('div.boxInner img').click(function() {
$(this).closest('.boxInner').toggleClass('touchFocus');
});
}
});
</script>
</body>
</html>
It's because your "swiper container" is height:100%, but starts 33px down because of the element above it. You could try calc() css if your browser target range allows it in order to make it 100% height minus the height of the element above. Something like:
height: calc(100% - 33px);
I'm making a multipage website and I'm including a navbar and a footer on each page, the navbar is in place and works just fine but my footer is all over the place. In some pages it's exactly where it should be, others it's in the middle of the page but it was like that before I even added page content.
I've tried a few things I found online but nothing's worked so far.
HTML:
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/navFooter.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="navbar"></div>
<div class="col-md-12">
<table class="table">
<td style="border: none;"><p>Choose the type of comparison you'd like to make.</p></td>
<td>
<b>Quick Comparison</b><br>
Compare all counties<br>
<b>Custom Comparison</b><br>
Compare selected counties and/or jurisdictions only
</td>
</table>
</div>
<div id="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$("#navbar").load("navbar.html");
});
$(function(){
$("#footer").load("footer.html");
});
</script>
</body>
CSS:
html, body {
height: 100%;
width: 100%;
}
body {
padding-top: 90px;
position: relative;
overflow: scroll;
}
.footer {
position: absolute;
margin: 0;
width: 100%;
background-color: #19D8FF;
padding: 25px;
border-top: 4px solid #3399CC;
min-height: 150px;
max-height: 250px;
}
Footer HTML:
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-3 pull-left">
<img src="img/Wordmark.png" alt="Logo">
</div>
<div class="col-md-5">
Links |
Contact |
A-Z Index |
Site Map |
Disclaimer</li>
</div>
<div class="col-md-4">
<p class="muted pull-right">© 2017 All rights reserved</p>
</div>
</div>
</div>
</footer>
This code should put you in the right direction. I added bottom: 0 and changed the position to fixed. I also removed an uneeded tag you had. This will put it at the absolute bottom of the view and always be fixed at the bottom.
html, body {
height: 100%;
width: 100%;
}
body {
padding-top: 90px;
position: relative;
overflow: scroll;
}
.footer {
position: fixed;
bottom: 0;
margin: 0;
width: 100%;
background-color: #19D8FF;
padding: 25px;
border-top: 4px solid #3399CC;
min-height: 150px;
max-height: 250px;
}
I'm making a 2 column webpage layout. I wanna make a border that takes 100% of the page height. I have tried a few different things but I alwys get the same result, it only adds border whenever there's content. Anyone has some advice in this?
HTML
<body>
<div id="top">
<nav>
<a class="navitem" href="#">Stream</a>
<a class="navitem" href="/discover">Discover</a>
</nav>
<form action="#" class="form-wrapper cf">
<input type="text" placeholder="Search..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search...'" required>
<button type="submit">Search</button>
</form>
</div>
<div id="wrapper">
<div id="content">
<h1> Content</h1>
</div>
<div id="divider"></div>
<aside>
<h1>right bar</h1>
<footer>
<nav>
<a class="navitem_footer" href="/contact">Contact</a>
<a class="navitem_footer" href="/about">About us</a>
<a class="navitem_footer" href="/premium">Premium</a>
</nav>
</footer>
</aside>
</div>
</body>
CSS
#wrapper {
width: 990px;
margin-right: auto;
margin-left: auto;
}
#content {
width: 600px;
float: left;
}
#divider {
position: absolute;
overflow: hidden;
left: 900px;
right: 0;
top: 0;
bottom: 0;
border-left: 1px solid rgba(192,192,192,0.6);
}
aside {
float:right;
width: 390px;
}
footer {
height: 50px;
clear: both;
position:fixed;
bottom:0;
}
Thank you in advance.
I got the border working now, but its covering my header & i tried overflow hidden but that didn't work.
Screenshot : http://i62.tinypic.com/2czbp6s.png
For this you can use tag by which you can easily divide main page into 2 columns
and link will be your HTML pages
CODE:
<!DOCTYPE html>
<html>
<frameset cols="50%,50%" border="10" BORDERCOLOR=#ff0000>
<frame src="first_page.html" frameborder="1">
<frame src="second_page.html" frameborder="1">
</frameset>
</html>
And for 100% border you can use this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrapper {
position: absolute;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 5px solid red;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapper {
width: expression((m=document.documentElement.clientWidth-10)+'px');
height: expression((m=document.documentElement.clientHeight-10)+'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
</div>
</body>
</html>
Someone noticed me today that my webpage has a empty space on the right on smaller screens. I am working hard to find the problem but I haven't found it yet.
As you see, there is a grey empty space next to my website. With the width set to 100% and the minimal width set to 1020px.
On bigger screens, the problem resolves itself and the website has the correct width of 100%.
Does someone recall this problem, or know how to solve it?
Website viewable on http://tinyurl.com/c2ohcpu
CSS CODE
html,body {
margin:0px;
width: 100%;
min-width:1020px;
background-color: #eaeeef;
padding: 0px;
font-family: Arial;
font-size: 12px;
color: #7f8386;
}
img {
border: 0;
}
#f-container {
width: 100%;
height: auto;
}
#h-container {
width: 100%;
}
#container {
width: 1020px;
height: auto;
margin: 0 auto;
padding-top: 10px;
margin-top: -1px;
background-image: url('../images/container_bg.png');
background-repeat: repeat-y;
border: 1px solid #d4d6d7;
margin-bottom: 10px;
}
#header {
width: 100%;
height: 59px;
background-image: url('../images/header-repeat.png');
background-repeat: repeat-x;
min-width: 1020px;
z-index: 10000;
float: left;
}
#header #h-container {
width: 1020px;
height: 59px;
margin: 0 auto;
}
#header #logo-container {
width: 414px;
height: 40px;
margin-left: 10px;
border: 0;
float: left;
}
#header h1 {
margin:0;
padding:0;
}
#header #logo-container #logo {
width: 414px;
height: 40px;
}
#header #topMenu {
width: 580px;
height: 50px;
margin-right: 10px;
float: right;
}
#header #topMenu ul.menu {
height: 50px;
margin: 0;
padding: 0;
float: right;
}
#header #topMenu ul.menu li {
list-style-type: none;
float: left;
padding-left: 10px;
padding-right: 10px;
height: 50px;
}
#header #topMenu ul.menu li:hover, #header #topMenu ul.menu li.current {
background-image: url('../images/menu_active.png');
background-repeat: no-repeat;
background-position: center;
}
#header #topMenu ul.menu li a {
text-decoration: none;
display: block;
height: 50px;
}
/* Home */
#header #topMenu ul.menu .item-102 a {
background-image: url('../images/menu/home.png');
width: 58px;
}
/* Nieuws */
#header #topMenu ul.menu .item-103 a {
background-image: url('../images/menu/nieuws.png');
width: 71px;
}
/* Diensten */
#header #topMenu ul.menu .item-104 a {
background-image: url('../images/menu/diensten.png');
width: 80px;
}
/* Portfolio */
#header #topMenu ul.menu .item-105 a {
background-image: url('../images/menu/portfolio.png');
width: 81px;
}
/* Contact */
#header #topMenu ul.menu .item-106 a {
background-image: url('../images/menu/contact.png');
width: 75px;
}
/* Hosting */
#header #topMenu ul.menu .item-115 a {
background-image: url('../images/menu/hosting.png');
width: 72px;
}
#content-left {
width: 750px;
height: auto;
float: left;
padding: 10px;
}
p {
padding: 0px;
margin: 0px;
}
#content-left h2.title {
color: #33393e;
font-size: 13pt;
width: 100%;
}
#content-left h2 a {
display: block;
color: #33393e;
text-decoration: none;
font-size: 13pt;
}
#content-left ul.actions{
display: none;
}
#content-left .item-block {
width: 100%;
height: auto;
border-bottom: 1px dashed #d4d6d7;
padding-bottom: 20px;
}
#content-left .item-block .published {
width: 745px;
background: #CCEBF5;
color: black;
padding-top: 3px;
padding-left: 5px;
height: 17px;
margin-bottom: 5px;
}
#content-right {
width: 230px;
height: auto;
float: right;
padding: 10px;
}
#content-right h2.title {
color: #33393e;
font-size: 13pt;
width: 100%;
}
#content-right h2 a {
display: block;
color: #33393e;
text-decoration: none;
font-size: 13pt;
}
h2 a:hover {
font-weight: bold;
cursor: pointer;
}
#footer {
width: 100%;
text-align: center;
margin-top: 5px;
height: auto;
}
#content-right .item-block {
width: 100%;
height: auto;
border-bottom: 1px dashed #d4d6d7;
padding-bottom: 20px;
}
a {
color: #0099cc;
text-decoration: none;
font-weight: bold;
}
a:hover {
font-weight: normal;
}
.portfolio-image {
margin: 0 auto;
width: 700px;
height: auto;
display: block;
}
HTML CODE
<?xml version="1.0" encoding="utf-8?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-nl" lang="nl-nl" dir="ltr" >
<head>
<link rel="stylesheet" href="/templates/hiddenhidden/css/template.css" />
<link href="/templates/hiddenhidden/css/uni-form.css" rel="stylesheet" type="text/css" />
<link href="/templates/hiddenhidden/css/default.uni-form.css" rel="stylesheet" type="text/css" />
<link href="/templates/hiddenhidden/jqueryui/css/pepper-grinder/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="/templates/hiddenhidden/css/screen.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/templates/hiddenhidden/css/jquery.lightbox-0.5.css" media="screen" />
<link rel="shortcut icon" href="/templates/hiddenhidden/images/favicon.ico" />
<script type="text/javascript" src="/templates/hiddenhidden/js/jquery.js"></script>
<script type="text/javascript" src="/templates/hiddenhidden/js/uni-form.jquery.min.js"></script>
<script type="text/javascript" src="/templates/hiddenhidden/js/uni-form-validation.jquery.min.js"></script>
<script type="text/javascript" src="/templates/hiddenhidden/js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript" src="/templates/hiddenhidden/jqueryui/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/templates/hiddenhidden/js/easySlider1.7.js"></script>
<script type="text/javascript">
$(function () {
$('a.lightbox').lightBox({
imageLoading:'/templates/hiddenhidden/images/lightbox-ico-loading.gif',
imageBtnPrev:'/templates/hiddenhidden/images/lightbox-btn-prev.gif',
imageBtnNext:'/templates/hiddenhidden/images/lightbox-btn-next.gif',
imageBtnClose:'/templates/hiddenhidden/images/lightbox-btn-close.gif',
imageBlank:'/templates/hiddenhidden/images/lightbox-blank.gif'
});
});
</script>
<base href="http://hiddenhidden.nl/" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>hidden hidden</title>
<link href="/?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link rel="stylesheet" href="/modules/mod_portfolio/portfolio.css" type="text/css" />
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('load', function() {
new JCaption('img.caption');
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="f-container">
<div id="header">
<div id="h-container">
<h1>
<a href="/" id="logo-container" title="hidden hidden">
<img src="/templates/hiddenhidden/images/logo_with_slogan.png" id="logo" alt="hidden hidden" />
</a>
</h1>
<div id="topMenu">
<ul class="menu">
<li class="item-102 current active"><a href="/nieuws" ></li><li class="item-104"><a href="/hosting" ></li><li class="item-105"><a href="/contact" ></li></ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div id="container">
<div id="content-left">
<div id="system-message-container">
</div>
<div class="blog-featured">
<div class="items-leading">
<div class="leading-0">
<h2 class="title">
<a href="/7-home/1-welkom-op-hidden-hidden">
Welkom op hidden hidden!</a>
</h2>
<!-- BEGIN -->
<div class="item-block">
<div class="item-text">
<div class="item-separator"></div>
</div></div>
<div class="item-bottom"></div> </div>
</div>
</div>
<h2 class="title">Onze Portfolio</h2>
<div class="item-block">
<div class="item-text">
<div id="portfolio-slider" >
</div> <div style="clear:both;"></div>
<ul class="ui-tabs-nav">
</ul>
</div>
<script type="text/javascript"> jQuery(function() { jQuery("#portfolio-slider").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); });</script>
<div style="clear:both;"></div> </div>
</div>
<div class="item-bottom"></div>
<div id="footer">
Copyright©
2010 - 2012 hidden hidden. Alle rechten voorbehouden. | Sitemap
</div>
</div>
<div id="content-right"> <h2 class="title">Contact</h2>
<div class="item-block">
<div class="item-text">
<div class="custom" >
</div>
</div>
</div>
<div class="item-bottom"></div>
<h2 class="title">Offerte aanvragen</h2>
<div class="item-block">
<div class="item-text">
<div class="custom" >
<p>Offerte aanvragen? Dat kan via ons contactformulier.</p></div>
</div>
</div>
<div class="item-bottom"></div>
<h2 class="title">Sociaal</h2>
<div class="item-block">
<div class="item-text">
<div id="facebook-container"></div><br />
<a href="http://facebook.com/hiddenhidden/" title="hidden hidden op Facebook">
<img src="/modules/mod_social/networks/facebook.png" style="border: 0;" alt="hidden hidden op Facebook" />
</a>
<a href="http://twitter.com/hiddenwebsolution" title="hidden hidden op Twitter">
<img src="/modules/mod_social/networks/twitter.png" style="border: 0;" alt="hidden hidden op Twitter" />
</a>
<a href="http://linkedin.com/company/hidden-hidden" title="hidden hidden op Linkedin">
<img src="/modules/mod_social/networks/linkedin.png" style="border: 0;" alt="hidden hidden op Linkedin" />
</a>
<script type="text/javascript" src="/modules/mod_social/mod_social.js"></script> </div>
</div>
<div class="item-bottom"></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
I'm not able to reproduce the issue with the code you provided, but I can on your website. Strange problem.
The quickfix would be to remove min-width, change width from auto to 1020px on the body and html elements and add overflow: hidden to body.
Good luck!
Awnser to my own question
I found it! It was the Facebook Like Buttons. I had set the width to 400px(I don't know why). So it pushed out of the layout. I replaced the data-width="400" with data-width="200" and know everthing is back to normal. Tnx everybody!
After you mentioned the Facebook Like button, I examined the code and it has a span with a width of 400px inside the sidebar which is protruding out past the sidebar's area (as is its parent div).
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://facebook.com/keimwebsolutions" data-send="true" data-layout="button_count" data-width="400" data-show-faces="false" data-font="arial"><span style="height: 20px; width: 400px;">