The following layout works fine in every browser (Firefox, Chrome, Opera), except Internet Explorer 8:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<head>
<body>
<div id="divMain" class="CMain">
<div id="divL" class="CLeft">
</div>
<div id="divR" class="CRight">
</div>
</div>
</body>
</html>
CSS:
.CMain {
position: absolute;
overflow: hidden;
top: 20px;
left: 20px;
right: 20px;
height: 75%;
min-width: 500px;
min-height: 400px;
max-height: 550px;
background-color: cyan;
border: 1px solid #000000;
margin: 0 auto;
}
.CLeft {
position: absolute;
overflow: visible;
top: 0px;
right: 50%;
width: 49%;
height: 100%;
min-width: 200px;
min-height: 450px;
max-width: 450px;
max-height: 550px;
background-color: yellow;
border: 1px solid #000000;
margin: 0 auto;
padding: 0px;
}
.CRight{
position: absolute;
overflow: visible;
top: 0px;
left: 50%;
width: 49%;
height: 100%;
min-width: 200px;
min-height: 450px;
max-width: 450px;
max-height: 550px;
background-color: blue;
border: 1px solid #000000;
margin: 0 auto;
padding: 0px;
}
The two inner divs are supposed to be back-to-back in the center of the main div, and they clearly are in every browser except IE8. In IE8, the left div goes to the left side, not in the center.
Am I doing something wrong? ( please don't suggest removing min/max-width/height constraints, they are needed ). Any suggestions would be greatly appreciated.
Here is a fiddle with this setup: http://jsfiddle.net/fNtJU/
imageshack screenshot link ie8: http://img831.imageshack.us/img831/3838/ie8g.jpg
Have you tried setting a width on the main container? for example, width: 90%; and lose the left:20px;/right:20px;. I don't think the child containers can calculate a position when the parent doesn't have an explicit width specified, even with max-width. I can't test on ie8 currently though.
Related
Below code will produce a centered circle .
In Chrome circle is displaced by 10% from top.
But In Firefox it is not. Why
.game
{
height: 40vw;
width: 40vw;
background-color: #333;
border-radius: 100%;
text-align: center;
position: relative;
margin:0 auto;
box-shadow: 0px 0px 1.6vw #333;
top:10%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="game.css">
</head>
<body>
<div class="game">
</div>
</body>
</html>
Output in Chrome:
enter image description here
Output in Firefox:
enter image description here
Have you set body and html in your css?
html, body {
height: 100%;
width: 100%
}
A) Insert this code to style:
html, body {
height: 100%;
}
html, body {
height: 100%;
}
.game {
height: 40vw;
width: 40vw;
background-color: #333;
border-radius: 100%;
text-align: center;
position: relative;
margin:0 auto;
box-shadow: 0px 0px 1.6vw #333;
top: 10%;
}
<div class="game"></div>
make sure your Firefox tab window is zoom out.
I'm not sure I can explaint clearly what is the problem, so please be understanding.
I have this HTML code:
<div id="container">
<div id="navbar">
...
</div>
<div id="content">
...
</div>
</div>
Here is the CSS code:
#container {
display: block;
width: 640px;
height: 480px;
}
#navbar {
display: block;
position: fixed;
width: 640px;
height: 70px;
}
#content {
display: block;
marign: 70px 0 0 0;
width: 640px;
height: 410px;
overflow-y: auto;
}
It works fine on desktop and any Android-base browser, but in iPhone's Safari... When I zoom in on this page the content works fine, but the fixed element stay on position relative to screen. Every other element moving fine.
What is the problem? I don't have idea...
An element with fixed position is positioned relative to the browser window.
You should give top: 0; and/or left:0 etc
try on this code http://jsfiddle.net/nandhakumarsri9/bkwLG/
#container {
display: block;
width: 640px;
height: 480px;
border: 1px solid #000;
box-sizing: border-box;
position: relative;
}
#navbar {
display: block;
position: absolute;
width: 640px;
height: 70px;
border: 1px solid #F00;
box-sizing: border-box;
}
#content {
display: block;
width: 640px;
height: 410px;
overflow-y: auto;
border: 1px solid #00F;
box-sizing: border-box;
position: absolute;
top: 70px;
}
Most of mobile browsers have problem with fixed positioning. Try to use jQuery mobile framework with data-position="fixed" attribute.
I am trying to figure out the correct way to make a div class inherit the parent div height so that when I do for example, padding-top: 100% , it puts the element at 100% of the parent div.
Here's my code:
CSS
#globalContainer{
margin: 0px auto;
width: 100%;
height: 100%;
}
#header-out{
width: 100%;
background-color: black;
}
#header{
width: 940px; /* Set to % when possible */
height: 240px; /* Set to % when possible */
margin: 0px auto;
background-color: white;
}
#header .title{
position: relative;
float: left;
padding-top: 100%;
}
HTML:
<body>
<div id="globalContainer">
<div id="header-out">
<div id="header">
<div class="title">Test</div>
</div>
</div>
</div>
</body>
At the moment, my Test appears at the very bottom of the page inside of the bottom of my header...
Thanks !
EDIT: I am now trying to add a logo next to my title, I used this code:
#header .title{
position: relative;
float: left;
top: 50%;
left: 2.5%;
width: 250px;
height: 100px;
border-style: solid;
border-width: 1px;
}
#header .logo{
position: relative;
float: left;
top: 50%;
width: 250px;
height: 100px;
border-style: solid;
border-width: 1px;
}
Problem is, it overlaps my title, starting where my title would end if I did not use the left: 2.5%
I tried to remove the float: left, it doesn't change anything...
Anyone can help on this ?
In the website below website's layout in the navigation,when hovered on the buttons it rises up and when the mouse is taken away it sinks down,how to do it either in css or other ways ?
www.bigfishgames.com/
You can do it with plain CSS:
<!DOCTYPE html>
<html>
<head>
<style>
div { border-radius: 4px; width: 100px; height: 20px; background: green; position: absolute; top: 50px; left: 50px; text-align: center; padding: 10px 0px; }
div:hover { top: 40px; padding-bottom: 20px; }
</style>
</head>
<body>
<div>Howdy</div>
</body>
</html>
Note how both padding-bottom and height are changed to give the illusion that the div is expanding 'upwards'.
I want a centered header DIV and inside it the following absolutely positioned DIVs:
logo
menu
line
title
But my HTML/CSS has two problems:
for some reason the page is now wider (see bottom scroll bar)
If my title is longer, I want it to be right-aligned of course
What I really want is a centered DIV and inside that I want to position DIVs absolutely within their centered parent (but not absolute since they wouldn't be centered). Is this possible?
How would you accomplish this layout?
alt text http://tanguay.info/web/external/centeredLayoutProblem.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#headerArea {
background-color: yellow;
margin: 0px auto;
width: 760px;
height: 150px;
}
#logo {
position: relative;
top: 20px;
left: 20px;
background-color: orange;
text-align: center;
font-size: 32pt;
width: 150px;
padding: 10px;
z-index: 10;
}
#menu {
position: relative;
top: -52px;
right: -480px;
background-color: tomato;
text-align: center;
font-size: 14pt;
width: 240px;
padding: 10px;
}
#title {
position: relative;
top: -35px;
right: -620px;
font-style: italic;
font-size: 14pt;
}
#line {
position: relative;
top: -60px;
border-bottom: 1px solid blue;
margin: 0 20px;
}
</style>
</head>
<body>
<div id="headerArea">
<div id="logo">LOGO</div>
<div id="menu">One Two Three Four Five</div>
<div id="title">This is the Title a Bit Longer</div>
<div id="line"></div>
</div>
</body>
</html>
Make your #headerArea div position:relative. Then, for all your inner divs, you can position:absolute in relation to #headerArea.
Like so:
<style type="text/css">
#headerArea {
position:relative;
background-color: yellow;
margin: 0px auto;
width: 760px;
height: 150px;
}
#logo {
position: absolute;
top: 20px;
left: 20px;
background-color: orange;
text-align: center;
font-size: 32pt;
width: 150px;
padding: 10px;
z-index: 10;
}
#menu {
position: absolute;
top: 20px;
left: 480px;
background-color: tomato;
text-align: center;
font-size: 14pt;
width: 240px;
padding: 10px;
}
#title {
position: absolute;
top: 80px;
left: 20px;
width: 720px;
text-align: right;
font-style: italic;
font-size: 14pt;
}
#line {
position: absolute;
width: 720px;
height: 1px;
top: 70px;
border-bottom: 1px solid blue;
margin: 0 20px;
}
</style>
You should use the 'left' property instead of 'right' since 'right' doesn't work in ie6.
The 'left' and 'top' values I've put in may be a little off, but you can tweak to get what you want.
EDIT:
I've corrected the pixel values, and added a width to your line div, and a height since IE defaults all divs to one text line high.
Also, your title div should be full width with text-align right so that the title will expand to the left instead of the right.
Yes. If you do #headerArea{position:relative;} you can have position:absolute on the children and their position will be relative to the parent.
Use position:relative on the header (as has already been suggested) so that it becomes a layer, then the absolutely positioned elements inside it will use that element as origin.
You can place the line before the logo in the markup, then you don't need to use z-index to put the logo on top of the line. All browsers doesn't handle z-index the same...
By placing the title to the right, it will expand to the left as needed.
Use a top border instead of a bottom border on the line, that elliminates the problem with IE wanting to make the element at least one character high.
I removed some unneccesary styles, and added a title to the page (as that is required in a proper html document).
This will display consistently in Firefox 3, IE 7, IE 8, Opera 9 and Chrome 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://data.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
body {
margin: 0;
padding: 10px;
}
#headerArea {
position: relative;
background: yellow;
margin: 0 auto;
width: 760px;
height: 150px;
}
#headerArea div {
position: absolute;
}
#logo {
top: 20px;
left: 20px;
background: orange;
text-align: center;
font-size: 32pt;
width: 150px;
padding: 10px;
}
#menu {
top: 20px;
right: 20px;
background: tomato;
text-align: center;
font-size: 14pt;
width: 240px;
padding: 10px;
}
#line {
top: 80px;
left: 20px;
width: 720px;
border-top: 1px solid blue;
}
#title {
top: 90px;
right: 20px;
font-style: italic;
font-size: 14pt;
}
</style>
</head>
<body>
<div id="headerArea">
<div id="line"></div>
<div id="logo">LOGO</div>
<div id="menu">One Two Three Four Five</div>
<div id="title">This is the Title a Bit Longer</div>
</div>
</body>
</html>
(You may need to adjust the positioning to get it exactly as you want, but that should be quite easy.)