I want my navigation text to be displayed at the bottom right of the header div but no matter what I try it only wants to align at the bottom of the page or some other position I do not want. I don't understand why this is happening, absolute should refer to the header div, correct?
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial;
scroll: overflow;
}
.header {
margin: auto;
width: 100%;
display: flex;
background: gray;
height: 60px;
}
.header-navigation {
position: absolute;
bottom: 0px;
right: 0px;
}
.container {
margin: auto;
width: 100%;
display: flex;
height: calc(100vh - 60px);
}
.left {
background: #e8edf0;
flex-basis: 45%;
}
.right {
background: grey;
flex-basis: 55%;
}
.content {
margin: 20px;
padding: 20px;
background: white;
}
</style>
</head>
<body>
<div class="header">
<div class="header-navigation">
test
</div>
</div>
<div class="container">
<div class="left">
<div class="content">
</div>
</div>
<div class="right">
<div class="content">
</div>
</div>
</div>
</body>
</html>
You should add position: relative; to header. This will make the .header-navigation consider position from .header when you make it absolute.
.header {
position: relative;
}
.header-navigation {
position: absolute;
}
Now .header-navigation will use position according to .header
absolute should refer to the header div, correct?
Only if header div itself has a position.
When you set the position of one of its children to absolute as you have in this case, the system hunts back up the page to find the first ancestor element that has a position and then it positions the element you are trying to position relative to that.
Related
<div class="container-full-bg" style="background-image:url('background.jpg');">
<div class="container special">
<div class="jumbotron">
<div class="row push-to-bottom">
<div class="col-md-6">
</div>
<div class="col-md-6">
<p style="color:#fff;"><span style="color:red;font-size:100px;"> 1</span>/10</p>
</div>
</div>
</div>
</div>
<img src="xxx"/>
So I have the above code and it works, but the only thing is that i'd like to position the row/col-md-6's at the bottom of the container. I tried applying position:absolute; and bottom:0; to the row, but that'll just position it to the bottom of the page and put "1/10" left. I'd like it to stay inside the container, and I can't find the fix!
What am I missing?
Edit: I also tried giving the parent div an absolute position and then apply absolute en bottom:0; to the row, but that still won't work
You should give position: relative to the .container or the .jumbotron element. This way you can set position: absolute; and bottom: 0; to the .push-to-bottom div.
EDIT:
Based on your comment you could do it like this:
html,
body {
height: 100%;
width: 100%;
}
.jumbotron {
background-color: inherit;
}
.container-full-bg {
width: 100%;
height: 40%;
max-width: 100%;
background-position: center;
background-size: cover;
}
.container-full-bg .container,
.container-full-bg .container .jumbotron {
height: 100%;
width: 100%;
}
.jumbotron {
position: relative
}
.jumbotron p {
font-size: 60px;
font-weight: 500;
}
.push-to-bottom {
position: absolute;
width: 100%;
height: 100%;
}
Here's a JSFiddle: http://jsfiddle.net/thepio/Lnacr8kn/
I have changed the footer's background color to yellow but the code just is not working.
I have been working on this for past 2 hours. Please don't bash me out!
Just help. Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
#footerMain{
min-width: 1000px;
background-color: yellow;
}
.footerLeft{
position: absolute;
height: 20px;
width: 80px;
}
.footerRight{
position: absolute;
margin-left: 800px;
height: 20px;
width: 80px;
}
</style>
</head>
<body>
<footer id="footerMain">
<div class="footerLeft">
<h1>Hello</h1>
</div>
<div class="footerRight">
<h1>Bye</h1>
</div>
</footer>
</body>
try this , HTML
<footer id="footerMain" class="clearfix">
<div class="footerLeft">
<h1>Hello</h1>
</div>
<div class="footerRight">
<h1>Bye</h1>
</div>
</footer>
CSS:
.clearix{
zoom:1;
}
.clearfix:after, .clearfix:before{
line-height: 0;
content: '';
display: table;
}
.clearfix:after{
clear:both;
}
#footerMain{
background-color:yellow;
}
div.footerLeft{
width:50%;
float:left;
}
div.footerRight{
width:50%;
float:right;
}
Because you are using position absolute; so basically #footerMain has no height, but still, you better not use position absoute, more robust way would be floating property
#footerMain{
min-width: 1000px;
background: yellow;
height: 100px; /* add height & add more height, because h1 has margin */
}
.footerLeft{
float: left; /*remove position: absolute;*/
height: 20px;
width: 80px;
}
.footerRight{
float: right; /*remove position: absolute;*/
height: 20px;
width: 80px;
}
<footer id="footerMain">
<div class="footerLeft">
<h1>Hello</h1>
</div>
<div class="footerRight">
<h1>Bye</h1>
</div>
</footer>
Your #footerMain element contains only absolute-positioned elements. Therefore, it is considered empty as far as layout goes. Consequently, its height is zero, making it invisible.
Add some height to it - probably 20px to match the height of the elements.
Add a height rule to footerMain like 40px
I'm having many issues regarding the positioning of div boxes in HTML and CSS. I have got a wrapper and 2 boxes. I want one box on the left and the other on the right, however the box on the right appears under the others. Why is this? I don't want to use "top" as it messes with a few other things. What do I do?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="wrapper">
<div id="navbar"></div>
<div id="newsbar"></div>
</div>
</body>
</html>
#wrapper
{
position: relative;
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
}
FIXED:
#wrapper
{
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
float: left;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
float: right;
height: 100%;
width: 15%;
background-color: #A13927;
}
The default display for a div is: "display: block".
Blocks don't obey "width" style and span as 100%. The following elements are put below the block-displayed div.
Try adding the style to your divs as "display: inline-block" (i.e. to those divs you want to see consecutive).
EDIT: did not fully understand the question fully. BESIDES doing what i told, you can put "float: left" and "float: right" to those divs if you want them to stick to the left and right respectively.
add Float:left and float:right:
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
float:left;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
float:right;
}
The answer to your question is because the elements are position relative to each other.
You have multiple "solutions":
1) float your elements. See JSFiddle
E.g.
#newsbar
{
float: right;
width: 15%;
background-color: #A13927;
}
2) Change your positioning to be fixed, but likely you want absolute. See JSFiddle
E.g.
#newsbar
{
position: absolute;
right:0;
width: 15%;
background-color: #A13927;
}
3) Other options as well (display: table-cell, et cetera)
You have a ton of solutions for this one. Here are three ways of doing it, each method will produce slightly different results. jsFiddle
HTML:
<div class="method-1">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-2">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-3">
<div class="left">
</div>
<div class="right">
</div>
</div>
CSS:
div div {
height: 10em;
width: 15%;
border: 1px solid red;
}
div.method-1 div {
display: inline-block;
}
div.method-2 {
height: 10em;
}
div.method-2 div {
position: absolute;
display: block;
}
div.method-2 div.right {
left: 15%;
margin-left: 1em;
}
div.method-3 {
display: table;
width: 30%;
}
div.method-3 div {
display: table-cell;
}
I've got a question regarding positioning of two objects: image and div. I want bg2.png image to stay under div. I keep encountering problem with image pushing div down by img's height. How do I avoid that?
I tried pushing down image with "top:" value but of course it leaves me with empty area above div. Also I tried adding negative "top:" value and relative position to "maincontent" div but again it left me with empty area, only difference was that this time it was under the div.
HTML:
<body>
<img src="./images/bg2.png" class="bgimg" />
<div id="maincontent">
</div>
</body>
CSS:
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
Thanks in advance.
edit - what I'm trying to achieve:
Click me!
2 solutions:
Change your HTML structure:
<body>
<div id="maincontent">
</div>
<img src="./images/bg2.png" class="bgimg" alt="some">
</body>
or make it as the background-image:
<body>
<div id="maincontent">
</div>
</body>
#maincontent {
background: url(./images/bg2.png) no-repeat 0 100%;
padding-bottom: height_of_image_in_px;
}
<style>
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
</style>
<body>
<div id="maincontent">
<img src="./images/bg2.png" class="bgimg" alt="some info about image here">
</div>
</body>
if you want that image inside the div use this code. or if you want make that image background of that div use css background property
I want to have an image centered within each DIV that is floating left within a larger DIV.
In the following example, I want the gray boxes ("assetInfoBody") to be centered within the green boxes ("assetBox"). What else can I try here beside text-align:center and margin:auto?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#assets {
background-color: orange;
padding: 5px;
width: 100%;
height: 100%;
}
.assetbox {
background-color: lightgreen;
float: left;
width: 100px;
margin-right: 5px;
text-align: center;
}
.assetInfoBody {
background-color: grey;
position: relative;
width: 80px;
text-align: center;
}
.centeredItem {
margin-left: auto;
margin-right: auto;
top: 0px;
}
</style>
</head>
<body>
<div id="assets">
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
</div>
</body>
</html>
See this example for a reference to how you could achieve this. As your class .assetInfoBody class has a set width you can align the .centeredItem by applying the rule margin:0 auto to it. By also applying text-align:center to .centeredItem you're able to always keep the image centered within it.
probably you want a css like that:
#assets {
background-color: orange;
padding: 5px;
width: 100%;
}
.assetbox {
background-color: lightgreen;
display: inline-block;
width: 100px;
margin-right: 5px;
}
.assetInfoBody {
background-color: grey;
margin: 0 auto !important;
width: 80px;
}
.centeredItem {
margin-left: auto;
margin-right: auto;
}