I'm trying to have this block element to be horizontally aligned in the middle but at the same time I would like the width to be the minimum possible for the contents inside. But I don't think it's possible or I'm not able to do it myself...
a#button-link {
background: url("images/button-link.png") no-repeat scroll center left;
margin: 12px auto 0 auto;
display: block;
width: 125px;
height: 32px;
line-height: 32px;
padding-left: 35px;
font-weight: bold;
}
This is my current code... The idea behind this is that the text for that tag could be slightly bigger or smaller depending on the user language and how much characters the same sentence has for that specific user's language. There's no way I can control but I still would like to have this element horizontally aligned to center.
Is this possible with CSS?
Use display:table.
Update
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>display:table</title>
<style>
div
{
display: table;
border-collapse: collapse;
border: 1px solid #950;
margin: 100px auto;
}
* html div
{ /* IE 6. If anybody finds a good solution for IE 7: Tell me! */
width: .1em;
}
* + html div
{ /* IE 7 Hack. Not perfect. */
float: left;
margin: 100px auto 100px 45%;
}
</style>
<div>Some Text.</div>
Live Demo
Related
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% }
Im just wondering if this is a browser rendering issue or incorrect css.
A nice way to scale a div in a defined aspect-ratio is, using a transparent image as a child element.
I have a small demo here. Under need this question.
But why doesn't it work nicely if I want a height of 100%.
I tested this in FF10, Safari 5.1.2, IE8 and IE9. (only ie8 seems to render correctly...)
Hope somebody can explain the problem and maybe come up with a solution.
Regards,
Rik
<!DOCTYPE html>
<html lang="uk">
<head>
<title>test</title>
<style>
html
, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: green;
}
/* AUTO WIDTH - doesnt render correct when scaling the browser window to a smaller size */
.holder1 {
position: relative;
display: inline-block;
height: 100%;
width: auto;
background: yellow;
border-right: 1px solid red;
}
.holder1 .ratio {
display: block;
height: 100%;
width: auto;
}
/* AUTO HEIGHT - works fine */
.holder2 {
position: relative;
display: inline-block;
height: auto;
width: 100%;
background: yellow;
border-right: 1px solid red;
}
.holder2 .ratio {
display: block;
height: auto;
width: 100%;
}
</style>
</head>
<body>
<span class="holder1">
<img src="/images/empty_image.png" class="ratio" alt="Ratio image">
</span>
</body>
</html>
After view your question, I have some idea and suggest for your code:
1.Different between width:auto and width:100%, when you set auto for width, you leave the browser handle this width, with every different browser, they will handle width:auto follow their own rules. With width:100%, you force the browser must expand to have full width.That is what I think.
But for sure your div can expand 100% on every cross browsers, add css min-width:100%, it will do as you wish correctly.
2.About your CSS, I need you take a look at position:relative, this line of code have no sense, in this situation,
position:relative = position:static
when you use position:relative, you must describe where is the position you wish your element relative to, add top or left to do it.
Hope it can help you!
My problem is that ratio of width/height (for div with id="wrapper", different is huge) isn't the same on Chrome, Mozilla and IE (IE looks like refuse attribute for heigt at all). Any help, I need two divs fixed size, one beside other .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
div#wrapper {
width: 1000px;
width:700px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}
div#left {
width: 80%;
height: 80%;
min-height: 80%;
float: left;
background-color: #DFDFDF;
border-left-width:2px;
border-left-style:solid;
border-left-color:#606060;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#606060;
border-top-width:2px;
border-top-style:solid;
border-top-color:#606060;
}
div#right_up {
width: 19%;
height: 80%;
min-height: 80%;
float: left;
background-color: whitesmoke;
border-top-width:2px;
border-top-style:dashed;
border-top-color:#FF2A2A;
border-right-width:2px;
border-right-style:dashed;
border-right-color:#FF2A2A;
border-left-width:2px;
border-left-style:solid;
border-left-color:whitesmoke;
}
</style>
</head>
<body id="body"">
<div id="wrapper">
<div id="left">
REFERENCE:
</div>
<div id="right_up">
</div>
</div>
</body>
</html>
First of all you cannot use percentage heights on floated elements.
Second, I see no height set on the wrapper div
Make sure that your code validates: http://validator.w3.org/ . Fixing the little errors it find will remove a lot of variance between browsers.
For instance, you've specified the width attribute twice for #wrapper, which doesn't make any sense.
Hey Rebecca and welcome to SO! :)
First of all, I don't think you could ever get mixed measurements units act the way you want. You have divs width in percentages and border width in pixels, basically you're hoping that 1% will never mean more than 2px for the wrapper width.
Let's take it step by step. First of all, you have 2 widths for the wrapper div. The second will overwrite the first and you'll end up with a width of 700px. That's very little, you should reconsider to a width of 960px or a max. of 990px (which assures you won't have an horizontal scrollbar on 99.9% of the screen resolutions today.
Let's rewrite that to:
div#wrapper {
width: 700px; /* 700 to stick to your design */
margin: 0 auto; /* which is basically the same as you have, but in one property, not two */
overflow: hidden;
}
div#left {
width: 558px; /* 80% of 700px (wrapper div) minus the border width. It will never change so there's no need to set it in percentages */
height: 80%; /* height will overwrite min-height on FF for example. Also, min-height doesn't work in IE, setting a fixed height might be the best way to go */
min-height: 80%;
float: left;
background-color: #DFDFDF;
border: 2px solid #606060; /*set a border all over the div */
border-right: 0; /* and remove the right border */
}
div#right_up {
width: 140px; /* 20% of 700px */
height: 80%; /* same height problem as you have for the other div here */
min-height: 80%;
float: right; /* float right, not left like the other one */
background-color: whitesmoke; /* please set colors in hex, not like this */
border: 2px dashed #FF2A2A;
border-left: 2px solid whitesmoke; /* again, colors in hex please */
border-bottom: 0;
}
Also, add a div with class clear in the markup like this:
<div id="wrapper">
<div id="left">
REFERENCE:
</div>
<div id="right_up">
</div>
<div class="clear"></div>
</div>
And add a class definition in the css like this:
.clear {
clear: both;
}
The last advice is to allways put your CSS in an external stylesheet and reference it in your page in the head section of the HTML like this:
<link rel="stylesheet" type="text/css" href="path/to/style.css">
Good luck!
I'm trying to center a heading (with variable width) and have the underline running from the left hand edge of the page to the end of the text. Unless I'm missing something, there doesn't seem to be an easy way of doing this! The closest I've come to what I want is:
<style type="text/css">
#wrapper1 {
margin-right: 50%;
border-bottom: 4px solid red;
}
#wrapper2 {
text-align: center;
position: relative;
left: 50%;
}
h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}
</style>
<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>
This way, the text is centered with a border acting as an underline, and the border on wrapper1 extends from the left hand edge to the center. BUT, because the heading is within the wrapper, and the border on the wrapper is outside of the content, the wrapper border is below the heading border.
Any suggestions gratefully received - this is driving me mad!
In your #wrapper2:
bottom: -4px;
Will make it move 4 pixels downwards to overlap the other line.
(Tested in Safari, works)
Try removing both the padding-bottom and margin-bottom on both wrappers (set to 0), then add it back in on the inner one only until it looks right.
OK, I had a go, and this works for me. I had to put position relative on both wrappers, which then allows you to push the inner wrapper down a couple of pixels from it's original location.
<html>
<head><title>test</title></head>
<body>
<style type="text/css">
#wrapper1 {
margin-right: 50%;
margin-bottom:0;
padding-bottom:0;
border-bottom: 4px solid red;
position:relative;
}
#wrapper2 {
text-align: center;
position: relative;
left: 50%;
margin-bottom:0;
padding-bottom:0;
position:relative;
top:4px; /*The width of the border doing the underlining*/
}
h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}
</style>
<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>
</body>
</html>
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>