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 */
}
Related
I have a div with an absolute positioning which is again a child of absolute positioned element. setting width:100%;left:1px;right:1px to the child not working. Problem i face is, its getting beyond the parent the element.
<div class="outer">
<div class="inner">
</div>
</div>
.outer{
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
}
.inner{
position:absolute;
width:100%;
height:100%;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
Refer here
Just take away the 100% on the child element and the inner div will fit the parent.
.outer{
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
}
.inner{
position:absolute;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
This is because you have the width and height to be 100%, meaning it'll be also 80px PLUS the top left right and bottom properties so the box lays over the other. Now if you want it to go inside the box and be perfectly proportioned remove height and width:
.inner{
position:absolute;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
You can also make this:
.outer{
margin-top: 10px;
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
padding: 1px;
}
.inner{
position:relative;
width:100%;
height:100%;
background:red;
}
UPDATE
EDIT: Sorry guys, I'm afraid that I defined the problem wrong, my bad.. I need this to have a image carousel (YELLOW) break out of the main text division (RED); only on the right side. So what would work as well for me is something like this:
Fiddle: Link
HTML:
<div class="red">
This would contain the main text
</div>
<div class="yellow">
this div's left border should align with the red divs
<br/>
<br/>
this would be the image carousel
</div>
<div class="red">
this would also contain the main text
</div>
CSS:
.red{
position:relative;
height:100px;
width:500px;
margin:0 auto;
background-color:#ff0000;
}
.yellow{
position:relative;
height:200px;
width:100%; /* idk how to solve this */
background-color:#ffff00;
right:0px;
left:100px; /*how to align this left border to the other red divs? */
}
Now the main problem is to align the left border of "yellow" with the left border of the text divs (red).
I hope I'm being clear enough. Thanks for all the help so far :) Sorry for making a mess out of this thread.
ORIGINAL POST
I try to let a child div connect to the righter outermost edge of the page. This div (yellow) is placed within a parent div (red) that fills only the center area of the page. Is this possible somehow?
Here's the HTML:
<div class="red">
<div class="yellow">
this div should extent to outermost right of entire page
</div>
</div>
Here's the CSS:
.red {
position:relative;
height:500px;
width:500px;
margin:0 auto;
background-color:#ff0000;
}
.yellow {
position:absolute;
height:200px;
width:100%; /* idk how to solve this */
background-color:#ffff00;
top:100px;
right:0px; /* this applies to div.red but should apply to the entire page somehow */
}
Here's the fiddle:
fiddle
Kind regards,
Steven
EDIT: here's the photoshopped result:link
Use below css. let me know is it the one you are looking.
.red{
position:relative;
height:500px;
width:500px;
margin:0 auto;
background-color:#ff0000;
}
.yellow{
position:absolute;
height:200px;
width:400px; /* idk how to solve this */
background-color:#ffff00;
top:100px;
right:0px;
left:0px;
/* this applies to div.red but should apply to the entire page somehow */
margin:auto;
}
Do you need this?
.red {
height: 500px;
width: 500px;
margin: 0 auto;
background-color: #ff0000;
}
.yellow {
position: absolute;
height: 200px;
background-color: #ffff00;
top: 100px;
left: auto;
right: 0px;
}
UPD: I'm not sure that you can find only-CSS solution. So, you can add some jQuery or pure JS.
I am facing problem while centering a div of fixed width & height and placing two divs side by side inside it. What i want to achieve, at later point of time, is the slide to left effect on the second div (on top of first div) based on some event. Below is what i tried:
HTML:
<div id="center">
<div id="firstel"></div>
<div id="secondel"></div>
</div>
CSS:
#center{
position:absolute;
border:1px solid black;
width:200px;
height:100px;
overflow:hidden;
top:50%;
left:50%;
}
#firstel{
background-color:red;
}
#secondel{
background-color:blue;
}
#firstel,#secondel{
position:relative;
width:200px;
height:100px;
display:inline-block;
float:left;
}
JSFIDDLE: link
Any help is appreciated!
#center{
position:absolute;
border:1px solid black;
width:100%; //change this
overflow:hidden;
top:50%;
left:50%;
}
Demo here
#center and #firstel,#secondel ID's were of same width(200px), If you need to show side by side eitherof the ids values have to be changed
You can try like this: Demo
#firstel,#secondel{
width:50%; /* changed value in % or you can use 100px too as per your need */
height:100px;
display:inline-block;
float:left;
}
if u want the two divs side by side
change the widths of the divs
change the divs width that shoild be less than the parent div width
#firstel,#secondel{
position:relative;
width:100px;
height:100px;
display:inline-block;
float:left;
}
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;
}
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.