<div class="main"></div>
<style>
.main{ background-color:black;
position:absolute;
width:calc(100% - 40px);
height:calc(100% - 40px);
margin:20px;
</style>
How can I center the div with class main and adjust its height and width to be almost 100%, leaving a gap of 20px from each side of the screen?
By default, a block element has a width of 100%.
If you want to create some space, simply add padding or margin.
<style>
.container{ background-color: blue;
position:relative;
margin: 0 15px;
height: 100%;
}
</style>
I just noticed the absolute positioning.
For absolute positioning, I would recommend this approach:
#wrapper {
background: #f00;
position: absolute;
top: 0;
left: 40px;
right: 40px;
height: 100%;
}
Can you explain the CSS rules in this code snippet?
<style>
.container{
background-color:blue;
position:relative;
margin:10px;
left:10px;
right:10px;
top:20px;
bottom:20px;
}
</style>
To achieve center alignment, apply a margin of 50px on both the left and right sides to the div.
.container {
margin: 0 50px; /* shorthand for top/bottom and left/right */
width : 100%;
}
Here are the steps you can take:
<style>
.background{ background-color:black;
position:absolute;
width:100%;
height:100%;
margin:20px;
</style>
The new calc() attribute in CSS3 can help achieve this:
.main
{
margin: 0 auto;
background-color:black;
color: #fff;
position:absolute;
width: -webkit-calc(100% - 20px);
height: -webkit-calc(100% - 20px); /*use specific codes for other browsers*/
}
Using this, the div will be 100% wide/high but with 20px removed while remaining centered.
Compatibility includes IE9 (not lower), Firefox 4.0, Chrome 19, and Safari 6. Keep in mind that it may not be the ideal solution for all cases.
To implement absolute positioning in your design, you may want to consider the following method:
<div class="container"></div>
<style>
.container {
background-color: blue;
position: absolute;
top: 0;
left: 30px;
right: 30px;
height: 100%;
}
</style>
Check out the solution provided below:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<style>
#overlay {
background-color: rgba(0, 0, 0, .7);
opacity: 0.7;
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
}
</style>
</head>
<body>
<div id="overlay" />
</body>
</html>
You can view it here: http://jsfiddle.net/unique_user/jTl9Z/4/
Can you help me troubleshoot this issue with the variable in stylus that is setting the font attribute using shorthand syntax? button-font = 100 16px Helvetica Neue', Helvetica, Arial, sans-serif I'm encountering the following error message: ...
Within certain source codes, I have observed the following: <link rel="stylesheet" href="/css/style.css?201007071609" type="text/css" /> This prompts my question: What is the purpose behind appending 201007071609 to style.css in the code snippet ab ...
Having an issue here. Whenever I try to play sound from an image, I encounter an error. Uncaught TypeError: Cannot read property 'addEventListener' of null Here is my HTML code: <html> <head> <title>Music</title> < ...
Looking to adjust the text size within an h4 title. Hoping to make some letters smaller than others while keeping all in capital form. Any assistance is greatly appreciated. Thank you! ...
click here for imageIt appears that there are four tabs, each with a click function on the carat icon. When I expand one tab, all carats point upwards instead of only the selected one appearing. accountSelection(account) { if (!this.selectedAccoun ...
screenshot i want like this Looking at the image provided, there seems to be an issue with spacing between the red and blue columns. Despite trying various Bootstrap classes, the desired result has not been achieved. Adding m-4 to the Navbar, Header, and ...
I've taken on a last-minute favor for a friend who needs a quick Valentine's Ad added to their existing website, which was built with Drupal in 2010 by someone they no longer have contact with. I don't have much experience with Drupal, but I ...
Is it possible to create a 4-column table with each column taking up 100% of the width? The idea is to have two cells in each column - one (cell A) occupying 15% of the width and the other cell (cell B) taking up the remaining space. However, there seems ...
I encountered an error while using selenium in conjunction with python: selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"/html/body/main/article/section/form/div[1]/div[2]/ ...
I am encountering an issue with the expanded panels while using Vuetify in my Vue.js project. The problem arises when I perform a v-for loop over an array of objects and attempt to display expanded panels with external control. By external control, I mean ...
I have a situation where I need to keep a toggle button set to "off" if my collection object is empty. Previously, I was using v-model to update the value of the toggle button. However, now I am attempting to use :value and input events, but I am strugglin ...
Having trouble loading the JQuery library from a JavaScript file and using it in a function. JS1.js $(document).ready(function () { //var id = 728; (function () { var jq = document.createElement('script'); jq.type = 'te ...
My website seems to be getting stuck at the beginning of a section, particularly on mobile browsers. You can check out the website here <section class="home-slider owl-carousel"> <div class="slider-item" style="background-image: url(images/bg ...
I have encountered an issue while trying to display a drop-down list in HTML. Despite successfully achieving this in Internet Explorer, I am facing a problem when using Google Chrome. To style the background color of the options in the select tag, I have ...
Whenever I have multiline paragraphs or labels, the font size seems to adjust depending on the number of lines. All I want is to keep the font size consistent regardless of the lines. The labels all have the same CSS styling and inheritance. Here is a vis ...
Currently, I am utilizing react-table and wanting to implement CSS rules for the class rt-td, which is not accessible or adjustable through their API functionalities. In traditional CSS practice, I could easily override the CSS class within my stylesheet. ...
I've been working on a Joomla 2.5 based website and have a submenu with a title at the top, displaying the name of the top menu category. The title currently has a background color, but now I want to have a different background color for the title on ...
This question pertains to best practices, but I do believe there is a definitive answer. I have a directive that offers six customizable options. Should I assign each option to a separate attribute on the directive (as shown below): <my-directive my ...
I'm currently working on a feature that enables me to add a new column to a database table using SQL and PHP. My setup includes a front-end form where users can choose the table they want to modify and input boxes for specifying the new c ...
Can you provide guidance on creating a Regular Expression in PHP to identify HTML <p> elements that come after the initial <H1> tag? Here's an example that checks for inequality with the expression: if(!preg_match_all('#<p(.*?)&l ...