I'm trying to align a 'div' attribute to the center of the page (horizontally). The problem is that whatever attributes I've used, the 'div' continues to be aligned to left. The 'div' which I am reffering to, is the page 'div' of the webpage, which is inside the 'html' and the 'body' attributes. Here's the CSS code:
#page{
margin-top:20px;
margin-bottom:20px;
margin-left: auto;
margin-right:auto;
border-color: black;
border-style: solid;
border-width: thin;
overflow:auto;
padding-bottom: 10px;
padding-top: 0px;
width:1200px;
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
color:black;
font-size:12px;
height:700px;
}
and the 'html', 'body' CSS code is the following:
html,body {
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
}
Note that if I remove the "overflow" property, the div is aligned to the center of the page (although, it overlays the menu which is on top of it) but I need the "overflow" property to automatically add scrollbars if the width/height of the page which would be displayed inside this div is greater than those specified in the CSS.
I haven't coded anything in awhile, however normally when I am creating a centered page:
html, body { width: 100%; height: 100%; margin: 0 auto; text-align: center; }
Then for the div:
#page { width: 900px; overflow: hidden; text-align: left; margin: 20px 0 20px 0; }
That may or may not work, like I said, it has been awhile.
In order to margin:auto works in your case is required to have a defined width/height for your main containers which are HTML and BODY
IMPORTANT:Both HTML and BODY elements must be ruled with the width/height properties
Do as follows
html,body {
background-color:#FFFFFF;
width:100%;
height:100%;
}
and watch this fiddle
It seems your div is filling full screen width. So center alignment will not have any visible effect on the div. Try to use a span instead.
Following will NOT work
<body style="text-align:center">
<div>Foo</div>
</body>
Following should work
<div style="text-align:center">
<span>Foo</span>
</body>
<div style="margin:0px auto;">sfsfsafafas</div>
Use this code surely it will make the div to center.
Simple:
HTML
<div id="page"></div>
CSS
#page {
width: 350px; height: 400px; border: 1px solid #000; margin: auto
}
jsFiddle example
You might also look at the "left" and "right" attributes for centering a if you are trying to center horizontally.
For instance, if your width was 60% of the page (width:60%), you could set (left:20%) and (right:20%) which MAY center it, however that depends on how your div is positioned. (position:absolute) or (position:relative).
(position:absolute) with the above width, left, and right should center horizontally.
There is also <center> enter code </center> within HTML that has worked for me in the past.
I'm not a guru with this though, so I don't know what "best practice" to use in your case.
Related
While, trying to create a body border around the website, I am having troubles creating margin between the website and the border.
I want to have a margin of 20px around the border, but I can't seem to figure out how to do this, can anybody help me?
My final goal is for the border to look close to this.
Just make a wrapping div around the content with proper media queries, something like this
Demo
#wrapper {
max-width: 1100px;
margin: 20px auto;
border:1px solid #333;
padding:20px;
background:#eee;
}
#media screen and (max-width: 1260px) {
#wrapper {
margin: 20px;
}
}
#content {
background:#ccc;
}
Have you tried css margin property?
body
{
margin: 20px;
}
You should create two divs that surround everything in your body, like that :
<html>
<head>
[...]
</head>
<body>
<div id="global">
<div id="global-inner">
[Your original code ...]
</div>
</div>
</body>
</html>
Then you just have to do some css
#global {
border: 1px solid #CCCCCC;
margin: 40px auto;
width: 90%;
}
#global-inner {
margin: 7% 7%;
}
See the JSFiddle : https://jsfiddle.net/9usf2hmh/
Hope I helped you :)
What you should do is just use padding on your body, or main container.
Keep in mind that in that particular page design, the padding is on left/right and top, the bottom padding is part of the footer element and that's how he achieve the top-border on the bottom elements
Here a working example
All that I want to be able to do is take the tag and vertically align it with the page. I do not know if I have to put the tag inside another tag in order to work. Any help would be greatly appreciated. Thanks in advance!
CODE
<!DOCTYPE html>
<html lang=en-US>
<head>
<title></title>
<style type="text/css">
iframe {
margin: 0 auto;
display: block;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<iframe width="800" height="500"">
</iframe>
</body>
</html>
Here you go.
http://jsfiddle.net/UFMP7/1/
The trick is to play with the margin and the top offset properties of the nested element.
In this case, given a parent div (A) of 300px, I've offset the nested div (B) by 50% of 300, which is 150. So B is positioned 150px down from the top of the A container. However, we aren't finished. In order to get the center of B to match the center of A, we are required to apply the negative 50% of B's height to the margin-top property. This centers it and the math checks out.
It's even easier if you know the dimensions of everything in pixels.
Feel free to change the A width or height. It'll center dynamically.
div#a
{
width: 300px;
height: 300px;
border-width:1px;
border-style: solid;
/* important stuff below */
display: inline-block;
}
div#b
{
width: 60px;
height: 60px;
background-color: red;
/* important stuff below */
position: relative;
margin: -30px auto 0 auto;
top: 50%;
}
As such, I'd suggest wrapping your iframe in a div. It gives you a bit more control. Then again, I'm one of those excessive div wrappers...
Use flex. It is more straight forward.
/* Here just for context */
html,
body,
.container {
width: 100%;
height: 100%;
}
/* This is whats needed */
.container {
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<iframe width="300" height="150" src="https://www.youtube.com/embed/V17ij5Ap1pA"></iframe>
</div>
if you need to center the iframe , giving a width to its selector should do the trick:
iframe {
margin: 0 auto;
display: block;
width: 800px;
border: 1px solid #ccc;
}
This is a poor way to do it, but it's the most compatible with all browsers. Other methods have their problems.
Create table that has height = 100% and one row with one cell in it.
Set the cell's style to vertical-align: middle; width: 800px; margin-right: auto; margin-left: auto;.
in stylesheet add
html, body{
height: 100%;
}
Once again, this is a bit of a bad way to do it, because you are using tables to organise visual layout, but it has benifits
simple
doesn't require HTML 5 on browser
compatible with pretty much every browser back to IE 5
doesn't need javascript
ammendment: make sure you specify min-width and min-height in body style to keep iFrame always visible.
This might work for you:
<table height="100%" width="100%">
<tr>
<td valign="middle" align="center">
<iframe width="800" height="500"></iframe>
</td>
</tr>
</table>
and in CSS
body{ height:100% }
I have tried on my own for such a long time and all the posts I have read and googled so far have not helped me, so I hope one of you guys can give me a hint:
I have a Layout consisting of a header, a footer, and a content. This layout streches over the whole page in height (which has already taken me a while to figure out). So far, so good. But now I want to stretch the content-div as far down as possible, down to the beginning of the footer. No matter what I do, it does not work, it either stays the length of the text in it, or it becomes the size of the whole window, hiding the footer and generating a scrollbar.
I read about a solution making it position:absolute, but I don't want that.
Here is the example: http://jsfiddle.net/N9Gjf/1/
You would really help me out!
Here is the css:
html, body {
height:100%;
text-align:center;
}
#wrapper {
min-height:100%;
height:100%
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}
#footer {
background-color: silver;
height:1.5em;
width:800px;
margin: -1.5em auto;
}
#header {
background-color: orange;
height:100px;
}
#content {
background-color: limegreen;
}
* {
margin:0;
padding:0;
}
And here is the html:
<div id="wrapper">
<div id="header">
<p>Header</p>
</div>
<div id="content">
INHALT
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
http://jsfiddle.net/calder12/CprV7/
You had a missing semi-colon after height in the wrapper. You want to set the height and min-height of the content to 100% as well.
#wrapper {
min-height:100%;
height:100%;
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}
#content {
background-color: limegreen;
height:100%;
min-height:100%;
}
I think relative-absolute positioning is the best solution (I admit I am unable to find a way to make the heights sum up to 100%). Here is what you need to do:
Demo #1
Make the wrapper position relative
Put all divs inside the wrapper
Use absolute positioning to position and size content and footer; use one of the following:
Do not specify height of the div; specify top and bottom
Specify either top or bottom but not both; specify height
Alternate method is to use negative margins. This could be a brain twister but once you grasp the idea it becomes mush simpler than positioning. Here is what you need to do:
Demo #2
Assign heights to header and footer
Assign 100% height to content
Use negative margins on content so that (i) content pushes itself over the header (ii) pulls footer over itself
Use z-index positioning to bring header in "front" of content
Use a padding div to push the stuff inside the content div below the header
#wrapper {
min-height:100%;
height:100%; /*missed the semicolon here*/
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue; position:relative
}
Now it works DEMO
You have an error with the wrapper:
#wrapper {
min-height:100%;
height:100%;
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}
You forgot to put a ; at the end of height:100%.
Try it and you will see that it will work
I have a series of buttons on my website that have I want to be at 100% width with a fixed column on the right and a flexible one on the left.
My first thought on how to do this was to use a liquid page layout and just use it on a div instead of the whole page. My results are below:
This image is what happens when the page is displayed so that the link can fit within the box.
If the page is scaled down however, I want the right column (set at 70px) to fill the entire height and align the text horizontally.
The code I am currently using to produce those results is this:
<li class="manage-files-list">
<div class="container">
<a class="right" target="_blank" href="">view</a>
<div class="left">
</div>
</div>
</li>
And
li.manage-files-list {
width: 100%;
display: table;
background-color:rgba(0,0,0,.05);
}
.container{
border-bottom:1px solid white;
color:#666;
text-shadow: 0 1px 0 #fff;
}
.left {
margin-right:70px;
word-break: break-all;
height:100%;
border-right:1px solid #fff;
}
.right {
width: 70px;
float: right;
text-align: center;
background-color:#333;
display:inline-table !important;
vertical-align: middle;
height:100%;
}
The only other requirement I can think of is that it needs to be wrapped in an <li> tag, but I don't see why that would be a problem.
Since it looks like you are okay using display: table*; values, here's a jsFiddle showing a solution using that.
It sets both .left and .right to display table cell, stops floating .right and instead moves it to be the second element. The issue was that your floating was causing the browser to ignore the height and the display property and just treat it as a floated block.
Also, making sure you are aware, these solutions using display: table*; are compatible IE8+
Although I don't really recommend using .left and .right as class names, the solution really only requires you to set overflow: hidden and word-wrap: break-word for your .left <div>.
.right { float: right; }
.left {
word-wrap: break-word;
overflow: hidden; }
Preview: http://jsfiddle.net/Wexcode/HzpJu/
trying to implement a dialog-box style behaviour using a separate div section with all the stuff inside it.
When the "dialog box" needs to be shown, it has to display at the center of the WINDOW, not in the center of the page, that is, REGARDLESS of the scroling position. Furthermore, the correct solution will not move the "dialog box" if the user scrolls the page.
In Chrome and FF this works using position='fixed' and centering the div in the intuitive way.
This does not seem to work in IE6 (apparently fixed is not supported there).
Any ideas?
If I were you I would do it using jQuery and I would suggest you try it out too. This should fit perfectly for jQuery based solution [jQuery Version][1] or try out
body {
font: 80% verdana, arial, helvetica, sans-serif;
text-align: center; /* for IE */
}
#container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
border: 2px solid #000;
width: 80%;
}
Try the method outlined here.
Use overflow-y and absolute positioning to emulate fixed positioning in IE6 using the following steps:
Create an absolutely positioned div and give it the desired top and left coordinates on the page
Set html {overflow-y: } to be hidden or visible instead of the default auto or scroll to eliminate the scrollbar for the absolutely positioned div
Set body{overflow-y: } to be auto or scroll to insert a new scrollbar for the body content
Set body { margin:0; height:100% } to make sure the content scrollbar goes the length of the page
Set top and left margins on the body to separate the content from the absolutely positioned div
Make sure the doctype is set to trigger Standards Mode in IE
Set the absolutely positioned div to top:50%; left:50%;
Add position:relative and the desired opacity to the container div
If the doctype is not set, move the html rules to the body tag, and the body rules to a wrapper div
<!DOCTYPE html>
<html>
<head>
<style>
body { margin:0; margin-left: 14em; }
#fixedbox { position: fixed; top: 1em; left: 1em; width: 10em; }
#fixedbox { padding: 0.5em; border: 1px solid #000; }
#container { height: 2000px; }
#media,
{
html { _overflow-y: visible; *overflow-y: auto; }
body { _overflow-y: auto; _height: 100%; }
#container { _position: relative; }
#fixedbox { _position: absolute; _top:50%; _left: 50%; }
}
</style>
</head>
<body>
<div id="container">
Fixed box
</div>
<div id="fixedbox">
Homer
</div>
</body>
</html>