I want to make a perfectly centered/responsive div.
How would I go about that? Typically to move things I float them or use position: absolute;, but I would like to do so in relation to the browser window as opposed to just generally moving things around.
This will center the div horizontally:
#yourDiv {
margin: 0 auto;
}
You can use margin: auto; along with absolute positioning for responsive vertical/horizontal centering:
<section></section>
section {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #f4d4c4;
height: 100px; /* The only caveat is there needs to be a height defined */
margin: auto;
width: 100px;
}
Example: http://jsfiddle.net/uLDVM/
Here s fiddle that centers it both horizontally and vertically
div {
width: 100px;
height: 100px;
border: 3px solid red;
margin: 50% auto;
}
This is what I use.
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
The best method using CSS would be to use margin and a max-width to control its width. Like this:
div {
max-width: 50px;
margin: 0 auto;
}
Now to change its value on the browser resize, either use media query or you can use %.
Media Query
#media only screen (max-width: 800px) {
// change the properties if the screen is no
// larger than 800px in width
}
Percentage
div {
max-width: 5%;
margin: 0 auto; // will only align it horizontally
}
You can use position: absolute and then use 0 for each four sides of it. To keep it centered and strecthed to the borders, while it won't strecth because of max-width.
This way, you will have the div centered and responding to the browser.
Related
I've a problem with some viewport width elements on my website. There are eight divs in a row with a width of 10vw and margin of 2.2222vw. Together the viewport width is about just below 100 (something of 99.9998). The divs are floatet so they should stay in a row.
Everything works just fine but when I'm adding a headline, the elements are breaking. In the fiddle below the divs are breaking without a viewport. Check out my website demo for the "real" issue.
This is my element CSS (SCSS):
door {
width: 10vw;
height: 10vw;
border: solid 3px #000;
float: left;
margin-left: 2.222vw;
position: relative;
margin-bottom: 2.222vw;
a {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
}
.door.last {
margin-right: 2.222vw;
float: right;
}
FIDDLE | WEBSITE DEMO
I think this may be your solution, please try this
http://jsfiddle.net/bqx5u125/
I have added two classes to arrange the divs in horizontal and vertical manner. So this would be the css for those horizontal and veritcal divs.
.arrange-horizontally > *{
display: inline-block;} .arrange-vertically > *{
display: block;}
Also, no need of class 'last', and the float:right is the main thing causing you trouble.
My page has a max width of 1280px. The body is centered on larger screens using margin: 0 auto; Now I want to place an element in the bottom right corner. That has to be fixed as it should scroll with the content. On screens larger than 1280px the element should stay on the corner of the centered body and not stick to the right side of the window.
The element should stick there, independent of the current viewport width.
I've solved this by using a combination of media-query and CSS3-calc operation. It feels like an overkill for this simple task but I can't find a solution simpler as mine. Here is some sample css (I've changed the maximum page width to 500px here):
body {
max-width: 500px;
height: 1000px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
}
div {
position: fixed;
right: 0;
bottom: 0;
height: 30px;
width: 30px;
margin: 0;
padding: 0;
background-color: red;
}
#media all and (min-width: 515px) /*max body width + (element width / 2)*/ {
div {
margin-right: -webkit-calc((100% - 500px) / 2);
margin-right: -moz-calc((100% - 500px) / 2);
margin-right: calc((100% - 500px) / 2);
}
}
JSFiddle: https://jsfiddle.net/nh95dc8u/
My JSFiddle shows exactly what I want. I'm just asking if this is possible to achieve with more "standard-CSS" (I'm not really sure about calc across different browsers)? What could be a simpler solution?
#media all and (min-width: 515px) {
div {
right: 50%;
margin-right: -250px;
}
Moves fixed div to 50% of window width and then to 50% of container width
https://jsfiddle.net/nh95dc8u/5/
You could also do it with just one more element and a bit of CSS.
As example, your HTML could be:
<div class="content">
Your content here
<div class="fixed-wrapper">
<div class="fixed">HEY</div>
</div>
</div>
And then, the CSS:
.content {
max-width: 500px;
margin:0 auto;
position:relative;
}
.fixed-wrapper {
position:absolute;
bottom:0;
right:0;
width:30px;
height:30px;
}
.fixed-wrapper .fixed {
position:fixed;
width:30px;
height:30px;
bottom:0;
background:red;
}
By adding position:relative to .content and using a wrapper to the fixed element, you can position it where you would like. As an element with no specified position renders where its parent is, you can just omit the right property from the fixed element and let the wrapper position it for you.
For an example, see this FIDDLE.
You can get rid of both calc and the media query by wrapping it in another div, which is horizontally aligned like body, and has the same width as body, but is fixed and sticks to the bottom of the screen.
Inside that div, you can then float the red little box to the right.
Although the outer div only seems to behave like body with max-width: 100% and width set to body's max-width + 2 (for the left and right border):
body
{
max-width: 500px;
height: 1000px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
}
.hack
{
position: fixed;
bottom: 0;
max-width: 100%;
width: 502px;
margin: 0 auto;
padding: 0;
}
.box
{
height: 30px;
width: 30px;
margin: 0;
padding: 0;
background-color: red;
float: right;
}
<body>
This is the centered body
<div class="hack">
<div class="box">E</div>
</div>
</body>
Updated fiddle.
Tested and working in Chrome 44 and IE 8.
Remove media-query also it will work,
Remove and see the output again
Output
Try this in simple css -
.main{
width: 500px;
height: 1000px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
}
.footer {
position:fixed;
bottom: 0;
height: 30px;
width: 30px;
left:510px;
background-color: red;
}
Here is the fiddle - https://jsfiddle.net/maL5nvbu/
Hi so i have a line that i want to put on my website. Although i have tried a few things like z-index, position: fixed ect. i can't seem to get the line to span the whole browser length, while still having the margin-auto width for the website 900px;. Is their anyway to "override" the margin width of 900 and for the line to span the whole website while being static. I have also tried taking the div out of the body tags and that didn't seem to work either.
.line {
position: static;
background-color: #d1d1d1;
width: 100%;
height: 1px;
margin-top: 20px;
}
body {
margin: 0px;
padding: 0px;
margin: 0 auto;
width: 900px;
}
If the line is part of your body then width:100% will make it 900px (the width you set on your body)
They way around is to set body width to 100%, and then create a wrapper (with width 900px) for your main content and a separate line div for the line across the full width.
Added a fiddle: http://jsfiddle.net/xrqezvxz/
your css would look something like:
body {
margin: 0px;
padding: 0px;
width: 100%;
min-height:500px;
}
.line {
position: fixed;
background-color: #d1d1d1;
width: 100%;
height: 5px;
margin-top: 20px;
}
.content_wrapper
{
width:900px;
background-color:red;
min-height:500px;
height:500px;
margin:0 auto;
}
//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.
My situation:
On my page I have multiple collapsible panels in the right hand column of my main content.
At the moment what happens is when I expand the panel (which contains a large amount of text) it goes off the page.
Therefore meaning that the user can't read it. This due the fact that the height is hard coded.
Now what I want to happen is when the div expands, if it reaches the max height of the page, the page height expands to incorporate all of the text.
Question:
Is there a way to make it possible that the page height expands along with the div?
My CSS:
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
#page {
overflow: hidden;
width: 900px;
padding: 0px 50px 50px 50px;
background-color: #FFFFFF;
}
#content {
float: right;
width: 580px;
}
Thankyou for any suggestions
Instead of using height you could try to set position to "absolute" and 0px top and bot on the .container?
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
top: 0px;
bottom: 0px;
}
You can make .container a clearfix so it will expand to the size of the floated element inside of it. Here's a great article on using clearfix.
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
That code will work for everything outside of IE6&7. If you need tose too just take a look at the article.
Never mind guys, I solved it....It was due to the fact that i was positioning the div with a relative height and width, so i just used margin-top instead.
Thanks to everyone