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
Related
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>
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>
i whant to center my article classes in my aside verticaly. If the size of the browser window is changed or is smaller (like on a mobile phone), the centering should adjust accordingly and the template should be responsive.
By the way: I talk about my three "war-boxes", that you could recognize with the words "Gegner 1", "Gegner 2" "and the gray background around them.. If the screen width is greater than or equal to 1200px, the Articles shall stand side by side, if the resolution is smaller, they should adapt dynamically and are available on a mobile phone resolution among themselves.
How could I do that?
HTML:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Funfighter Alliance</title>
<link rel="stylesheet" href="/include/designs/FFA/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/include/designs/FFA/style.css" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Roboto' rel='stylesheet' type='text/css'>
<script src="/include/designs/FFA/js/modernizr.js"></script>
<script src="/include/designs/FFA/js/respond.min.js"></script>
</head>
<body>
<!--Header mit Navigation-->
<header id="side-header-wrapper">
<section id="side-header">
<!--Logo + Logounterschrift-->
<img alt="Funfighter Alliance - Offizielle Projekt-Homepage" src="/include/designs/FFA/bilder/Logo-FFA.jpg">
<p>Offizielle Projekt-Homepage</p>
<!--Navigation-->
<nav>
<h2 class="hidden">Navigation</h2>
<ul>
<li>Home</li>
<li>News</li>
<li>Teams</li>
<li>Forum</li>
<li>Kontakt</li>
</ul>
</nav>
</section>
</header>
<!--Spacer mit Log-In-->
<section id="spacer">
<h2 class="hidden">Log-In</h2>
<div class="login">{_boxes_VTEC-LOGINH}</div>
</section>
<!--3 Boxen für den War-Content-->
<aside>
<h2 class="hidden">Our Matches</h2>
<!--Topmatch Team 1-->
<article>
<img class="topwar_picleft" alt="Logo 1" src="/include/images/teams/team1.png" />
<p class="bluebox_versus">versus</p>
<img class="topwar_picright" alt="Logo 2" src="/include/images/teams/team1.png" />
<div class="topwar_whitebox">
<p class="whitebox_teamleft">Gegner links</p>
<p class="whitebox_versus">VERSUS</p>
<p class="whitebox_teamright">Gegner links</p>
</div>
</article>
<!--Topmatch Team 2-->
<article>
<img class="topwar_picleft" alt="Logo 1" src="/include/images/teams/team1.png" />
<p class="bluebox_versus">versus</p>
<img class="topwar_picright" alt="Logo 2" src="/include/images/teams/team1.png" />
<div class="topwar_whitebox">
<p class="whitebox_teamleft">Gegner links</p>
<p class="whitebox_versus">VERSUS</p>
<p class="whitebox_teamright">Gegner links</p>
</div>
</article>
<!--Last Matches-->
<article>
<img class="topwar_picleft" alt="Logo 1" src="/include/images/teams/team1.png" />
<p class="bluebox_versus">versus</p>
<img class="topwar_picright" alt="Logo 2" src="/include/images/teams/team1.png" />
<div class="topwar_whitebox">
<p class="whitebox_teamleft">Gegner links</p>
<p class="whitebox_versus">VERSUS</p>
<p class="whitebox_teamright">Gegner links</p>
</div>
</article>
<br class="clear" />
</aside>
<!--Content mit dynamischen Inhalt (je nach Unterseite generiert)-->
<div id="post"> {EXPLODE}</div>
<!--Footer, am Ende der Seite-->
<footer> </footer>
</body>
</html>
CSS:
/*Allgemeine Definitionen*/
body {
background-color: #FFFFFF;
border-top: 5px solid #009CFF;
color: #272934;
font-family: 'Open Sans',sans-serif;
overflow-y: scroll;
position: relative;
}
p {
line-height: 25px;
margin: 5px 0;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.5s ease 0s;
}
strong {
font-weight: bold;
}
img {
height: auto;
max-width: 100%;
}
.hidden {
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
}
.clear {
clear: both;
}
/*Header*/
#side-header {
color: #444444;
font-family: 'Roboto',sans-serif;
margin: 0 auto;
max-width: 1200px;
position: relative;
width: auto;
}
#side-header-wrapper {
background-color: #E8E8E8;
background-image: linear-gradient(to top, #E8E8E8 0%, #FFFFFF 100%);
background-repeat: repeat-x;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
height: 81px;
padding-bottom: 20px;
padding-top: 10px;
}
#side-header p {
font-size: 14px;
margin-left: 107.5px;
}
/*Navigation*/
nav {
bottom: 0;
font-size: 20px;
position: absolute;
right: 0;
}
nav ul li {
display: block;
float: left;
padding: 3px 15px;
}
/*Spacer m. Login*/
#spacer {
color: #444444;
font-family: 'Open Sans',sans-serif;
font-size: 14px;
height: 70px;
position: relative;
}
.login {
max-width: 100%;
overflow: hidden;
}
/*War-Boxes*/
.topwar_bluebox {
background: none repeat scroll 0 0 #009CFF;
float: left;
font-size: 14px;
height: 95px;
margin-right: 45px;
width: 256px;
}
aside {
background: none repeat scroll 0 0 #808080;
margin: 70px auto 45px;
max-width: 1200px;
width: auto;
}
aside article {
width: 256px;
margin-right: 45px;
float: left;
font-size: 14px;
}
.bluebox_versus {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
font-family: 'Open Sans',sans-serif;
height: 22px;
line-height: 25px;
margin: 40px 0 0 12px;
text-align: center;
width: 46px;
}
.topwar_picleft {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
margin-left: 22px;
margin-top: 12px;
width: 72px;
}
.topwar_picright {
background: none repeat scroll 0 0 #FFFFFF;
float: right;
margin-right: 22px;
margin-top: 12px;
width: 72px;
}
.topwar_whitebox {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
font-size: 11px;
font-weight: bold;
margin-right: 45px;
width: 256px;
}
.whitebox_teamleft {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
margin-left: 22px;
max-width: 72px;
}
.whitebox_versus {
background: none repeat scroll 0 0 #EEEEF1;
color: #2099DC;
float: left;
font-family: 'Open Sans',sans-serif;
height: 14px;
line-height: 14px;
margin: 10px 0 0 13px;
text-align: center;
width: 44px;
}
.whitebox_teamright {
background: none repeat scroll 0 0 #FFFFFF;
float: right;
margin-right: 22px;
max-width: 72px;
}
/*Content*/
#post {
clear: both;
font-family: 'Open Sans',sans-serif;
line-height: 25px;
margin: 0 auto;
max-width: 1200px;
position: relative;
width: auto;
}
/*News*/
#news_headline {
border-top: 2px solid #009CFF;
max-width: 1200px;
padding-bottom: 7px;
padding-top: 14px;
}
.news_headline_kate {
background-color: #00A3FF;
float: left;
font-size: 11px;
height: 15px;
line-height: 15px;
max-width: 48px;
text-align: center;
}
.news_headline_title, .news_headline_title_1 {
display: inline-block;
font-weight: 700;
margin-top: -3.5px;
max-width: 250px;
overflow: hidden;
padding-left: 48px;
text-overflow: ellipsis;
white-space: nowrap;
}
.news_headline_title_1 {
max-width: 470px;
}
img.news_headline_writersgraphic {
height: 16px;
margin-top: -3.5px;
max-width: 17px;
position: absolute;
}
.news_headline_username {
font-size: 11px;
margin-left: 18px;
margin-top: -1px;
position: absolute;
}
.news_headline_datum {
color: #858A9F;
font-size: 11px;
margin-left: 171px;
margin-top: -1px;
position: absolute;
white-space: nowrap;
}
#news_content {
font-size: 14px;
margin-top: 12px;
padding-bottom: 12px;
}
#news_footer {
max-width: 1200px;
padding-bottom: 16px;
padding-top: 14px;
position: relative;
}
a.news_headline_comment {
background-color: #272934;
color: #FFFFFF;
float: left;
font-size: 11px;
height: 17px;
line-height: 17px;
max-width: 48px;
position: absolute;
text-align: center;
text-decoration: none;
top: 7px;
}
#news_headline, #news_content {
border-bottom: 1px solid #009CFF;
}
/*Footer*/
footer {
background: none repeat scroll 0 0 #333333;
clear: both;
height: 350px;
position: relative;
width: auto;
}
Link to jsfiddle-example of my code: Click me
A way of vertically center that is also responsive is to use Flexbox even if it is not fully supported by all the browsers yet and it does not work on old browsers (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.