I'm using a theme where it's content is set to 1200px. The problem is I want to create a DIV that is full width to the screen's edge and then offset the margin-left to offset the difference. (I'm guessing this is the easiest way)
How do I calculate the width of the column between the side of the screen to the left side of the 1200px grid? And then calculate that difference into the width of the DIV I'm trying to create so that the DIV is full width, regardless of what screen size it's being viewed on?
I'm aware I can do this with fancy editors like Visual Composer, but they are too clunky and make the site slower..
the following seems to work for text, but I can't get an image to stretch across the screen full width unless I make it larger and overlap the screen size. I need it to touch from screen side to screen side
.blue_section {
width: 200% !important;
margin: 0px -50% 0px -50% !important;
padding: 0px 0px 0px 0px !important;
background-color: #0088CC;
}
.blue_content {
width: 1200px !important;
height: 100% !important;
margin: 0px auto 0px auto !important;
padding: 10px !important;
}
If you want to make a div to the full width of the screen, then simply use this code:
div {
/* I added this just for fun */
background-color: skyblue;
color: white;
font-family: Century Gothic;
padding: 5px;
text-align: center;
/* The code that you need to copy */
position: absolute;
left: 0px;
right: 0px;
top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>Hello World!</div>
</body>
</html>
Here is an example right from w3schools:
https://www.w3schools.com/cssref/func_calc.asp
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>
<div id="div1">Some text...</div>
Do you mean something like this?
<div style="width:1200px;right:0px; top:100px; height:200px;background-color:lightgray;">Hello</div>
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
About calculating the width of the column: If it's not an issue, this is easily resolvable using Javascript.
var col = document.findElementById("id-of-your-column-div");
var screenFill = document.findViewById("screen-filler");
screenFill.style.marginLeft = col.clientWidth;
You can do:
<style>
.mydiv{
width:1150px;
margin: auto 0;
}
</style>
the width:1150px it for using 25px the margin on each side left and right
Just add css to your div and add following code -
div {
height: 100px;
background-color: blue;
margin -8px;
}
This should probably work.
You need to add negative margin because browsers usually tends to add some margins to the contents of its webpages.
Related
Actually it has to be a little less that 100% because 100% sets it a little off screen to the right. When I load my page on a tablet or laptop screen it zooms into the top left of the screen, if I zoom out I see that the divs only take up about half the page left to right. I've tried playing around with min-width with no luck.
.first {
height: 75px;
width: 99.55%;
background-color: red;
margin-top: 19px;
border: 3px yellow solid;
min-width: 1000px;
margin: 0 auto;
}
h2 {
text-align: center;
width: 100%;
}
<div class="animated fadeInUpBig first o">
<h2>Need to fix positioning on mobile</h2>
</div>
<div class="animated fadeInUpBig first t">
<h2>More work will be done tomorrow evening</h2>
</div>
<div class="animated fadeInUpBig first tr">
<h2>Make it look half good by weekend</h2>
</div>
If you are wanting each red block with yellow border to span a specific width (to be 90%, 300px, etc.), you can add box-sizing: border-box to the element which allows for the width to include both padding and border. However since both the .first (a div) and the h2 are both block levels elements, by default they will take up 100% width of their parent.
I consolidated the margin-top with the margin: 0 auto; which keeps the margin: from overriding the margin-top.
Also the shorthand for border should be width, style, and color, so I have altered it slightly.
Lastly, the body element has a default margin of 8px in most browsers, so in order to get your boxes to touch the outside of the browser window, you'll want to add that last body property or use a common CSS reset (such as http://meyerweb.com/eric/tools/css/reset/)
.first {
height: 75px;
background-color: red;
border: 3px solid yellow;
min-width: 1000px;
margin: 19px auto 0;
}
h2 {
text-align: center;
}
body {
margin: 0;
}
http://codepen.io/phawley/pen/amLRYK
JSFIDDLE DEMO
.btn {
text-transform: uppercase;
position: relative;
margin-bottom: 15px;
color: #ffffff;
background-color: #000;
padding: 25px 80px 25px 80px;
font-size: 18px; }
So I have this image, which is responsive and button over it which should be always centered.
If you move the window width, you'll see that image changes size quite a bit and I would like to know what is the best way to set button so it will change size automatically with image as well so it gets bigger/smaller?
Is there a better solution for this besides setting a lot of #media queries here?
Since you're using absolute positioning you can't currently use margins to achieve this.
However, if you use a new div that wraps the anchor, set it to position: absolute and then center the anchor inside that, it'll work.
<div class="logo">
<img src="http://s13.postimg.org/9y14o777r/imgholder.png" />
<div>Register</div>
</div>
.logo div {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 25%
}
.logo a {
display: block;
margin: 0 auto;
width: 250px;
}
Fiddle
You can adjust the sizing and vertical centering as you need, and add some responsive css or min-width to control too-small sizes.
I am using HTML and CSS.
I can't display all of my content in the middle of the screen for varying display sizes.
I have attempted to use % in place of PX but it's unsuitable for small screen size such as 800*600 pixels.
Also I have performed web searches but my lack of in-depth knowledge of HTML is hindering my progress.
my code is this:
<style type="text/css">
#Line5
{
color: #7B7BC0;
background-color: #7B7BC0;
border-width: 0px;
}
#wb_Text1
{
background-color: transparent;
border: 0px #8B8B00 solid;
padding: 0;
}
<body>
<hr id="Line5" align="center" style="position:relative;top:28px;width:803px;height:93px ;z-index:0;">
<div id="wb_Text1" style="position:absolute;left:406px;top:58px;width:308px;height:36px;text-align:center;z-index:1;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>
can someone correct this piece of code for me?
Don't know what your desired output is like. But check this out.
Click Here for Demo
<div id="wb_Text1">
<span class="head"><strong><em>SAMPLE TEXT</em></strong></span>
</div>
Here updated code and its working fine.
<div id="wb_Text1" style="position:relative;display:table;margin-left:auto;width:100%;height:36px;text-align:center;margin-right:auto;z-index:1;background-color: #7B7BC0;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>
Not clear about your question but I think Either of the examples below could work for you ;
if you want it to be standards compliant, use this in your stylesheet:
body {
text-align:center;
}
#mainContainer {
margin:0 auto;
}
the body thing makes it work in IE, the margin:0 auto; makes it center in most other browsers.
you might have to go in and reset some of your main containers to text-align:left; because the body text-align:center sometimes cascades down into the site content, but you can counteract that by adding
text-align:left;
to #mainContainer
Or,
There may be better methods, but this works in all browsers so far :
body {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}
or set body width to 100% and then just make a container div for your page
#container {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}
Also not quite sure what you're asking for. I'm interpreting it as you wanting the div to be centered vertically and horizontally, so that's what I'm going for.
HTML
<div id="wb_Text1">
<b>SAMPLE TEXT</b>
</div>
CSS
body {
height: 100%;
width: 100%; //these two are so that the automatic margins work for the div.
}
#wb_Text1 {
height: 93px; //or whatever height you want
width: 300px; //or whatever width you want (can be in %)
background-color: #7B7BC0;
border: 0px;
padding: 0px;
font: 32px Arial;
line-height: 93px; //should be same as the height if you've only got one line of text and you want it vertically centered in the div
color: #fff;
text-align:center;
margin: calc(0.5 * (50% - 46.5px)) auto; //first value makes it vertically centered, the second makes it horizontally centered.
margin: -webkit-calc(0.5 * (50% - 46.5px)) auto; //for Safari
}
Here's what's happening inside the calc():
50% gives you half the total height of the page,
46.5px is half of the div's height, which in this case is 93,
50% - 46.5px gives you the amount of space needed to center the div vertically
Fiddle here: http://jsfiddle.net/Shiazure/hA9KB/
i thank all those who helped me. Problem was solved by adding the following code.
<style type="text/css">
div#container
{
width: 990px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
....
.....
........
<body>
<div id="container">
...
....
Thank you so much that help a rookie !
//sorry for the bad formating, i am on my phone...
When someone asks how to center a page, then the response is like:
margin-left:50%;
left:(-1/2 width);
I used this code on a site with a width of 1000px,so it comes to screens, where this site does not fit.
Now the site gets centered on the smaller screen and gets equaly pushet to left and right.
So lets say, our screen is 600px wide:
200px are left
600px are on screen
200px are right
You can scroll to the right, but the pixels on the left are unreachable...
How can i solve this to control, how much of my site gets dragged to the left in case of smaller screens?
This is especially important for mobile phones...
If you are worried about different screen sizes then I highly suggest using Media Queries but this is also a useful way of setting up centered elements. Just use a % width instead of a set width and followed by margin: 0 auto;
Look at fiddle for visual aid. (If this answer does not suit your needs at all then I'll gladly remove it)
div {
margin: 0 auto;
width: 80%;
height: 500px;
background: mediumSeaGreen;
}
JSFIDDLE
Your best bet (Ignore the CSS it's from my portfolio.
.subMenu {
display: none;
float: none;
width: 100%;
background: rgba(254, 126, 1, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
font-size: 20px;
padding-left: 60%;
position: relative;
left: 0;
top: 3.85em;
list-style-type: none;
padding: 1.5em 0;
margin: 0;
overflow: hidden;
}
#media only screen and (max-width: 680px) {
.subMenu {
top: 4.9em;
font-size: 10px;
min-height: 100% !important;
padding: 0;
background: rgba(0, 0, 0, 0.5);
}
}
You can also use jQuery to dynamically find the width.
var width = $('div').width();
$('div').text(width);
You could try using margin: auto
http://jsfiddle.net/56N9w/
As you see there if you make the window too small for the content to fit it will left align by default
Use this:
margin: 0 auto;
width: 400px;
alternative:
margin: 0 auto;
width: 50%;
another alternative:
#outer-div {
margin: 0 auto;
width: 50%;
}
#inner div {
/* insert any CSS you want here */
}
NOTE 1: When using margin: 0 auto, you need to define the width otherwise it won't center.
NOTE 2: You should really put it inside another box, or make the page width 100% (or a width larger than the box).
NOTE 3: You can't center vertically with margin: auto auto. This simply won't work. See below for the solution to this:
Centered box both horizontally and vertically:
Working in jsbin:
http://jsbin.com/OSUViFi/1/
The code (same as the jsbin above):
page.html
<div id="outer-container">
<div id="inner-container">
<div id="centered-box">
</div>
</div>
</div>
style.css
#outer-container {
width: 100%;
height: 100%;
display: table;
position:absolute;
overflow: hidden;
}
#inner-container {
display: table-cell;
vertical-align: middle;
}
#centered-box {
margin: 0 auto;
height: 400px;
width: 400px;
background: #000;
}
Specific for your needs (not including vertical alignment which it looks like you don't need):
jsbin example:
http://jsbin.com/axEZOTo/2
The code (same as the jsbin above):
page.html
<div id="container">
<div id="centered-box">
</div>
</div>
style.css
#container {
width: 1000px;
margin: 0 auto;
height: 100%;
background: #999;
}
#centered-box {
max-width: 70%;
min-width: 200px;
height: 500px;
margin: 0 auto;
background: #000;
}
Here, the smallest it can go is 200px, this number you can change to the smallest amount that you want to allow your box to have.
NOTE:
I finally figured out what you were trying to say in your question, which was poorly worded.
You only used 600px as an example, but you really just want to have it be a fluid layout that changes with screen size.
I am having issues with the below HTML when resizing the window;
1: Right bar suddenly drops down when the width is resized too small.
2: Spacing between the content and right bar gets larger as the width gets larger.
<style type="text/css">
#content {
width: 80%;
float: left;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="content">contents</div>
<div id="rightbar">
link 1
link 2
link 3
</div>
There are two ways to get the result you want:
put the right bar before the content
in the html, remove the width from
the content and give it a right
margin instead (width of the right
bar + something extra)
position the right bar absolutely on the right, remove the width from
the content and give it a right
margin instead (see number 1.)
By the way, the problem is that you are mixing absolute and relative widths and what you see is exactly what you are supposed to see.
Edit: After re-reading your question, I think that with overflow:hidden (makes it a nice square block) on the content part, you can get it to work in combination with 1. without the margin:
<style type="text/css">
#content {
overflow: hidden;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="rightbar">
link 1
link 2
link 3
</div>
<!-- content needs to be placed after rightbar -->
<div id="content">contents</div>
Once you resize too small, the percentages width will be smaller than the text content within your element. The browser cannot concatenate words, so the element is forced to have a min-width. Try putting the elements in a wrapper with an assigned min-width.
Between these two bars you have a space of 3%. 3% of 1000px is 30px. 3% of 2000px is 60px. Therefore if you right element is floating right, it makes sense you'll see that additional space. Try floating the element left.