I have a div that will not stay put, it travels outside of the parent. The div I'm having trouble with is marked "6". It travels outside the parent to the right.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html{
border:1px solid;
height:99%;
}
body{
height:100%;
margin:0;
padding:0;
}
#pageWrapper{
padding:0;
margin:0;
height:100%;
position:relative;
}
</style>
</head>
<body>
<div id="pageWrapper">
<div style="width:50%;border-right:0px solid;height:100%;float:left;position:relative;">
<div style="width:100%;height:30%;border:1px solid;">1</div>
<div style="width:100%;height:40%;border:1px solid;">2</div>
<div style="width:100%;height:30%;position:absolute;bottom:0;border:1px solid;">3</div>
</div>
<div style="width:50%;border:0px solid;height:100%;float:right;">
<div style="width:100%;height:40%;border:1px solid;">4</div>
<div style="width:100%;height:40%;border:1px solid;">5</div>
<div style="width:100%;height:20%;position:absolute;bottom:0;border:1px solid;">6</div>
</div>
</div>
</body>
</html>
Add position:relative to the parent div or remove position:absolute from the div you marked
Get rid of the position:absolute;bottom:0 on the lower two divs - It's unnecessary and causes your erratic behaviour.
Related
I am trying to place a div which contains a clickable picture on a div which contains a background. However, this keeps happening:
http://gyazo.com/2144dfe91b46898e125787b2f5249542
It goes below the image and I don't understand why.
here is my code:
!DOCTYPE html>
<html>
<head>
<title>SlammedPK</title>
<link rel="shortcut icon" href="dragonclaws.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
<style type"text/css">
#title{
height:100%;
width:100%;
display:inline-block;
}
#forum{
height:10%;
width:10%;
background-image:forum.png;
display:block;
}
</style>
</head>
</body>
<div id="container">
<div id="title" style="position:relative" alt="title">
<img src='fulltitle.png' style='width:100%;height:100%' alt='[]' />
</div>
<div id="forum" style="position:absolute" alt="forum">
<IMG SRC="forum.png" ALT="forum">
</div>
</div>
</body>
</html>
if you could help that would be wonderful.
I made this JsFiddle: http://jsfiddle.net/2c7eQ/
Make both #forum and #title are position: absolute
HTML:
<div id="container">
<div id="title">
div1
</div>
<div id="forum">
div2
</div>
</div>
CSS:
#title{
position: absolute;
border: 1px solid;
background-color: blue;
height:100%;
width:100%;
}
#forum{
position: absolute;
left: 100px;
top: 100px;
border: 1px solid;
background-color: green;
height:10%;
width:10%;
}
First off, your format for the background image is incorrect, you need background-image: url(forum.png); and the same thing for #title. I'm not sure why you give it a background image when you also have an img within it though
As for your issue, you need to give #container position:relative; or position:absolute. Absolutely positioned elements have to be a child or a relatively positioned parent
I am trying to center a div. This is my code:
<!Doctype Html>
<html>
<head>
<title>title</title>
<style type="text/css">
* {
text-align: left;
}
</style>
</head>
<body>
<div id="container" style="width: 500px; margin-left: auto; margin-right: auto; text-align: center;">
<div id="content" style="text-align: center;">
<p>Beispiel: DIV Container horizontal zentrieren.</p>
</div>
</div>
</body>
</html>
It isn't completely center, because I set in the CSS reset that text-align is left. If I remove this line everything is fine. Why is text-align: center; of the div with the id #content not overriding the CSS reset?
You need !important to overwrite that (leaving the p tag)
#content{margin:0 auto; background:red; width: 500px; text-align: center !important;}
DEMO 1
Or else you can write css for p tag
#content p{text-align: center }
DEMO 2
Try this
Key point is
margin: 0 auto
Even better, less markup:
<!Doctype Html>
<html>
<head>
<title>title</title>
<style type="text/css">
#content{
width: 500px;
margin:0 auto;
}
#content p {
text-align:center;
}
</style>
</head>
<body>
<div id="content">
<p>Beispiel: DIV Container horizontal zentrieren.</p>
</div>
</body>
</html>
In most cases it's better to prevent useing ìnline-styles`. Also move your styles in an seperate css file for a better maintainability.
In HTML * tag means its consider all tags strictly the property as you mention in between, you need to little change your style please visit link
I am trying to design a navigation menu that is centered that sits within a div that spans 100% width of the screen. I have my navigation divs within a parent div called navigation, and that parent div is within a navigation container. I felt this was necessary to have a centered navigation within this 100% width parent div.
The problem is that I am not having luck getting the parent div to expand with the appropriate padding I give to the navItem divs. Sorry if this is kind of confusing, thanks for any advice offered.
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
MC Machine Test
</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="top">
</div>
<div class="navContainer">
<div class="navigation">
<div class="navItem">Home</div>
<div class="navItem">Products</div>
<div class="navItem">Facility</div>
<div class="navItem">Photo Gallery</div>
<div class="navItem">Request a Quote</div>
<div class="navItem">Contact Us</div>
</div>
</div>
<div class="mainSection">
</div>
</body>
</html>
Here is the CSS.
.navContainer
{
width:100%;
background-color:#ffffff;
color:#333333;
border-bottom:solid 1px #333333;
}
.navigation
{
border:0px 1px 1px 0px solid #333333;
width:680px;
margin-left:auto;
margin-right:auto;
}
.navItem
{
padding:20px;
border-right:1px solid #cccccc;
display:inline;
}
Don't use DIVs to build menus. Use styled unordered lists.
See: I love lists.
I may be mistaken here but I think you can't add top/bottom padding to inline elements. If I understood what you want to do correctly, you could define the display as block and use floats to make them stand next to each other as opposed to below each other.
.navItem
{
padding:20px;
border-right:1px solid #cccccc;
display:block;
float:left;
}
I've been working with this for awhile and I'm pretty sure its unsolvable. Just thought I'd throw it out to find out if someone smarter than I can figure it out (without changing the markup! :)
The layout below is a typical tableless css based design with header and footer sandwiched between two columns (content and sidebar) using floats and relative positioning.
This particular layout is a WordPress theme that I've designed dozens of sites around solely with css and images. That's why my requirement is that the markup remain as is.
I'd like the "avatar" div to stay anchored to the top of the header div regardless of the height of "featured" and without using "position:fixed" or changing the markup order. If you copy the code below and save it as an .html file, you'll see that it does just that right out of the box. However, once you add or subtract height from "featured", "avatar" will move accordingly up or down. That's the challenge, I need avatar to stay at the zero position relative to the body, regardless of the dimensions of "featured".
Setting "sidebar" to absolute positioning would be the obvious solution, however, it suffers in that it will screw up the flow of the footer div below content and sidebar (whichever is taller).
I'm thinking that the answer might lie in one of the table display properties (since this is essentially creating an unmerged cell out of sidebar and setting its top margin relative to its parent container), but that's one area of css that I've largely left alone.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
body {margin:0;padding:0;}
.header {height:100px; background:red; width:977px; margin:0 auto;}
.main {width:977px; margin:0 auto;}
.featured {background:green;height:50px;}
.content {float:left; min-height:300px; border:1px solid #777; width:700px;}
.sidebar {background:blue; width:250px; float:right; min-height:400px}
.footer {background:gold;height:100px;clear:both;width:977px; margin:0 auto;}
.clear {clear:both;}
.avatar { width:200px; background:orange; margin-top:-150px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
<div class="sidebar">
<div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div>This content should flow below avatar relative to avatar's height</div>
</div>
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div>
</div>
</body>
</html>
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
*{margin:0;padding:0;}
body{margin:0;padding:0;}
.wrapper{width:977px;margin:0 auto;}
.header{height:100px;background:red;}
.leftColumn{float:left;width:700px;}
.featured{background:green;height:50px;}
.content {min-height:300px;border:1px solid #777;}
.sidebar {background:blue;width:250px;float:left;margin-left:27px;min-height:400px}
.avatar {width:200px; background:orange;margin-top:-100px;}
.clear {clear:both;}
.footer{background:gold;height:100px;clear:both;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="leftColumn">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
</div><!--.leftColumn-->
<div class="sidebar">
<div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div>This content should flow below avatar relative to avatar's height</div>
</div><!--.sidebar-->
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div><!--.main-->
</div><!--.wrapper-->
</body>
</html>
How about something like this:
Avatar and Sidebar relative to the header floated right to stay in the flow?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
body {margin:0;padding:0;}
.header {height:100px; background:red; width:977px; margin:0 auto;z-index:1000;position:relative;}
.main {width:977px; margin:0 auto;}
.featured {background:green;height:50px;}
.content {float:left; min-height:300px; border:1px solid #777; width:700px;}
.sidebar {background:blue; width:250px; float:right; min-height:400px}
.footer {background:gold;height:100px;clear:both;width:977px; margin:0 auto;}
.clear {clear:both;}
.avatar { width:200px; background:orange; /*margin-top:-150px;*/ }
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div id="header_stuff" style="float:left;">header</div>
<div id="side2" style="float:right;background-color:blue;"><div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div class="sidebar">
<div>This content should flow below avatar relative to avatar's height</div>
</div>
</div>
</div>
<div class="main">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div>
</div>
</body>
</html>
Edit: Perhaps this is closer. The blue sidebar can be tweaked if the header sections need to be on top (z-index, etc).
My goal is to make a layout that is 200% width and height, with four containers of equal height and width (100% each), using no javascript as the bear minimum (or preferably no hacks).
Right now I am using HTML5, and CSS display:table. It works fine in Safari 4, Firefox 3.5, and Chrome 5. I haven't tested it yet on older versions.
Nonetheless, in IE7 and IE8 this layout fails completely. (I do use the Javascript HTML5 enabling script /cc../, so it should not be the use of new HTML5 tags)
Here is what I have:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<title>IE issue with layout</title>
<style type="text/css" media="all">
/* styles */
#import url("reset.css");
/* Generall CSS */
.table
{
display:table;
}
.row
{
display:table-row;
}
.cell
{
display:table-cell;
}
/* Specific CSS */
html, body
{
//overflow:hidden; I later intend to limit the viewport
}
section#body
{
position:absolute;
width:200%;
height:200%;
overflow:hidden;
}
section#body .row
{
width:200%;
height:50%;
overflow:hidden;
}
section#body .row .cell
{
width:50%;
overflow:hidden;
}
section#body .row .cell section
{
display:block;
width:100%;
height:100%;
overflow:hidden;
}
section#body #stage0 section header
{
text-align:center;
height:20%;
display:block;
}
section#body #stage0 section footer
{
display:block;
height:80%;
}
</style>
</head>
<body>
<section id="body" class="table">
<section class="row">
<section id="stage0" class="cell">
<section>
<header>
<form>
<input type="text" name="q" />
<input type="submit" value="Search" />
</form>
</header>
<footer>
<table id="scrollers">
</table>
</footer>
</section>
</section>
<section id="stage1" class="cell">
<section>
content
</section>
</section>
</section>
<section class="row">
<section id="stage2" class="cell">
<section>
content
</section>
</section>
<section id="stage3" class="cell">
<section>
content
</section>
</section>
</section>
</section>
</body>
</html>
You can see it live here: http://www.tombarrasso.com/ie-issue/
Solved!
Turns out there were many issues.
One is that this /*#cc_on'abbr article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video'.replace(/\w+/g,function(n){document.createElement(n)});#*/ comment is required in a script tag within the head of the document.
Secondly, IE7 and below to not recognize display:table or the like, see Quirksmode.
Lastly, the html, body elements needed to have height:100% so that IE knows what to refer to.
Anyway, this is fixed and works great.