I can't seem to centre align my div(title) which sits inside another div.
HTML
<div class="wrapper">
<div id="header">
<div class="title">Home</div>
</div>
</div>
CSS
#header {
position:relative;
width:1200px;
height:400px;
margin:auto;
border:1px solid red;
}
.title {
position:absolute;
width:1000px;
height:140px;
background-color:red;
margin:auto;
}
Remove position: absolute and it works perfectly.
Position: absolute is only necessary when you need very specific placement outside of the normal document flow. In this case, nothing special is needed apart from automatic left and right margins, which you already have.
you are mixing stuff.
Remove position absolute.
or if you want it to be absolute you can do this
.title {
position:absolute;
width:1000px;
height:140px;
left: 50%;
background-color:red;
margin-left:-500px;
}
Related
I'm currently playing around with HTML and using position to align my div content.
At the moment, I have 3 divs. 2 divs using position:fixed and the other using position:relative.
My two fixed divs span the width of the page at 100% and are aligned at the top of the webpage. Like a top bar.
My third div is placed underneath the top bar with position:relative. The problem i'm having is that the third div is not being positioned underneath the two fixed divs (see picture)
Here is my code:
.topbar-container {
position:fixed;
width:100%;
height:72px;
background-color:#ffffff;
border-bottom:1px solid #e0e0e0;
z-index:2;
top:0;
}
.topbar {
position:fixed;
width:1200px;
height:72px;
left:50%;
margin-left:-600px;
top:0;
}
.body-container {
position:relative;
width:80%;
height:200px;
margin:0 auto;
left:50%;
margin-left:-600px;
max-width:1200px;
border:1px solid red;
}
My HTML:
<div class="topbar-container">
<div class="topbar">
</div>
</div>
<div class="body-container">
</div>
As you can tell by the picture, the div with the red border is being pushed up to the top of the page, where i thought by using position:relative would have fixed the problem.
Could someone please take a look for me?
Thanks in advance
http://www.dumpt.com/img/viewer.php?file=d96p2ywgzqs5bmnkac7q.png
Setting position: fixed or position: absolute will remove the element from the page flow. You now need to explicitly set the top property for .body-container to make it appear under the .topbar-container:
.body-container {
position:relative;
width:80%;
height:200px;
margin:0 auto;
left:50%;
margin-left:-600px;
max-width:1200px;
border:1px solid red;
top: 72px; /* must be >= the height of .topbar-container */
}
I have a #slider div with an image. After that, I have a #content div which has text. I have tried position:relative so I think it should come after the previous div, I mean #slider but here it is not coming that way.
What is the problem here? How to overcome it?
HTML
<div id="slider">
<img src="http://oi43.tinypic.com/25k319l.jpg"/>
</div>
<div id="content">
<div id="text">
sample text
</div>
</div>
CSS
#slider {
position:absolute;
left:0;
height:400px;
}
#slider img {
width:100%;
}
#content {
position:relative;
}
#content #text {
position:relative;
width:950px;
height:215px;
color:red;
}
JSFIDDLE
You have set #slider as absolute, which means that it "is positioned relative to the nearest positioned ancestor" (confusing, right?). Meanwhile, #content div is placed relative, which means "relative to its normal position". So the position of the 2 divs is not related.
You can read about CSS positioning here
If you set both to relative, the divs will be one after the other, as shown here:
#slider {
position:relative;
left:0;
height:400px;
border-style:solid;
border-width:5px;
}
#slider img {
width:100%;
}
#content {
position:relative;
}
#content #text {
position:relative;
width:950px;
height:215px;
color:red;
}
http://jsfiddle.net/uorgj4e1/
what about changing the position: relative on your #content #text div to position: absolute
#content #text {
position:absolute;
width:950px;
height:215px;
color:red;
}
http://jsfiddle.net/CaZY7/12/
then you can use the css properties left and top to position within the #content div
I was wondering how to make the rectangle in this fiddle: http://jsfiddle.net/gztdG/2/ 'overflow' to the left, so that the rectangle aligns to the right edge of the square. A simple question, but I can't figure out how to achieve this with position: absolute. Thanks in advance. Here is the html:
<div id='square'>
<div id='rectangle' />
</div>
And here is the css:
#square {
height:50px;
width:50px;
background:blue;
margin:auto;
}
#rectangle {
width:200px;
height:20px;
background:red;
position:absolute;
}
I think, the correct answer is to set position: relative; on the parent container, then have the rectangle align to the right (see this http://jsfiddle.net/gztdG/5/):
#square {
position: relative; <---
height:50px;
width:50px;
background:blue;
margin:auto;
}
#rectangle {
position:absolute;
right: 0; <---
width:200px;
height:20px;
background:red;
}
Use negative margin, like that:
margin-left:-150px;
http://jsfiddle.net/4qr7z/1/
You could also move the div tags so that the rectangle is not wrapped in the square (unless your design requires it)
<div id='square'></div>
<div id='rectangle'></div>
#square {
height:50px;
width:50px;
background:blue;
margin-left:150px;
overflow:auto;
}
#rectangle {
width:200px;
height:20px;
background:red;
position:relative;
}
This would move the square instead, and use margin-left:150px;
The reason I could imagine this being useful is that pages are loaded from left to right, so if the window is moved, you might experience some displacement, since margin-left:-150px will push it right.
I am working on a site where a 3rd party in-line HTML editor is being used (CKEditor). I have the editor control wrapped in a DIV that is relatively positioned and has a z-index that places is at the top of the visible stack. The problem is that on some pages there are images that are floating (float: right) on the right side. Some of the CKEditor styles are setting elements overflow property to hidden (overflow: hidden).
So although my containing DIV has a larger z-index than the floating image the CKEditor elements are not overflowing on top of the image. This creates the a result that looks as if the top right corner of the editor has been cut out.
Is there a way I can work around this without trying to edit CKEditor styles? Check out this example sinario:
http://jsfiddle.net/nmartin867/StHJA/
HTML
<body>
<div class="floating">
I'm floating!
</div>
<div class="container">
<div class="inner">
Why am I not overlapping?
</div>
</div>
CSS:
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:visible;*/ <--This would work
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
float:right;
}
You could do this but I am not sure if it applies to your situation.
.inner{
background-color:yellow;
position: absolute;
width:100%;
text-align: right;
}
Alternatively when you want to override third party styles but do not wish to edit them in the third party application you can recreate the same css class in your own stylesheet and force it to overwrite the third parties by using important! eg:
float: none !important;
Have you tried absolute positioning instead? Because you are floating a DIV that is not in the same container you want to overlap, it will position outside in the body itself. Also, you did not set the z-index for the floated DIV, so it will be layered behind because it is ahead of the other container in sequential order.
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:hidden;*/
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
/* float:right;*/
position:absolute;
top:0px;
right:0px;
z-index:2;
}
I am not sure if this is the effect you want to accomplish, but this will position the first container on the top.
OK. Here's the deal. I've read quite a few articles on this site and others about vertical centering but they all seem to refer to centering a single div and I haven't been able to apply it correctly to a more complex layout. I'm working on a site which has a header, navigation bar, content area, sidebar, and footer. A mockup of the design can be seen here: mockup
I've got all the divs fitting together nicely thanks to the use of the 0px text trick in the container div and the content & sidebar sit next to each other using display:inline-block. the header, navbar, and footer are horizontally centered using margin-left:auto & margin-right:auto. together this nicely renders the whole site horizontally centered but I can't figure out how to apply vertical centering to the whole site without breaking the design. This is not a fluid layout, all divs have fixed pixel sizes that the content fits into very nicely. It seems that there should be some way to use absolute or relative positioning and percentages to center everything vertically but I can't figure out how to do it. The code for the mockup is attached. Thanks!
<style type="text/css">
<!--
DIV.container {
position:relative;
height:100%;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
#header {
width:650px;
height:87px;
z-index:1;
background-color:#C90;
vertical-align:middle;
margin-left:auto;
margin-right:auto;
font-size:12px;
}
#navbar {
width:650px;
height:32px;
z-index:2;
background-color:#0FF;
vertical-align:middle;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
#content {
width:500px;
height:265px;
z-index:3;
background-color:#33F;
display:inline-block;
vertical-align:middle;
font-size:12px;
}
#sidebar {
width:150px;
height:265px;
z-index:4;
background-color:#999;
display:inline-block;
vertical-align:middle;
font-size:12px;
}
#footer {
width:650px;
height:58px;
z-index:5;
background-color:#F69;
vertical-align:middle;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
-->
</style>
</head>
<body>
<div class="container">
<div id="header">Header</div>
<div id="navbar">Navbar</div>
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<div id="footer">Footer</div></div>
</body>
</html>
You need to put a container around the whole part that you want vertically centered, and you need to know the height. Then you give it an absolute position that is 50% from the top and give it a margin-top of minus half the height.
So if your container is 400px high you would use the following css:
#container {
position: absolute;
top: 50%;
margin-top: -200px;
}
In your case your 'container' is 442px high, so change this css:
DIV.container {
position:relative;
height:100%;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
To this:
DIV.container {
position:absolute;
top:50%;
margin-top:-221px;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
Your stylesheet can be much cleaner/smaller.
See this demo fiddle.
And if you don't want a scroll bar when the browser window becomes small, then add overflow: hidden to the body, see this fiddle. But that's NOT a tip in the light of usability.
And to make it dynamic, use Javascript/jQuery to find the height of the window, and adjust DIV.container's margin-top as shown by Kokos.