<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/
Related
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.
I want to achieve an effect like the following
http://imgur.com/B7Lh98x
The image should have a fixed width/height ratio, preferably use percentage instead of rem or em, because they need to lay out in a row and fit exactly inside a container.
And the image should have a line of text below it. Here is what I got so far:
<div class="wrapper">
<div class="image"></div>
<p>hi there</p>
</div>
.wrapper {
width: 20%;
height: 0;
padding-bottom: 8%;
background: lightpink;
position: relative;
}
.image {
width: 100%;
height: 100%;
background-image: url('http://lorempixel.com/g/400/200');
background-size: cover;
}
Your link does not work. However try using 1-100vh. vh is a percentage of the users window, therefore it will scale and be fixed.
My approach would be as follows.
HTML
<div class="wrapper">
<div class="image"><img src="http://lorempixel.com/g/300/400" /></div>
<p>hi there</p>
</div>
CSS
.wrapper {
width: 20%;
padding: 20px;
background: #fff;
}
.image img {
max-width: 100%;
}
p {
font-size: 24px;
text-align: center;
}
JSfiddle
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 have 4 divs containing images, absolute positioned totalling 100% width.
This is due to the user wanting to use the full width of the page in all browsers.
I need to position a div underneath it, also with 100% width, which expands/contracts at the same rate with the browser.
I understand floating isn't an option.
Desired layout:
[img1][img2][img3][img4]
[ content ]
-------100% width-------
HTML
<div id="container">
<div id="image1"><img src="images/1.jpg"></div>
<div id="image2"><img src="images/2.jpg"></div>
<div id="image3"><img src="images/3.jpg"></div>
<div id="image4"><img src="images/4.jpg"></div>
</div>
<div id="content">
</div>
CSS:
#container{
width: 100%;
position: relative;
height: auto;
}
#image1 {
width: 25%;
position: absolute;
right: 50%;
}
#image2 {
width: 25%;
position: absolute;
right: 75%;
#image3 {
width: 25%;
position: absolute;
left: 50%;
}
#image4 {
width: 25%;
position: absolute;
left: 75%;
}
#content {
width: 100%;
height: auto;
}
img {
max-width: 100%;
height: auto;
}
Used to this method
Live Demo ---------------------------- Demo-two
Css
#pic-container{
font-size:0;
}
#pic-container img{
width:25%;
vertical-align:top;
}
HTML
<div class="container">
<div id="pic-container">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
</div>
</div>
<div class="container">
herer is the your content
</div>
Live Demo
If I am not wrong look at your CSS code:
you forget to put closing "}" of your #image2 .
it must look like this now.
#image2 {
width: 25%;
position: absolute;
right: 75%;
}
hope it helps.
I'm having some trouble figuring out how to do this. I want to have a wrapper so my site is centered, but one of the header elements needs to stretch all the way to the right edge of the page, but without expanding the width of the page and adding scrollbars.
See here: http://i49.tinypic.com/6rkaxc.jpg (new poster so can't add image)
The blue outline represents the centered wrapper, and the orange box is the header div that I'm trying to get to fit to the right side of the page. I've got it to work using 100% width but it creates a horizontal page scroll since it's making it the same width as it's parent. I want it to expand for users that have higher resolutions so it always fits snug to the right side. I hope this makes sense.
my code looks something like...
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
CSS:
div#wrapper {
margin: 0 auto;
width: 1020px;
position: relative;
}
div#header {
height: 150px;
position: absolute;
left: 510px;
width: 100%;
}
div#left {
width: 510px;
float: left;
}
div#right {
width: 100%;
float: left;
}
I'm pretty new to this stuff so if you notice any errors here or bad practices please point them out! Thanks for the help! :)
Since you want your content to be fixed width, a strategy would be to have containers for both left and right contents. This allows you to use width: 100% for the header which will extend to the end without scroll bars. You then make the header relative to the right container. Here is a jsfiddle you can play with.
Note I made the widths smaller so it would fit in my jsfiddle window.
HTML:
<body>
<div id="wrapper">
<div id="leftContainer">
<div id="left">
This is left
</div>
</div>
<div id="rightContainer">
<div id="header">
This is a header
</div>
<div id="right">
This is right
</div>
</div>
</div>
</body>
CSS:
div#wrapper {
text-align: center;
width: 100%;
position: relative;
white-space: nowrap;
overflow-x: scroll;
}
div#header {
z-index: 1000;
height: 150px;
position: absolute;
left: 0;
width: 100%;
background: green;
}
div#leftContainer {
float: left;
width: 50%;
height: 500px;
display: inline-block;
}
div#left {
float: right;
width: 260px;
height: 300px;
background-color: purple;
}
div#rightContainer {
position: relative;
float: right;
width: 50%;
height: 500px;
display: inline-block;
}
div#right {
width: 260px;
height: 300px;
background-color: yellow;
}
Try this one. I changed the wrapper width to 80%. Not sure if that's ok. But I works well when expanding the page. Moved the header outside of wrapper and also added background color for clarity.
Note 1: right DIV's margin-top is same size as header DIV's height.
HTML
<div id="outerWrapper">
<div id="header">
Header
</div>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</div>
</div>
CSS
div#wrapper {
margin: 0 auto;
width: 80%;
height: 100%;
position: relative;
background-color: #CCCCCC;
}
div#header {
height: 150px;
float: right;
position: absolute;
left: 50%;
width: 50%;
background-color: yellow;
}
div#left {
width: 50%;
height: 100%;
float: left;
background-color: red;
}
div#right {
width: 50%;
height: 100%;
float: left;
margin-top: 150px;
background-color: blue;
}
Hope this helps.