I am a novice in web developing. My container div is set to margin: 0 auto; position: relative; and it is displayed in the middle of the screen. I have a banner div within the container which has some background color which I want to extend the whole width of the screen. I decided to use another div outside the containerdiv with same background color and height of my banner div and named it header. But how can I put them one over another, more precisely, the container div over the header div?
EDIT:
Some of the html:
<body>
<div id="header"></div>
<div id="container">
<div id="banner">
<img src="images/banner.gif" width="450" height="80" alt="parul library" />
</div>
</div>
</body>
The CSS:
#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#header {
position:absolute;
top:0;
height: 80px;
background: rgb(222,239,255); /* Old browsers */
}
Try using this CSS for the header div:
.header {
background: #bada55;
height: 90px;
width: 100%;
position: absolute;
}
And make sure container has position: relative; in its style definition.
Here's a working demo:
http://jsfiddle.net/rkJMJ/
Update for the HTML and CSS posted in the question:
(Added width: 100; to the #header style def)
#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#header {
position:absolute;
top:0;
height: 80px;
width: 100%;
background: rgb(222,239,255); /* Old browsers */
}
Related
I have two divs that I am trying to stack over each other but the one I want on top is not showing. I want the blue background div to lay on top of the red background div. Any advice? The reason why I want to overlay the blue div is because the container is a centered grid and I want the red div to be the background for the first half of the page.
JSFIDDLE
CSS
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
overflow:hidden;
position:relative;
padding: 0 10px;}
You have made the second div absolute so you don't need to give the negative value for top. The second div is hiding because you top -629px; Try making the top:0 and see. And also for your current code. Remove the overflow hidden and put z-index like this:
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
z-index:9;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
width:200px;
height:200px;
position:relative;
padding: 0 10px;
}
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: absolute;
background: red;
}
.buddy-content {
position: absolute;
z-index: 10;
background: blue;
}
<div class="buddy BlueGradient">
</div>
<div class="container">
<div class="buddy-content">
ROGER
</div>
</div>
https://jsfiddle.net/kt77cp3e/6/
just add z-index : higher to the div that you want to show on top and set z-index low to the other one ..
ant one thing your code is working good just you need to remove " top : -629px;"
that thing is not allowing blue div to be on top just it is showing at the -629 px position..!!!!
If you can update your code like this, it may solve the issue:
Demo:https://jsfiddle.net/kt77cp3e/7/
CSS:
html, body {
height:100%;
width:100%:
}
.container {
width:50%;
height:100%;
background:red;
position:relative;
}
.container>div {
position:relative;
left:0;
right:0;
}
.container>div:first-child {
top:0;
height:50%;
background:blue
}
.container>div:last-child {
bottom:0;
height:50%;
background:green
}
HTML:
<div class="container">
<div></div>
<div></div>
</div>
Update: Considering the latest updated code, I think you should remove overflow:hidden from the container styles. That should do the trick
You should set the dimension on the .container div.
CSS:
.container {
position:relative;
width:100px; //You may modify these values
height:100px
}
Demo: https://jsfiddle.net/kt77cp3e/1/
.buddy { width: 50%; height: 629px; display: inline-block; position: relative; background: red;}
.buddy-content { position: absolute; top: 0px; z-index: 10; background: blue; }
.container {max-width: 1000px; margin: 0 auto; overflow:hidden; position:relative; padding: 0 10px; position: relative;}
<div class="container">
<div class="buddy BlueGradient">
<div class="buddy-content">ROGER</div>
</div>
</div>
This brings the text "Roger" with blue background on top of the red background
My HTML structure is basically this -
<div id="header">
<div class="container">
</div>
</div>
<div id="content">
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
Ignore any elements except <div id="header">
I want to align <div class="container"> inside <div id="header"> at exactly bottom center. I'm using the following CSS code-
#header{ width:1062px; height:326px; background-color:#110000; text-align:center; position:relative; }
#header .container{ width:940px; height:262px; background-color:#220000; margin:0px auto; position:absolute; bottom:0px; }
There are height differences between the parent (#header) and child (#header .container) DIVs. Removing position:absolute; from the child centers it but it sticks to the parent's top instead of bottom. Keeping position:absolute; sticks it at the bottom but aligns it to the left.
How do I align it both center AND bottom at the same time?
I tried all the solution above but it didn't work when you resize the browser window. This solution is mostly to be applied when you don't know the element's width. Or if the width is changed on resize.
After making some research I tried the following and it worked perfectly on all screen sizes.
#somelement {
position: absolute;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
I shared this for anyone still facing this issue.
try in this way:
#header .container{
width: 940px;
height: 262px;
background-color: #220000;
position: absolute;
bottom: 0 ;
left: 50%;
margin-left: -470px;
}
try this
#header .container {
width: 940px;
height: 262px;
background-color: #220000;
margin: 0px auto;
position: absolute;
bottom: 0px;
left: 61px;
}
use this:
#header{
width:1062px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:64px;
}
#header .container{
width:940px;
height:262px;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here the jsfiddle
UPDATE:
As DenisVuyka said in comment, i should add that the above sample was as answer to this particular question with fixed height for DIV.
If you want that height of DIV don't break up things then for example you should use padding-top:10%; in the #header and height:100% in #header .container CSS.
#header{
width:462px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:10%;
}
#header .container{
width:300px;
height:100%;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here is a demo: http://jsfiddle.net/d6ct6/ .
I was trying to get this to work in my project as well. I've edited this jsfiddle:
http://jsfiddle.net/d6ct6/
<div id="header">
<div class="container">
</div>
</div>
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#header .container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
left:calc((100% - 300px)/2);
}
But I've found this only works when the width of .container is fixed.
If the width of .container is not fixed you would need javascript to find it's width and then change that width in the calc.
When the widths are responsive, use this:
HTML
<div id="header">
<div id="container">
</div>
</div>
CSS
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
}
JS
$(document).ready(function () {
var parentWidth = $('#header').width();
var trapWidth = $('#container').width();
var deadCenter = (parentWidth - trapWidth);
var deadHalf = Number( deadCenter / 2 );
$('#container').css("right", deadHalf);
});
In case you care more about having the inside div aligned in the center and can manually set the vertical alignment.
DEMO Height I used was first div height - second div height.
#header .container{ width:940px; height:262px; background-color:red; margin:0 auto; position:relative; top: 64px; }
I would take advantage of CSS table display properties and do the following:
#header {
width:1062px;
height:326px;
background-color:#110000;
text-align:center;
display: table-cell;
vertical-align: bottom;
}
#header .container {
width:900px;
height:262px;
background-color:#cccccc;
color: white;
display: inline-block;
}
Set the #header block to display: table-cell and set vertical-align: bottom to align the child's bottom edge to the bottom edge of the parent.
The child .container element had display: inline-block and this will allow it to respond the text-align: center property of the parent.
This will work regardless of the width of the child .container.
Demo fiddle: http://jsfiddle.net/audetwebdesign/p9CxE/
This same problem was bedevilling me for an hour or so, until I realised I could add an intermediary div; this separated the vertical alignment issue from the centering.
.dparent {
border: 1px solid red;
width: 300px;
height: 300px;
position: absolute;
}
.dchild {
border: 1px solid blue;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 100px;
bottom: 0px;
position: relative;
}
.dmid {
border: 1px solid green;
width: 100%;
position: absolute;
bottom: 0;
<div class="dparent">
<div class="dmid">
<div class="dchild"></div>
</div>
</div>
Do the vertical alignment first, with an absolute position and the 0 bottom. Then do the centering with margin-left and margin-right set to auto.
You might try this solution for any concerned width:
width:100%;
position:absolute;
bottom: 5px;
left:50%;
margin-left:-50%;
Good luck!
everyone I try the css style as below:
.image{
position: absolute;
width: 100px;
height:100px;
padding: 5px;
margin: 0;
background-color:green;
}
<div class="image">
<img src="http://www.wallpapersgo.com/wp-content/uploads/2010/02/Dodge-Charger-Car.jpg"/>
</div>
The problem is, the showing image is same size as it is, but not in a expected size as 100px * 100px.
fresh in css style, need help , thx!
Use:
.image{
position: absolute;
width: 100px;
height:100px;
padding: 5px;
margin: 0;
background-color:green;
}
.image img {
width: inherit;
height:inherit;
}
Just add
.image img{
height: 100%;
width: 100%;
}
http://jsfiddle.net/p67dh/
This is because your image don't use automatically the size of the parent element.
I'm trying to have a clickable image centered in a footer area. I've tested on Chrome and Firefox and the entire footer is clickable. Chrome inspector shows the element as 0 pixels tall and 0 pixels wide. What am I doing wrong?
PS: I'm using Twitter Bootstrap
Here's the CSS:
body {
margin:0;
padding-top: 0px;
margin-bottom: 20px;
}
#footerLogo {
display:block;
margin-left: auto;
margin-right: auto;
width: 73px;
}
#footer {
position: fixed;
bottom: 0px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
background-color:red;
}
Here's the HTML:
<div id="footer">
<img id="footerLogo" src="/images/footer.gif">
</div>
Add to #footer a text-align: center to mark centering of elements within it, and margin: 0 auto to the #footerLogo and remove the display:block - since the block sets the <a> tag to box and occupies the whole parent container.
http://jsfiddle.net/T4PSS/
<div id="footer">
<img id="footerLogo" src="/images/footer.gif" />
</div>
notice how I closed the img element />
The problem with the whole footer clickable is the display: block , also take out the margins for the img
#footerLogo {
display:block; //this line - take it out
width: 73px;
}
if you want to center it , then center <a>
#footer a {
position: relative;
margin: auto;
width: 74px; //this may be necessary for IE7
}
this is because you are using
margin-left:auto;
margin-right: auto;
without a specified width, apply id="footerLogo" to the <a> instead:
<style>
body {
margin:0;
padding-top: 0px;
margin-bottom: 20px;
}
#footerLogo {
display:block;
margin:0 auto;
width: 200px;
}
#footer {
position: fixed;
bottom: 0px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
background-color:red;
}
</style>
HTML:
<div id="footer">
<a id="footerLogo" href="#"><img src="/images/footer.gif" /></a>
</div>
I'm trying to put two divs without a linebreak between them.
this is the html:
<div id="header">
<div id="logo"></div>
<div id="left">
<div id="slideshow"></div>
</div>
</div>
and this is the CSS:
#header {
background-color: #13768a;
width: 962px;
height: 207px;
margin-right: auto;
margin-left: auto;
clear: both;
}
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
}
#left {
width:712px;
height: 207px;
}
#slideshow {
background-color: #137387;
width: 686px;
height: 144px;
margin-right: auto;
margin-left: auto;
}
the problem is that I want it to look like this:
How I want it to look like
But it looks like this:
How it looks like
This is controlled by the display style property. Normally, div elements use display: block. You can use display: inline or display: inline-block instead if you want them on the same horizontal line.
Example using inline-block (live copy | source):
CSS:
.ib {
display: inline-block;
border: 1px solid #ccc;
}
HTML:
<div class="ib">Div #1</div>
<div class="ib">Div #2</div>
Introduce a float CSS property. Change CSS as below, for #logo and #left.
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
float:right;
}
#left {
width:712px;
height: 207px;
float:left;
}
From the MDN Documentation,
The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it.
Div elements normally use display:block which forces a line break before and after the element.If you want to remove the line breaks , you can use display:inline which will display elements horizontally.Make the div's display property to display:inline or display:inline-block you want to appear horizontally .
Try this way:
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
float:right;}
#left {
position:relative;
width:712px;
height: 207px;
}
#slideshow {
position:absolute;
top:20px;
left:20px;
background-color: #137387;
width: 686px;
height: 144px;
margin-right: auto;
margin-left: auto;
}
Basically I put a float:right; on the logo to position it right, then added position:relative to the #left div and position:absolute to the #slideshow div. This way you can adjust the top and left attributes to position the slideshow anywhere you want it.
display:inline is the css style that you need to use.