The CSS styling for the div element is not functioning properly despite my numerous attempts

I've been working on a website and I'm trying to ensure that all the main content fits within a 1068px wide container. I created a 'wrapper' div to hold the code, but styling doesn't seem to be applied correctly. I need a solution to center all the main content within a width of 1068px without relying solely on one div. If you have any suggestions or fixes, please let me know. For reference, I want my content to align with a fixed width like ""

HTML snippet:

   <!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">
     <!-- All HTML code here -->
            <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>

CSS snippet:

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

 /* All CSS styles go here */
  
.menu {
  overflow-x: hidden;
  position: relative;
  left: 0;
}
htmlcss

Answer №1

Try including the style "margin:auto;" in your wrapper element.

Answer №2

It appears that you are utilizing position: absolute for .left-side and .right-side without a parent container with position: relative.

Consider updating your code from 

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

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

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

This is a basic grid container with 2 columns so I recommend incorporating Bootstrap library rather than your current method.

Answer №3

Consider using the position:relative property to ensure that #right-side is relative to this specific container

#container {
   width:1068px;
   position:relative;
}

Answer №4

<html>
<style>
.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;
}

.wrapper{
    width: 1068px;
    height: 100%;
    padding: 0px;

    position: relative;
}

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

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

.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;
}
</style>

<head>

</head>

<body class="menu menu-open">
        <header>
            <a href="#" class="menu-toggle"><img src="./images/toggle-off.png" style="width: 30px"></a>
            <nav class="menu-side">
        <img src="./images/VR1.png" style="width: 50px">
        <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 class="wrapper">
                <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>

Feel free to utilize this solution. It might be beneficial for your requirements. I suggest looking into bootstrap as well, as it can greatly simplify our tasks.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieve center alignment for two column divs without altering the HTML code using only CSS

Recently, I stumbled upon a basic HTML code that I am unable to modify due to restrictions: <div id="container"> <div id="a"> Title col </div> <div id="b"> Left col </div> <div id="c"> ...

htmlcss

Tips for substituting @media (max-width) with Stylish or Greasemonkey?

I am encountering an issue when trying to access this specific website on my desktop browser. The site has a responsive/fluid design that switches to displaying a mobile menu button instead of a horizontal nav-bar when the browser width is less than 990px. ...

cssgreasemonkeytampermonkeystylish

Issue with footer not properly aligning on the page's bottom

In my current project, I am utilizing both angularjs and node js for development. Within my index.html, the views are being called in the following manner: <div ng-include="'views/header/header.view.html'"></div> <div ng-view styl ...

htmlcssangularjsnode.jsng-view

Why isn't the selected option appearing first?

I have written a PHP code to display the specified div <div id="main_catsel"> <select id="maincat" > <option value="1">none</option> <option value="2">Computer</option> <option value="4">Refrigerator& ...

phphtml

Tips for preventing the state of a checkbox from being saved in the browsing history

I have implemented a mobile menu using a checkbox, with the following simplified code: input, ul { display: none; } label { cursor: pointer; } input:checked ~ ul { display: block; } <input type="checkbox" id="toggle-menu" /> <label for="t ...

htmlcss

Browser refusing to acknowledge jQuery/JavaScript (bootstrap)

Here is where I include the necessary jQuery libraries and my custom jQuery code: <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src= ...

javascriptjqueryhtmltwitter-bootstrap

Adding CSS classes through the .addClass method - A guide on utilizing linked CSS files

I came across this code snippet and I have a quick question. $(window).scroll(function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 150; // adjust as needed if(y_scroll_pos > scroll_pos_test) { $( "#cssmenu" ).addCl ...

jquerycss

Iterating through data to showcase vertical columns for a specific time span of 3 years, highlighting only the months with available data

If data has been available for every month over the past 3 years, I need it to be displayed in a specific format. You can refer to this example fiddle for reference: https://jsfiddle.net/bthorn/ncqn0jwy/ However, there are times when certain months may no ...

javascriptjqueryhtmlcss

Unable to view Mp4 video on Internet Explorer 11

My background video is in mp4 format and functions properly in Chrome, Firefox, and other browsers, but it does not work in Internet Explorer 11. To visit the website, click on "access as a non-secure site". ...

csshtmlhtml5-videointernet-explorer-11

Storing information in a database

Need help troubleshooting why my form isn't saving data to the database. <div class="container"> <div class="row" style="margin-top:200px;"> <form ENCTYPE="multipart/form-data" ACTION="upload.php" METHO ...

phphtml

Is it possible for the binding model of Mat-Checkbox to be optional or null?

Greetings everyone! I am a newcomer to the world of Angular, where I have successfully created a dynamic list of checkboxes. However, I have encountered a challenge when trying to bind selected values from an API to these checkboxes. <div *ngFor="let b ...

javascripthtmlangulartypescript

Utilize getElementsByClassName to dynamically alter the appearance of specific elements upon triggering an event

I'm attempting to utilize onmouseover="document.getElementsByClassName().style.background='color'" in order to switch the color of all divs with a specified classname to a different color when hovering over another element on the page. ...

javascriptcssonmouseovergetelementsbyclassname

Expanding the Width of Bootstrap 4 Dropdown Button

Currently, I am utilizing Bootstrap 4's dropdown feature. Is there a way to modify the code below so that the dropdown menu that appears upon clicking the button matches the same width as the button itself? It's important to note that the button ...

htmlcssbootstrap-4

Acquiring HTML form data using JavaScript

Although it may seem trivial, I'm facing a challenge. I have an HTML form that is dynamically generated by JavaScript and populated with initial data fetched from the server. The form is displayed correctly with the pre-filled data. My goal is to allo ...

javascriptjqueryhtmlforms

Single input results in array output

I have a pair of items in this array list. $.each(data.recalls,function(i) { var recall = data.recalls[i].nnaId; var description = data.recalls[i].remedyDescription; console.log(recall); console.log(description); $('textarea[name= ...

javascripthtmlarrays

Why can't we use percentages to change the max-height property in JavaScript?

I am currently working on creating a responsive menu featuring a hamburger icon. My goal is to have the menu list slide in and out without using jQuery, but instead relying purely on JavaScript. HTML : <div id="animation"> </div> <button ...

javascripthtmlcss

What types of devices are compatible with the different versions of the Android operating system?

I am currently working on a jquerymobile application for Android versions 2, 3, and 4, as well as iPhone, iPad, and iPod touch. I am analyzing user-agent strings using jQuery and jquerymobile. After testing with an emulator, I have noticed that all device ...

jqueryandroidhtmljquery-mobile

Using a background image in a React component

Currently, I am working on a webpage and facing an issue while trying to set a background image for a Material UI element using the background-image CSS property. Despite researching online for solutions, I am unable to make the image appear. P.S.1: I eve ...

javascripthtmlcssreactjsmaterial-ui

Arranging elements on a webpage using CSS grid placements

Currently experimenting with css grid, envisioning a scenario where I have a 2x2 grid layout. When there are 4 child elements present, they would form 2 rows of 2 elements each. My challenge is when dealing with an odd number of children, I aim to avoid al ...

htmlcsscss-grid

Ways to avoid page refresh when clicking a button using jQuery, while still permitting the Flask view function to delete data from the database

I'm looking to have the post_to_delete function in python delete data without displaying the "formNewPost" div. Instead, I want the 'tablePosts' div to be refreshed. These view functions are in Flask. Thank you. How can I prevent the page fr ...

htmljqueryflask