I've changed the color of my header, which includes a logo and a title.
In the title, the text box where the words appear are taking the background-color of the background of the body of the website, and not taking the background color of the header.
* {
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
background-color: #C0C0C0;
}
.headerMenu {
background-color: #00b9ED;
height: 40px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
padding-bottom: 10px;
width: 100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
width: 125px;
}
.logo img {
background-color: #00b9ED;
position: absolute;
width: 50px;
height: 38px;
top: 0;
left: 10px;
}
.headerTitle {
background-color: #00b9ED;
position: absolute;
top: 15px;
left: 80PX;
font-family: 'oswald', arial, sans-serif;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<title>FINDPETS</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
</HEAD>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="headerTitle">
<h2>PET FRIENDS</h2>
</div>
<div class="logo">
<img src="./IMG/dog_bone_logo.png" />
</div>
</div>
</div>
</body>
</HTML>
Photo of the resulting error:
the asterisk selector * is called the universal selector . Which means it selects all elements so it will add all those properties ( including background-color ) to the title as well.
You can just remove the background-color property rule from * {} and add it to a new body {} selector. That way the background-color property won't be applied to all your elements but only to body
body {
background-color: #C0C0C0;
}
* {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
padding: 0px;
margin: 0px;
}
.headerMenu {
background-color: #00b9ED;
height: 40px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
padding-bottom: 10px;
width: 100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
width: 125px;
}
.logo img {
background-color: #00b9ED;
position: absolute;
width: 50px;
height: 38px;
top: 0;
left: 10px;
}
.headerTitle {
background-color: #00b9ED;
position: absolute;
top: 15px;
left: 80PX;
font-family: 'oswald', arial, sans-serif;
}
<div class="headerMenu">
<div id="wrapper">
<div class="headerTitle">
<h2>PET FRIENDS</h2>
</div>
<div class="logo">
<img src="./IMG/dog_bone_logo.png" />
</div>
</div>
</div>
Related
In the code below, why 'overflow-y' is not working in class 'dialogo'?
I tried somehow and I could not.
Responsive CSS seems confusing many times.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,body,div,menu,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
overflow-x: hidden;
}
</style>
<style>
html {
background: #E2CE99;
}
.container {
position: relative;
width: 70%;
background-color: red;
font-family: helvetica, sans-serif;
border: 2px solid black;
float: left;
left: 2%;
padding-left: 2px;
}
.containerd {
position: relative;
width: 70%;
background-color: white;
font-family: helvetica, sans-serif;
border: 2px solid black;
float: right;
right: 2%;
padding-left: 2px;
}
.content {
position: relative;
padding-top: 10px;
}
.content p {
}
#header {
z-index: 2;
position: fixed;
width: 100%;
height: 60px;
line-height: 60px;
background: #CC1111;
color: white;
}
#header h1 {
position: absolute;
top: 0;
left: 0;
text-transform: uppercase;
}
.dialogo{
resize: vertical;
width: 100%;
top: 1%;
position: relative;
font-size: 15px;
overflow-y: scroll;
background-color: white;
word-wrap:break-word;
text-align: left;
border:1px solid black;
height: 50%;
}
</style>
</head>
<header id="header">
<center>Jhon</center>
</header>
<div style="padding-top: 70px;"></div>
<div class = dialogo disabled id="texConv" name="texConv">
<div class="content">
<div class="container">
<p>HELLO</p>
</div>
</div>
<div class="content">
<div class="containerd">
<p>HELLO</p>
</div>
</div>
</div>
<br>
<div class="content">  2017</div>
</html>
So I would like to know how to put a height in percentages for a div containing as boxes and turn on the scroll-Y.
For overflow-y to work, the height of the content in the element needs to exceed the specified height. I changed the height to 5em and you can see it's working.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body,
div,
menu,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
overflow-x: hidden;
}
</style>
<style>
html {
background: #E2CE99;
}
.container {
position: relative;
width: 70%;
background-color: red;
font-family: helvetica, sans-serif;
border: 2px solid black;
float: left;
left: 2%;
padding-left: 2px;
}
.containerd {
position: relative;
width: 70%;
background-color: white;
font-family: helvetica, sans-serif;
border: 2px solid black;
float: right;
right: 2%;
padding-left: 2px;
}
.content {
position: relative;
padding-top: 10px;
}
.content p {}
#header {
z-index: 2;
position: fixed;
width: 100%;
height: 60px;
line-height: 60px;
background: #CC1111;
color: white;
}
#header h1 {
position: absolute;
top: 0;
left: 0;
text-transform: uppercase;
}
.dialogo {
resize: vertical;
width: 100%;
top: 1%;
position: relative;
font-size: 15px;
overflow-y: scroll;
background-color: white;
word-wrap: break-word;
text-align: left;
border: 1px solid black;
height: 5em;
}
</style>
</head>
<header id="header">
<center>Jhon</center>
</header>
<div style="padding-top: 70px;"></div>
<div class="dialogo" disabled id="texConv" name="texConv">
<div class="content">
<div class="container">
<p>HELLO</p>
</div>
</div>
<div class="content">
<div class="containerd">
<p>HELLO</p>
</div>
</div>
</div>
<br>
<div class="content">  2017</div>
</html>
My questions:
1.Logo: I'm trying to put my logo in top left side of my navigation but I can't. Any ideas (NOT UP TO CHANGE CODE A LOT)?
2.Screen resolution: Well I've noticed that my website isn't same on my PC and Laptop (ofc...). Is it possible to some how fix that. On this pictures you can also see how my website looks with my fonts. So you can see better that problem with Logo.
body {
background-color: white;
margin: 0;
padding: 0;
width: 100%;
height: auto;
min-width: 1000px;
}
#font-face {
font-family: "Jocker";
src: url("JockeyOne-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Pacifica";
src: url("PacificaCondensed-Regular.ttf") format
("truetype");
}
#font-face {
font-family: "ReklameScript";
src:url("ReklameScript.ttf") format("truetype");
}
h1 {
font-size: 120px;
text-align: left;
font-family: "Jocker";
margin-left: 45;
color: rgb(200,101, 103);
}
h2 {
font-size: 70;
margin-left: 224;
font-family: "Jocker";
color: rgb(200,101, 103);
}
#header {
width: 100%;
height: 50px;
margin: auto;
}
#navigacija {
width: 100%;
margin-left: 0px;
padding: 0px;
height: 50px;
overflow: hidden;
text-align: right;
position: fixed;
background-color: #089DE3;
z-index: 9999;
}
#navigacija a {
color: white;
text-decoration: none;
line-height: 50px;
font-size: 30px;
font-family: "Pacifica";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 0px;
}
#navigacija a:hover {
background: #00C5CD;
}
.main1 {
margin-top: 50px;
font-family: "ReklameScript";
font-size: 50;
background: #089DE3;
text-align: left;
margin-left: 194;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
bottom: 930;
right: 0px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper {
width: 640px;
float: right;
margin-left:auto;
margin-right:auto;
max-width: 100%;
}
<!DOCYPE html>
<html>
<head>
<title>MaxSkins-Home</title>
<link rel="stylesheet" href="Home.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="navigacija">
<div class="Home"><b>HOME</b></div>
<b>SHOP</b>
<b>GET POINTS</b>
<b>INFO</b>
</div>
</div>
<h1><b>EARN POINTS,<br> GET SKINS!</b></h1>
<h2><b>How does it work?</b></h2>
<div class="main1">
<p><b>It's simple!<br> Watch videos, do tasks and have fun!
<br>After earning large amount of coins,<br> contact us to get your skins!
<b></p>
</div>
<div class="video-wrapper">
<div class="video-container">
<iframe width="640" height="360"
src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="5"
allowfullscreen></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
</body>
</html>
1680x1050 1366x768
You may try something like this. As I've seen in the site you linked, the logo is formatted text. I inserted text with left float. See if that works for you.
body {
background-color: white;
margin: 0;
padding: 0;
width: 100%;
height: auto;
min-width: 1000px;
}
#font-face {
font-family: "Jocker";
src: url("JockeyOne-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Pacifica";
src: url("PacificaCondensed-Regular.ttf") format
("truetype");
}
#font-face {
font-family: "ReklameScript";
src:url("ReklameScript.ttf") format("truetype");
}
h1 {
font-size: 120px;
text-align: left;
font-family: "Jocker";
margin-left: 45;
color: rgb(200,101, 103);
}
h2 {
font-size: 70;
margin-left: 224;
font-family: "Jocker";
color: rgb(200,101, 103);
}
#header {
width: 100%;
height: 50px;
margin: auto;
}
#navigacija {
width: 100%;
margin-left: 0px;
padding: 0px;
height: 50px;
overflow: hidden;
text-align: right;
position: fixed;
background-color: #089DE3;
z-index: 9999;
}
#navigacija a {
color: white;
text-decoration: none;
line-height: 50px;
font-size: 30px;
font-family: "Pacifica";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 0px;
}
a#logo {
float: left;
}
#navigacija a:hover {
background: #00C5CD;
}
.main1 {
margin-top: 50px;
font-family: "ReklameScript";
font-size: 50;
background: #089DE3;
text-align: left;
margin-left: 194;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
bottom: 930;
right: 0px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper {
width: 640px;
float: right;
margin-left:auto;
margin-right:auto;
max-width: 100%;
}
<!DOCYPE html>
<html>
<head>
<title>MaxSkins-Home</title>
<link rel="stylesheet" href="Home.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="navigacija">
LOGO
<div class="Home"><b>HOME</b></div>
<b>SHOP</b>
<b>GET POINTS</b>
<b>INFO</b>
</div>
</div>
<h1><b>EARN POINTS,<br> GET SKINS!</b></h1>
<h2><b>How does it work?</b></h2>
<div class="main1">
<p><b>It's simple!<br> Watch videos, do tasks and have fun!
<br>After earning large amount of coins,<br> contact us to get your skins!
<b></p>
</div>
<div class="video-wrapper">
<div class="video-container">
<iframe width="640" height="360"
src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="5"
allowfullscreen></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
</body>
</html>
I'm using the foundation framework to create a website, I am having a little trouble aligning a div class container to the bottom of the parents container.
Here is a photo of the problem.
Notice the first image, everything is aligned properly. The second image on the other hand the <div> content is way off. I have it set to bottom:0; in the css but it's not working.
Here is the CSS:
.container-home {
max-width: 1175px;
background: #fff;
margin: 0 auto;
padding: 20px 0px 0 0px;
position: relative;
z-index: 1;
}
.first-title-music {
background: url('http://cdn.ratedrnb.com/2016/06/large-title.png');
width: 100%;
max-width: 425px;
height: 160px;
position: absolute;
bottom: 0;
padding: 5% 0 0 3%;
clear: bottom;
}
.artist-title {
color: #fff;
font-family: poppins;
font-weight: 700;
text-transform: uppercase;
font-size: 36px;
line-height: 22px;
}
.song-title {
color: #fff;
font-family: poppins;
font-weight: 300;
text-transform: uppercase;
font-size: 24px;
}
.big-play {
position: absolute;
top: 150px;
left: 170px;
}
.second-title-music {
background: url('http://cdn.ratedrnb.com/2016/06/small-title.png');
width: 100%;
max-width: 190px;
height: 70px;
position: absolute;
bottom: 0;
padding: 0;
}
.artist-title-small {
color: #fff;
font-family: poppins;
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
line-height: 20px;
}
.song-title-small {
color: #fff;
font-family: poppins;
font-weight: 300;
text-transform: uppercase;
font-size: 14px;
}
.big-play {
position: absolute;
top: 150px;
left: 170px;
}
and here is the html:
<div class="row container-home">
<div class="row column" style="position:relative; padding:15px 0 0 2%;">
<div class="medium-6 column" style="max-width:425px; margin:0px; padding:0;">
<img src="http://cdn.ratedrnb.com/2016/06/mario2.png">
<div class="medium-4 column first-title-music">
<h1 class="artist-title">MARIO</h1>
<h1 class="song-title">I NEED MORE</h1>
</div>
<div class="large-12 column big-play">
<img src="http://cdn.ratedrnb.com/2016/06/big-play2.png">
</div>
</div>
<div class="medium-6 column" style="max-width:190px;max-height:190px; margin:0px; padding:0px; float:left;">
<img src="http://cdn.ratedrnb.com/2016/06/alicia2.png">
<div class="medium-4 column second-title-music">
<h1 class="artist-title-small">ALICIA KEYS</h1>
<h1 class="song-title-small">IN COMMON</h1>
</div>
</div>
</div>
</div>
Here is what I am trying to accomplish.
Does anyone have a solution as to why the bottom aligned <div> in the second part of the html code is stretching that far beyond the height of the parent div.
Instead of trying to "dock" a panel to the bottom using absolute position which could kill your app's ability to be mobile responsive, why not structure your html to better support what you're trying to accomplish. You'll end up with simpler css that way too.
For example, you seem to be attempting to accomplish this:
.darkgray { background: #999;}
.parent-panel {width: 600px; margin: auto; }
.left-panel {float: left; width: 200px; height: 200px; margin: 10px;}
.right-panel {float: left; width: calc(100% - 220px);}
.right-child {float: left; width: calc(33.33% - 20px); height: 90px; margin: 10px;}
<div class="parent-panel">
<div class="left-panel darkgray"></div>
<div class="right-panel">
<div class="right-child darkgray"></div>
<div class="right-child darkgray"></div>
<div class="right-child darkgray"></div>
<div class="right-child darkgray"></div>
<div class="right-child darkgray"></div>
<div class="right-child darkgray"></div>
<div>
</div>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
<style>
</style>
</head>
<body>
<div class="row container-home">
<div class="row column newclass">
<div class="medium-6 column bottomdiv" style="">
<img src="http://cdn.ratedrnb.com/2016/06/mario2.png" class="img1">
<div class="medium-4 column first-title-music">
<h1 class="artist-title" style="">MARIO</h1>
<h1 class="song-title">I NEED MORE</h1>
</div>
<div class="large-12 column big-play">
<img src="http://cdn.ratedrnb.com/2016/06/big-play2.png">
</div>
</div>
<div class="medium-6 column newclass2" style="">
<img src="http://cdn.ratedrnb.com/2016/06/alicia2.png">
<div class="medium-4 column second-title-music">
<h1 class="artist-title-small">ALICIA KEYS</h1>
<h1 class="song-title-small">IN COMMON</h1>
</div>
</div>
</div>
</div>
</body>
</html>
and CSS:
/* Put your css in here */
h1 {
color: red;
}
.container-home {
max-width: 1175px;
background: #fff;
margin: 0 auto;
padding: 20px 0px 0 0px;
position: relative;
z-index: 1;
}
.first-title-music {
background: url('http://cdn.ratedrnb.com/2016/06/large-title.png');
width: 100%;
max-width: 425px;
height: 100px;
position: absolute;
bottom: 0;
/* padding: 5% 0 0 3%; */
clear: bottom;
top: 331px;
}
.artist-title {
color: #fff;
font-family: poppins;
font-weight: 700;
text-transform: uppercase;
font-size: 36px;
line-height: 22px;
}
.song-title {
color: #fff;
font-family: poppins;
font-weight: 300;
text-transform: uppercase;
font-size: 24px;
}
.big-play {
position: absolute;
top: 150px;
left: 170px;
}
.second-title-music {
background: url('http://cdn.ratedrnb.com/2016/06/small-title.png');
width: 100%;
max-width: 190px;
height: 70px;
position: absolute;
bottom: 0;
padding: 0;
position: absolute;
bottom: 0;
/* padding: 5% 0 0 3%; */
clear: bottom;
top: 135px;
}
.artist-title-small {
color: #fff;
font-family: poppins;
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
line-height: 20px;
}
.song-title-small {
color: #fff;
font-family: poppins;
font-weight: 300;
text-transform: uppercase;
font-size: 14px;
}
.big-play {
position: absolute;
top: 150px;
left: 170px;
}
.newclass {
position: relative;
padding: 15px 0 0 2%;
width: 100%;
}
.bottomdiv {
margin: 0px;
padding: 0;
float: left;
width: 100%;
max-width: 425px;
}
.artist-title,
.song-title {
margin-left: 60px !important;
}
.newclass2 {
width: 100%;
max-width: 190px;
max-height: 190px;
margin: 0px;
padding: 0px;
float: left;
padding-left: 20px;
}
.artist-title-small,
.song-title-small {
margin-left: 20px !important;
}
.img1 {
height: 425px;
width: 425px;
}
and the link https://plnkr.co/edit/52Ga8dT6wpTRklGDtvMX?p=preview for ref
I have developed a website as part of my assignment. As I am new to html/css I could not figure some problems out of my code. The assignment specifications says that the screen size should be in certain size so that majority browsers can open it and the user should not experience any scroll activties. So I have used div to divide the whole page to fit the size. However, the container(In my code named as 'box') is set to the left side of the brower body and I have to set it centred, but I do not know how to fix it. Can anyone give me some help, please and thank you.
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>habibe Naby</title>
<link rel="stylesheet" href="Websystems.css">
</head>
<body>
<div id="box">
<div id="header">
<img id="image" src="spring.jpeg">
<p id="text">Welcome to My Homepage</p>
</div>
<div id="under">
<div id="upper">
<div id="leftbar">
<div class="list">
<ul>
<li>Home</li>
<li>Past</li>
<li>Future</li>
<li>Comments
</li>
</ul>
</div>
</div>
<div id="rightbar">
<div id="title">Habibe Naby</div>
<p>this is my name and
I<spanclass="special">Danny</span>.Ihave a .. </p>
</div>
</div>
<div id="footer">copyrights©</div>
</div>
My CSS:
body
{
height: 750px;
margin: 2px;
padding: 2px;
width: 1000px;
}
#box
{
width: 1000px;
margin-left: auto;
margin-right: auto;
height:100%;
border:1px solid #8D8D8D;
}
#header
{
height: 150px;
width: 100%;
position: relative;
}
#image
{
height: 150px;
width: 1000px;
}
#text
{
z-index: 100;
position: absolute;
color: darkolivegreen;
font-style: italic;
font-size: 32px;
font-weight: bolder;
left: 300px;
top: 25px;
}
#leftbar
{
float: left;
width: 200px;
height: 560px;
margin: 0px;
padding: 0px;
background-color: azure;
}
.list
{
margin-top: 40px;
margin-left: auto;
text-decoration: underline;
color:blueviolet;
font-size: 20px;
}
.list ul
{
list-style: none;
}
#rightbar
{
float: right;
width: 800px;
height: 560px;
margin: 0px;
padding: 0px;
background: mintcream;
}
#title
{
margin-left: 80px;
margin-top: 30px;
font-size: 28px;
font-weight: normal;
font-style: italic;
color: blueviolet;
}
#footer
{
clear: both;
height: 40px;
text-align: center;
background-color: oliveDrab;
margin 0px;
padding: 0px;
color: white;
}
.special
{
font-size: 20px;
font-weight: bold;
font-family: "New Century Schoolbook", Times, sans-serif;
color: dodgerblue;
}
p, pre
{
padding: 10px 20px;
margin-left: 50px;
margin-right: 50px;
color: darkslateblue;
}
Jsfiddle: http://jsfiddle.net/2gtsK/show/
Removed width from body, Added margin:0 auto to #box
margin:0 auto is same as:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.
body
{
height: 750px;
margin: 2px;
padding: 2px;
}
#box
{
width: 1000px;
margin: 0 auto;
height:100%;
border:1px solid #8D8D8D;
}
You can wrap it by another div and set that div's text-align:center;
I would like to have the div story at the bottom of the picture(mainMedia) but i also want the about div to be on top of the photo.
When i try do it the story div goes to the top because the mainMedia dive is position:absolute but i have to keep it that to keep the about dive on top of it... any ideas?
Could you please help?
Thanks a lot!
HTML
<html>
<head>
<title> Beta</title>
<!-- css links -->
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="gigantic">
<div class="main">
<div class="twitterProfilePicture">
<img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
</div>
<div class="push">
<div class="mainMedia">
<img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg">
<div class="about">
<p><span>Mashable</span></br>3 Hours ago</p>
</div>
</div>
</div>
<div class="Story">
<div class="heading">
</div>
<div class="text">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 0;
background-color: rgb(233,234,237);
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
p
{
margin: 0;
}
.gigantic
{
width: 800px;
height: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
margin-top: 40px;
/*background-color: #fff;*/
}
.main
{
width: 700px;
height: 400px;
/*background-color: #000;*/
margin-right: auto;
margin-left: auto;
padding: 30px;
}
.twitterProfilePicture
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.twitterProfilePicture img
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.mainMedia
{
width: 630px;
height: auto;
/*background-color: #fff;*/
float: right;
border-radius: 4px;
position: relative;
margin-bottom: 10px;
}
.mainMedia img
{
width: 630px;
height: auto;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.about
{
position: absolute;
/*background-color: #000;*/
overflow: hidden;
height: 35px;
position: absolute;
top: 7px;
left: 7px;
font-size: 12px;
color: rgb(94,118,171);
}
.about span
{
color: #385874;
font-size: 16px;
}
.story
{
width: 630px;
height: 300px;
background-color: #fff;
position: absolute;
margin-left: 70px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: static;
bottom: 0;
}
Here's my take on what you're trying to achieve:
I put a fiddle here for you.
What you need to do is stick the story div inside the mainMedia div. You also have your css referencing ".story" when it should have been ".Story".
HTML:
<div class="gigantic">
<div class="main">
<div class="twitterProfilePicture">
<img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
</div>
<div class="push">
<div class="mainMedia">
<img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg"/>
<div class="about">
<p><span>Mashable</span></br>3 Hours ago</p>
</div>
<div class="Story">
<div class="heading">Heading</div>
<div class="text">Text Story here</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body
{
margin: 0;
background-color: rgb(233,234,237);
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
p
{
margin: 0;
}
.gigantic
{
width: 800px;
height: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
margin-top: 40px;
/*background-color: #fff;*/
}
.main
{
width: 700px;
height: 400px;
/*background-color: #000;*/
margin-right: auto;
margin-left: auto;
padding: 30px;
}
.twitterProfilePicture
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.twitterProfilePicture img
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.mainMedia
{
width: 630px;
height: auto;
/*background-color: #fff;*/
float: right;
border-radius: 4px;
position: relative;
margin-bottom: 10px;
}
.mainMedia img
{
width: 630px;
height: auto;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.about
{
position: absolute;
/*background-color: #000;*/
overflow: hidden;
height: 35px;
position: absolute;
top: 7px;
left: 7px;
font-size: 12px;
color: rgb(94,118,171);
}
.about span
{
color: #385874;
font-size: 16px;
}
.Story
{
background-color: black;
opacity:0.5;
position: absolute;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
bottom: 3px;
color:white;
width:630px; /*I made this the same as your mainMedia*/
}
I hope that helps.