Position the colored div on the left side of the page

Here is the CSS I am currently using...

<style type="text/css">
    .widediv{width:1366px;margin-left:auto;margin-right:auto}
</style>

This CSS code helps me create my webpage :

<body><div class="widedivv">
    <!-- Content goes here -->
    <div style="background-color:#609ED2"> <!-- More content --> </div>
</div></body>

However, with a screen size of 1600*900px, I think there might be a better way to achieve what I want :

Is there a way to extend the color of the div all the way to the left edge of the screen/page?

Currently, there remains a white margin on the side, which has a width of:

(ScreenWidth-1366)/2
javascripthtmlcss

Answer №1

Do you find this appealing?

Html

<body><div class="widediv">
  <div style="background-color:blue; padding-left:350px">
    Insert content here
  </div>
</div>
&lt; I want the div's color to reach that point!
</body>

CSS 

.widediv{background-color:blue;width:1366px;margin-right:auto}

Answer №2

Is it possible to implement something like this?

<body>
 <div class="outer-widediv"> 
 <div class="widedivv">
    <!-- Content -->
    <div style="background-color:#609ED2"> <!-- Additional content --> </div>
 </div>
 </div>
</body>

Then apply the following CSS:

.outer-widediv{
  background : color !important;
  position: relative;
}
.outer-widediv:after{
 content: ""; display: block; height: 100%;
}
.outer-widediv:before{
content: ""; display: block; height: 100%;
}

JavaScript fiddle example

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

Incorporating Mongoose Schema structures into my NextJS webpage

I am new to NextJS and seeking assistance with an issue I am facing. I have defined 2 Mongoose schemas and using one on my page without any problems. However, when I try to import the second schema, my page fails to render and throws an error. Regardless ...

javascriptnode.jsreactjsnext.jsserver-side-rendering

Creating an app using Ionic 1 that features scrollable tabs with the ability to handle overflow

My current code snippet is displayed below. On smaller mobile screens, all 7 tabs are not visible at once and instead appear in two rows which looks messy. I want to modify the display so that only 3 tabs are visible at a time and can be scrolled through. ...

javascripthtmlcssionic-framework

What is the best way to adjust a fixed-width table to completely fill the width of a smartphone browser?

In an ancient web application, the design was primarily constructed using rigid tables: <div class="main"> <table width="520" border="0" cellspacing="0" cellpadding="0"> <tr> <td>...</td> </ ...

htmlcss

Configuring git npm dependencies to aid in debugging purposes

This is my first time trying to debug a library in my application and I'm not entirely sure how to go about it. I initially installed the library with npm install @react-pdf/renderer, but debugging was proving difficult. Then, I found a useful answer ...

javascriptnode.jsgitnpmwebpack

Coordinating a series of maneuvers

When it comes to coordinating multiple sequential actions in Redux, I find it a bit confusing. I have an application with a summary panel on the left and a CRUD panel on the right. My goal is to have the app automatically update the summary after a CRUD op ...

javascriptredux

Attempting to retrieve information from my MongoDB database and populate it into a <table> structure on a web page

My objective is to extract data from a MongoDB database and display it in an HTML table. Specifically, I am trying to retrieve information from the hangman database's players collection, which contains fields for name and score. Can anyone help me ide ...

javascriptjquerynode.jsmongodb

Allow editing for only a specific part of a text box

Creating a customized personal URL page for users on my site is important to me. I envision the value of a text box being "example.com/username," with the "example.com/" part displayed in the text box, but not editable. I've noticed that Tumblr accom ...

javascriptjqueryhtmluser-input

Having trouble with Vuejs Ternary Operator or Conditional in v-bind-style?

Having some unexpected issues while trying to implement a style conditional for items in Vuejs. I have come across Stack Overflow posts on how to use a ternary, either through an interpolated string or a computed style object. I've attempted both met ...

javascriptcssvue.jsconditional-statementsternary-operator

Struggles with implementing CSS Grid's dynamic column heights and expanding rows

Linked partially to Removing empty space in CSS Grid, with specific adjustments I am aiming for. Essentially, I want my rows and columns to expand and contract based on the content present. In this CodePen example, you can observe that the content of the ...

htmlcsscss-grid

What is the proper way to retrieve the value of the key "order" from this JSON object (containing semicolons in the name)?

Vijay Anand inquired about this particular matter yesterday, unfortunately, the discussion was closed before receiving any solutions: HTTP Response: { "entry": { "@xml:base": "https://API_PROC_SRV/", "@xmlns": "http://www.w3.org/2005/Atom", ...

javascriptjson

Design a big-sized button using Bootstrap framework

Is there a way to design a big, responsive button using Bootstrap? Similar to the example image linked below https://i.sstatic.net/xEBwc.png ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Modifying the CSS design of specific columns within a table created using JavaScript

A unique way to showcase JSON data in a table is by utilizing a for loop within a function. This method, however, does not assign an ID or Class to the table. To hide the final three columns of this table using CSS, the following code can be employed (whe ...

javascriptcss

Javascript Steps to trigger a function when selecting the Stay on Page option in Google Chrome

If you're testing my code in the Chrome Browser, hitting refresh will prompt you with 2 options. Leave This Page Stay on This Page By clicking on the Stay on this page button, it should trigger my custom function displayMsg(). Can anyone pr ...

javascriptjqueryhtml

What is the best way to add clickable links to 3D objects and meshes with ThREE?

My goal is to create a simple box that can act as a link when clicked. This seemingly straightforward task has proven difficult for me, so I would greatly appreciate any assistance. Despite my efforts to troubleshoot and research online, I have not been ...

javascriptobjectthree.js3d

Aurelia-powered DataTable plugin for effortless data updating

I'm currently utilizing the DataTables and DatePicker plugins along with Aurelia in my project. The goal is for the user to select a date, which will then prompt the data table to display the corresponding data for that specific date. However, I' ...

javascriptjqueryhtmldatatablesaurelia

Is it possible to use a hash map to monitor progress while looping through this array in JavaScript?

I've been exploring some algorithmic problems and I'm puzzled about the most efficient way to solve this particular question. While nested for loops are an option, they don't seem like the optimal choice. I'm considering using a hash ma ...

javascriptalgorithm

Can you provide me with a comprehensive list of all the colors available in Twitter Bootstrap 3?

I've integrated the twitter bootstrap sass 3.0.3.0 gem, which is supposed to be the latest version of twitter bootstrap 3.0.3. I'm trying to customize the colors using the 'customize' section of the LESS variables, but I can't seem ...

csstwitter-bootstrap-3bootstrap-sass

Exporting modules in Node.js allows you to use functions

Can you explain why this code snippet is successful: exports.foo = 'foo'; var bar = require('./foo'); console.log(bar); // {foo: 'foo'} While this one fails to produce the desired output: var data = { foo: 'foo' ...

javascriptnode.jscommonjs

Looking to execute a PHP script upon form submission

I have a form that I need to submit in order for a PHP script to run using AJAX. <form method="post" action="index.php" id="entryform" name="entryform"> <input type="submit" name="submit" value="Submit" onclick="JavaScript:xmlhttpPost('/web/ ...

phpjavascripthtmlajaxforms

My React project is unable to import the foundation SCSS file into the App.scss file

After installing zurb-foundation using npm, I attempted to import the .scss file into my App.scss file. Utilizing the "live sass server" for compiling the .scss code into .css code, a .css file was generated but did not display any code despite successfull ...

cssreactjsnpmsasszurb-foundation