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!
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
I have a simple 4-panel webpage set up mostly using divs and css. The panel divs are header, footer, menu, and content. The menu and content are supposed to be parallel columns with the same height.
Everything works fine until I put an iframe inside the content div. The content div then becomes taller than the menu div, even when I set them to the same height. I know that the iframe is the reason because this doesn't happen when I take out the iframe, but it's the content div - not the iframe - that actually is too tall.
How can I fix this? Some similar questions have been asked, but the proposed solutions didn't work for me, unless I was doing something wrong. Here's my complete code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #7D110C;
height:100px;
}
#menu {
float:left;
width:300px;
background-color: lightGrey;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#content {
margin-left:300px;
background-color: white;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#content iframe{
width:100%;
border:none;
margin: 0;
padding: 0;
background-color: pink;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#footer {
clear:both;
background-color: #7D110C;
height:100px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="menu"></div>
<div id="content"><iframe id="content_iframe" name="content_iframe"></iframe></div>
<div id="footer"></div>
</body>
<script type="text/javascript">
console.log( $('#content').css('height') );
console.log( $('#content_iframe').css('height') );
</script>
</html>
height:auto !important; overrides height:500px; in #content and in #content iframe. If you get rid of the height:auto !important; in both CSS classes, it works fine. jsFiddle
Ok here's the real fix, just leave everything as is and add display: block to #content iframe. That fixes it. An iframe is an inline frame, hence the extra white space. Updated jsFiddle
For modern browsers you can try this:
add position:relative to #content
remove width, height, min-heigth from #content iframe and add this instead:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
No idea what to do for IE 5 and 6, though.
If you set a fixed height:500px; and the iframe is taller than this, you will get a scrollbar on the side.
If you want a fixed height at all times, remove both height: auto !important and min-height: 500px and leave only height:500px.
height-auto: The browser calculates the height. This is default.
min-height: Defines the minimum height
The following will make menu and content have the same height at all times.
HTML
<div id="wrapper">
<div id="menu"></div>
<div id="content"><iframe id="content_iframe" name="content_iframe"></iframe></div>
</div>
CSS (Just add this to the already existent)
#wrapper { display: table; }
#menu { display: table-cell; } /* Remove the float */
#content { display: table-cell; } /* Remove the float */
Note, this won't work on IE7 and below though. Either you'll have to use fixed height for both menu and content or javascript.
I am trying to understand the basics of CSS layouting and have some problem with a page being too high when I add a border.
Here comes my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="KKF_00005.css">
<title>KKF 5: Border coping</title>
</head>
<body>
<div class="links_aussen">
<div class="innen">Rechts</div>
</div>
<div class="mitte_aussen">
<div class="innen">Mitte</div>
</div>
<div class="rechts_aussen">
<div class="innen">Links</div>
</div>
</body>
</html>
I use the following stylesheet:
#CHARSET "ISO-8859-1";
* {
height: 100%;
margin: 0;
padding: 0;
}
html,body {
background-color: grey;
width: 100%;
}
.innen {
border: 1px solid black;
}
.links_aussen {
float: left;
background-color: green;
width: 33%;
height: 100%;
}
.mitte_aussen {
float: left;
background-color: yellow;
height: 100%;
width: 34%;
}
.rechts_aussen {
float: left;
background-color: red;
height: 100%;
width: 33%;
}
And here is jsFiddle
My problem is that this code gives me a nice 100% layout horizontally but creates a scrollbar being to high verticcally. I would like to have no scrollbars but also see the borders (so overflow: hidden; will not help me in this one I think) - tested in Chrome and Firefox.
So: How can I tell my little browser that it should remove 2 pixels from the height so that I can have borders and no scrollbars?
Thanks in advance for any ideas and answers
André
Here is a solution for you using box-sizing: border-box. It also removes the need for the .inner div.
http://jsfiddle.net/mqchen/xHFvG/
EDIT: If anyone is wondering why this works, look down at Joakim Johansson's post. Now, back at this post. The box-sizing property simply redefines how the browser calculates the size of elements. More about it here: https://developer.mozilla.org/en-US/docs/CSS/box-sizing
This is because the default box model is content-box, and works like this:
The heights you set changes the "Content" part. So if you have height set to 100%, and border set to 1%, that will add up to 101%.
This is solved in different ways depending on what you're trying to do.
For example you can set the box-sizing attribute: http://www.quirksmode.org/css/box.html to make the height attribute work in different ways.
Can't for the life of me figure out a good solution right now (since relying on box-sizing isn't that compatible), but here's a bad one, using absolute positioning: http://jsfiddle.net/XhfmR/
Your problem is borders:
Instead of
.innen {
border: 1px solid black;
}
http://jsfiddle.net/tt13/997zC/
Use
.innen {
border-left: 1px solid black;
border-right: 1px solid black;
}
http://jsfiddle.net/tt13/997zC/1/
When you write just border it adds borders to all sides of div. In your case, bottom and top border takes extra 1px, you're getting result 2px taller in height. That's why you see scrollbar.
And always use jsfiddle for this kind of questions.
.innen {
border: 1px solid black;
}
is your problem. It creates the vertical scrollbar.
To solve this, use this code:
.innen {
border-left: 1px solid black;
border-right: 1px solid black;
}
http://jsfiddle.net/yrLtz/
Edit: Maybe the best solution is box-sizing: border-box as #mqchen suggested.
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!
I need a div with a height of exactly 1em minus 1px. This can be achieved in most browsers like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.helper {
/* background-color: black; */
position: absolute;
top: 5em;
left: 5em;
width: 2em;
height: 1em;
}
.target {
background-color: #89f;
position: absolute;
top: 0;
bottom: 1px;
width: 100%;
}
</style>
</head>
<body>
<div class="helper">
<div class="target"></div>
</div>
</body>
</html>
The "target" div has the desired height. The problem is, that this doesn't work in IE6, because it ignores the bottom attribute, when top is set (a well known problem).
Is there a workaround for IE6 (maybe with multiple nested divs, with borders/paddings/margins/whatever), or will JavaScript be the only solution?
Please note, that I can't use Quirks Mode.
Does the target div have to be physically 1px smaller or just display 1px smaller?
The easiest way would be to add in an "ie6 only" stylesheet:
.helper {overflow:hidden;}
.target {top:auto;}
This will display target as 1em - 1px but its real height is 1em with the top 1px is hidden.
IE6 is flaky when it comes to absolute positioning support.
Another solution, instead of the code above, would be to add in an "ie6 only" stylesheet:
.target {position:static;margin:-1px 0 1px 0;}
I see you got the absolute positioned solution to work. Great!
Is it required by the client? If not then just abandon IE6 and hacks for this crappy/old browser.