Omer Naveed Omer Naveed - 4 months ago 19
CSS Question

CSS on div not working no matter what

I've recently been coding a website, and I've been trying to get all of the main info of the website into a 1068px wide container. To do so, I created a div called 'wrapper' and put all of the main code into that, but styling the code doesn't seem to work at all. Im trying to find a way to make all of the pages main info center itself on a width of 1068px and putting all of the code into one div doesn't seem to work. If you know of a fix or of another way to do so, please tell me. For an example, I would like all of my info to fit into a set width like "http://dubbedcrazy.net/"

Here's the html

<!Doctype html>
<html>
<head>
<title>Slide Out Menu</title>
<link rel="stylesheet" href="./styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="menu menu-open">
<header>
<a href="#" class="menu-toggle"><img src="./images/toggle-button.png"></a>
<nav class="menu-side">
<img src="./images/hackedroms-title.png">
<ul>
<li><a href="#">Rom List</a></li>
<li><a href="#">Submit Roms</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ/How to Use</a></li>
</ul>
</nav>
</header>
<div id="wrapper" style="width:1068px;overflow:hidden;">
<div class="left-side">

<a href="#"><div class="ongoing-post">
<div class="ongoing-data">
</div>
</div></a>

<a href="#"><div class="ongoing-post">
<div class="ongoing-data">
</div>
</div></a>

</div>
<div class="right-side">

<a href="#"><div class="ongoing-post">
<div class="ongoing-data">
</div>
</div></a>

<a href="#"><div class="ongoing-post">
<div class="ongoing-data">
</div>
</div></a>

</div>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function() {
var body = $('body');
$('.menu-toggle').bind('click', function() {
body.toggleClass('menu-open');
return false;
})
})();
</script>
</body>
</html>


Here's the css

body {
background-image: url("../images/background.jpg");
}

.menu {
overflow-x: hidden;
position: relative;
left: 0;
}

.menu-open {
left: 231px;
}

.menu-open .menu-side {
left: 0;
}

.menu-side, .menu {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
font-family: fantasy;
}

.menu-side {
background-color: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left: -231px;
width: 210px;
height: 100%;
padding: 10px;
}

.menu-side img {
width: 100%;
padding: 3px;
}

.menu-toggle {
color: black;
}

.menu-toggle img {
width: 60px;
}

ul li {
list-style: none;
margin-bottom: 10%;
}

ul li a {
text-decoration: none;
color: white;
font-size: 25px;
}

ul li a:hover {
color: green;
}

.left-side {
left: 0px;
position: absolute;
width: 43%;
padding-left: 5%;
}

.right-side {
right: 0px;
position: absolute;
width: 43%;
padding-right: 5%;
}

.ongoing-post {
overflow:hidden;
margin-bottom:10px;
background:gray;
box-shadow:inset -1px -1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:inset -1px -1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:inset -1px -1px 2px rgba(0,0,0,0.2);
-webkit-border-bottom-right-radius:4px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-bottomleft:4px;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;
padding:7px;
-webkit-transition:0.35s;
-moz-transition:0.35s;
-ms-transition:0.35s;
-o-transition:0.35s;
height: 130px;
}

.ongoing-post:hover {
background:#F9F9F9;
}

.ongoing-image {
float:left;
margin-right:5px;
}

.ongoing-data {
float:left;
width:78%;
}

.ongoing-data h2,.ongoing-data h2 a {
margin:0 0 7px 0;
text-decoration:none;
padding:0;
font-size:13.3px;
width:100%;
}

.ongoing-data h2 a:hover {
color:#FFC2A3;
}

.ongoing-release {
font-size:12px;
width:100%;
margin-bottom:7px;
}

.ongoing-release a {
color:#4B5056;
width:100%;
}

.ongoing-release a:hover {
color:#818489;
}

.ongoing-type,.ongoing-type a {
color:#98CC54;
font-size:12px;
width:100%;
}

.ongoing-type a:hover {
color:#B7DB87;
}

Answer

I saw you are using position: absolute for .left-side and .right-side. To do so, you need a parent container with position: relative.

Try modify your code from

<div id="wrapper" style="width:1068px;overflow:hidden;"></div

To the following code, remember to remove overflow: hidden;

<div id="wrapper" style="width:1068px;position:relative;"></div

It is simple grid container with 2 columns so I suggest you to use Bootstrap library instead of your current approach.