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;
}
Related
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/
I am new to webdesign, I am using Phonegap (HTML5) I centered my image horizontally this way:
.html
<div id="loginholder" >
<img id="image_person" src="img/icon_login.png" />
...
.css
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
margin-top: 30px;
}
...
#loginholder{
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
}
...
Please why my margin-top is not working?
You need to trigger layout. Add overflow:hidden to #loginholder
I'd add padding-top: 30px; to #loginholder instead and remove the margin-top: 30px; from #image_person:
CSS
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
}
#loginholder {
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
padding-top: 30px;
}
Check out this JSFiddle: http://jsfiddle.net/bazC4/.
Also, if you wanted the #loginholder the same size, just remove 30px from the height so it would be height: 170px;.
The margin might be collapsing with the parent, causing the 30px margin to appear above the loginHolder div (more on margin collapsing). To resolve this, you could do one of the following:
Add a border or padding to loginHolder; this separates the margins so they won't collapse.
Change to using padding-top on the image instead of margin-top.
Try wrapping it in a div:
JSFIDDLE:
http://jsfiddle.net/MBLKs/
CSS:
#loginholder {
width: 300px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
#stabilizer {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
Images behave like characters, so entering them doesn't always work. In this case, the position of the wrapping div and the image offset each other, leaving the image in the middle. Now your margin-top and everything else should work.
I'm trying to create a very basic site. It needs to have a header that's fixed to the top with nav buttons and a footer with social media anchors. The content should sit in a container div in the middle and should scroll up and down whilst at least the footer stays in place. At the moment I've used this:
CSS:
#header {
font-size: 1em;
background-color:#000000;
height: 4em;
width: 100%;
padding-top: 2em;
padding-bottom: 1em;
padding-left: 10em;
margin-bottom: 0px;
text-align: center;
left: 0em;
}
#container {
width: 1280px;
height: 100%;
margin: 1em auto;
overflow:scroll;
}
#footer {
text-align:center;
color:#FFFFFF;
font-size: 1em;
background-color:#000000;
height: 5em;
width: 100%;
padding-top: 2em;
padding-bottom: 0.5em;
bottom:0em;
position:fixed;
}
All the html are standard <div></div> with no other operations involved. I've tried removing all position commands and use a variety of overflow options but nothing is allowing me to scroll. The Footer simply sits on top of everything and the container acts as it's overflow:hidden.
The problem is most likely that your #content doesn't have enough content to trigger an overflow. Otherwise maybe you'd like the header to be fixed as well? Check this demo.
Shouldnt your CONTAINER have a width of 100% and a set ###px for the Height?
If you dont have a sidebar that has a set size, the middle cannot scroll if it is set at 100% unless it is set at 100% of something else...
#container {
width: 100%;
height: 1280px;
margin: 1em auto;
overflow:scroll;
//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