in the below code the top property inside the id "#bad" is does not make any effect, can any one help me. it's made some effect when i used it with
some other codes.
html code :
<html>
<head>
<link rel="stylesheet" type="text/css" href="rise.css">
</head>
<body>
<div id="good">
<div id="vahid">
<div id="one">
<img src="image1.jpg" id="boom"><br><br><br><br><br>
<!--button-->
<img src="button.jpg" id="button"><br><br><br><br>
<!--icons-->
<span class="local">
<img src="img.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</span><br><br><br><br>
<span class="local">
<img src="img4.jpg">
<img src="img5.jpg">
<img src="img6.jpg">
<img src="img7.jpg">
</span>
</div>
</div>
<div id="isnani">
<div id="third">
<p >
<span class="fourth">Dashboard</span>
<span class="fifth"> + New</span>
</p>
<!--<p class="fourth"> </p>
<p id="fort"><input type="text" placeholder="search your project here..." ></p>
<div id="jump"><img src="search.jpg" height="20px" width="10px"></div>-->
<p id="sixth"> Welcome to Flatkit</p>
<p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>
</div>
</div>
</div>
<div id="bad">
</div>
</body>
</html>
css :
#good{
width: 100%;
height: 100%;
}
#bad{
width: 15%;
height: 100%;
background-color: #023b3b;
top:-80%;
}
#vahid{
float: left;
width: 7%;
height: 100%;
background-color: #023b3b;
}
#isnani{
float: left;
width: 93%;
height: 100%;
background-color: bisque;
}
#one {
display:block;
background-color: #023b3b;
/* width:60px;
height: 867px;*/
}
#boom{
margin-top: 30%;
height: 5%;
width: 35%;
float: left;
padding-left: 20px;
}
.local img {
height: 2.5%;
width:30%;
margin :10px 0px 10px 20px;
}
/*isnani starts here*/
#third{ float:left;
width:100%;
height: 15%;
border-color:white;
border-style : solid;
background-color : white;
}
.fourth{
margin-left: 2%;
margin-top: 5%;
font-family: sans-serif;
}
.fifth{
color: #808080;
font-size: 80%;
font-weight: 800;
font-family: arial,sans-serif;
margin-left: 1%;
}
#sixth{
font-family: sans-serif;
font-size:150%;
color:#666666;
margin-top: 4%;
margin-left: 2%;
/*top: -2%;/
/* line-height: 3%; */
}
#seventh{
position: absolute;
top: 11%;
color: #808080;
font-family: sans-serif;
font-size: 80%;
margin-left: 1.8%;
margin-top: 1.5%;
/*line-height: 3%;*/
}
#fort{
float: right;
margin-top: -65px;
margin-right: 80px;
}
#button{
margin-left: 80%;
width: 20%;
hyphens: 20%;
}
in the above code the top property inside the id "#bad" is does not make any effect, can any one help me. it's made some effect when i used it with
some other codes.
For properties top/bottom/left/right to take effect element must be positioned non-statically - have position relative/absolute/fixed.
Apply position to your #bad
Related
I'm new to HTML and CSS and have been following a course on them. One of the objectives was to try to make a rough basic copy of the visuals of any website we'd like in order to practice what we learned - so I picked the Gitlab front page.
Was progressing fine until I reached this 'Get Free Trial' div. My idea was to set the Get Free Trial div inside the outer div and center it. No matter what I do, however, there is always this margin/padding from the top that I can't get rid of and I have no idea why it is there.
#topbar {
height: 68px;
}
#adbar {
background-color: #9B51E0;
height: 60px;
}
#main {
background-color: white;
}
body {
margin: 0;
padding: 0;
}
#logo-div {
height: 68px;
width: 155px;
float: left;
}
#logo {
margin: 10px 20px 10px 20px;
width: 108px;
}
.menu-div {
width: 100px;
height: 68px;
float: left;
}
.menu-text {
text-align: center;
font-size: 90%;
font-weight: bold;
font-family: Arial;
color: #929292;
margin-top: 27px;
}
.menu-text:hover {
color: #9B51E0;
}
#search-div {
width: 530px;
float: left;
height: 68px;
}
#search {
float: right;
width: 13px;
margin-right: 25px;
margin-top: 25px;
}
#trial-div {
width: 140px;
background-color: burlywood;
float: left;
height: 68px;
}
#trial-button {
height: 70%;
width: 90%;
background-color: #FA7035;
color: white;
border-radius: 10%;
}
#trial-text {
text-align: center;
font-weight: bold;
font-size: 90%;
font-family: Arial;
margin-top: 10px;
margin-bottom: 25px;
}
<div id="topbar">
<div id="logo-div">
<img src="logo2.PNG" id="logo">
</div>
<div class="menu-div">
<p class="menu-text">Product</p>
</div>
<div class="menu-div">
<p class="menu-text">Solutions</p>
</div>
<div class="menu-div">
<p class="menu-text">Resources</p>
</div>
<div class="menu-div">
<p class="menu-text">Partners</p>
</div>
<div class="menu-div">
<p class="menu-text">Pricing</p>
</div>
<div class="menu-div">
<p class="menu-text">Support</p>
</div>
<div id="search-div">
<img src="search.png" id="search">
</div>
<div id="trial-div">
<div id="trial-button">
<p id="trial-text">Get free trial</p>
</div>
</div>
</div>
<div id="adbar">
</div>
<div id="main">
</div>
Any ideas and could I ask for an explanation of why this happens? Thank you!
If your final goal is to center the inner div (get free trial) inside outer div:
<div id="trial-div" style="display:flex;justify-content:center;align-items:center;">
#topbar {
height: 68px;
}
#adbar {
background-color: #9B51E0;
height: 60px;
}
#main {
background-color: white;
}
body {
margin: 0;
padding: 0;
}
#logo-div {
height: 68px;
width: 155px;
float: left;
}
#logo {
margin: 10px 20px 10px 20px;
width: 108px;
}
.menu-div {
width: 100px;
height: 68px;
float: left;
}
.menu-text {
text-align: center;
font-size: 90%;
font-weight: bold;
font-family: Arial;
color: #929292;
margin-top: 27px;
}
.menu-text:hover {
color: #9B51E0;
}
#search-div {
width: 530px;
float: left;
height: 68px;
}
#search {
float: right;
width: 13px;
margin-right: 25px;
margin-top: 25px;
}
#trial-div {
width: 140px;
background-color: burlywood;
float: left;
height: 68px;
}
#trial-button {
height: 70%;
width: 90%;
background-color: #FA7035;
color: white;
border-radius: 10%;
}
#trial-text {
text-align: center;
font-weight: bold;
font-size: 90%;
font-family: Arial;
margin-top: 10px;
margin-bottom: 25px;
}
<div id="topbar">
<div id="logo-div">
<img src="logo2.PNG" id="logo">
</div>
<div class="menu-div">
<p class="menu-text">Product</p>
</div>
<div class="menu-div">
<p class="menu-text">Solutions</p>
</div>
<div class="menu-div">
<p class="menu-text">Resources</p>
</div>
<div class="menu-div">
<p class="menu-text">Partners</p>
</div>
<div class="menu-div">
<p class="menu-text">Pricing</p>
</div>
<div class="menu-div">
<p class="menu-text">Support</p>
</div>
<div id="search-div">
<img src="search.png" id="search">
</div>
<div id="trial-div" style="display:flex;justify-content:center;align-items:center;">
<div id="trial-button">
<p id="trial-text">Get free trial</p>
</div>
</div>
</div>
<div id="adbar">
</div>
<div id="main">
</div>
Without being able to see everything, did you reset the styles from the browser? Each browser comes with a built in style sheet that has padding and margins. I recommend loading a reset.css stylesheet BEFORE your actual stylesheet. This will clear all browser styles. Make sure yours is second otherwise the reset will override yours.
Here is the reset styles I use:
https://meyerweb.com/eric/tools/css/reset/
I figured it out, it was the CSS code in my trial-text id. Putting margins there sets a margin in relation to the trial-div div and not the trial-button div. This forces the trial-button div to also apply a margin.
Not sure why exactly this happens and it doesnt apply a margin to the trial-button div though
I am trying to replicate the BBC News site and I have this weird styling problem.
Here is the image.
I always get this gap in between two of my divs.
Here is the code I used. Not sure how I am supposed to go about getting rid of that space. tried setting margin and padding to 0 but that didn't work.
Here is the code:
body{
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#topbar{
height: 40px;
width: 1000px;
margin: 0 auto;
background-color: #FFFFFF;
}
#logo{
float: left;
margin-top: 8px;
margin-right: 8px;
}
.topbarsections{
float:left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image{
float: left;
width: 30px;
margin-top: 7px;
margin-left: 8px;
}
#signin-text{
float: left;
font-weight: bold;
font-size: 90%;
color: #333333;
position: relative;
top: 13px;
padding-right: 80px;
}
.topbar-menu{
float: left;
font-weight: bold;
color: #333333;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow{
height: 13px;
margin-left: 15px;
}
#search-box{
background-color: #E4E4E4;
margin: 8px 0 0 10px;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
width: 140px;
float: left
}
#magnifying-glass{
margin-top: 8px;
height: 26px;
}
.clear{
margin: 0;
padding: 0;
}
#news-bar{
background-color: #BB1919;
width: 100%;
height: 70px;
}
#inner-news-bar{
background-color: #BB1919;
margin: 0 auto;
width: 1200px;
height: 70px;
}
#news-bar h1{
color: white;
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 45px;
}
#menu-bar{
background-color: #A91717;
width: 100%;
height: 35px;
}
#inner-menu-bar{
background-color: #A91717;
width: 1200px;
height: 35px;
margin: 0 auto;
}
.menu-bar-sections{
float: left;
border-right: 1px solid #BB4545;
padding-left: 10px;
padding-right:8px;
position: relative;
top: -5px;
}
.menu-bar-sections a{
float:left;
color: white;
text-decoration: none;
}
.menu-bar-sections a:hover{
text-decoration: underline;
}
#menu-bar-more-section{
border-right: none !important;
}
#down-arrow{
float: left;
height: 13px;
position: relative;
top: 2px;
margin-left: 2px;
}
#page-container{
width: 1200px;
margin: 0 auto;
}
h2{
}
<body>
<div id="topbar">
<img id="logo" src="images/bbclogo.png">
<div id="signin-div" class="topbarsections">
<img src="images/singin.PNG" id="signin-image">
<span id="signin-text">Sign in</span>
</div>
<div class="topbarsections topbar-menu">
News
</div>
<div class="topbarsections topbar-menu">
Sports
</div>
<div class="topbarsections topbar-menu">
Weather
</div>
<div class="topbarsections topbar-menu">
Shop
</div>
<div class="topbarsections topbar-menu">
Earth
</div>
<div class="topbarsections topbar-menu">
Travel
</div>
<div class="topbarsections topbar-menu">
More
<img id="more-arrow"src="images/more-arrow.PNG">
</div>
<div class="topbarsections">
<input id="search-box" type="text" placeholder="Search">
<input type="image" id="magnifying-glass" src="images/glass.PNG">
</div>
</div>
<div class="clear"></div>
<div id="news-bar">
<div id="inner-news-bar">
<h1>NEWS</h1>
</div>
</div>
<div class="clear"></div>
<div id="menu-bar">
<div id="inner-menu-bar">
<p class="menu-bar-sections">Home</p>
<p class="menu-bar-sections">Video</p>
<p class="menu-bar-sections">World</p>
<p class="menu-bar-sections">US & Canada</p>
<p class="menu-bar-sections">UK</p>
<p class="menu-bar-sections">Business</p>
<p class="menu-bar-sections">Tech</p>
<p class="menu-bar-sections">Science</p>
<p class="menu-bar-sections">Stories</p>
<p class="menu-bar-sections">Entertainment & Arts</p>
<p class="menu-bar-sections">Health</p>
<p class="menu-bar-sections" id="menu-bar-more-section">More<img src="images/down-arrow.PNG" id="down-arrow"></p>
</div>
</div>
<div class="clear"></div>
<div id="page-container">
<div id="main-article">
<h2>Technology</h2>
</div>
</div>
</body>
If by "gap" you mean the space above the heading "Technology", #Olivier Krull is right: that's the default margin of the h2 header.
You can simply add this CSS rule to set it to zero:
#main-article > h2:first-child {
margin-top: 0;
}
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 6 years ago.
I know this question has been frequently asked but I can never seem to get it to work. Can you tell me what's wrong?
I have three divs within a #container div, which I want to centre side by side. The #container is 1000px wide (I want to keep it that way). Here is my code:
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#right {
float: right;
}
#left {
float: left;
}
#center {
margin-left: 385px;
margin-right: 385px;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
All help would be gladly appreciated.
You can do that quite simple using flexbox:
#container {
/* margin-top: 500px; */
width: 1000px;
margin: 0 auto;
}
.related-article {
background-color: #D6A400;
display: inline-block;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
}
#container {
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
.box {
margin-right: 10px;
width: 230px;
height: 300px;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div class="flex-container">
<div id="left" class="box">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center" class="box">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right" class="box">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
</div>
A solution using display: flex. Read more about flexbox here
Apply display: flex to the container
Add flex: 1 to all the child's which are to be centered horizontally.
h2 {
margin-top: 500px;
}
#container {
position: absolute;
width: 1000px;
display: flex;
text-align: center;
}
#container div {
flex: 1;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
<h2>Here's what you'll do!</h2>
<div id="container">
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
Remove all the floats and replace them with :
display: inline-block;
Also, as much as i have tried, with that spacing between divs, you wont be able to display them the right way. Make the space between the #left, #center and #right divs less than 50px, or work with percentage(%).
You may use display:table for that..
You can have Parent div with style
display:table
and your 3 child divs as
display:table-cell
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
display: table;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#left,
#right,
#center {
display: table-cell;
}
#center {
margin-left: 385px;
margin-right: 385px;
}
h2 {
display: table-row;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
remove float from and add display: inline-block to all three, then add text-align: center; to the container.
Try this, and add float:left to your right,left and center div and reduce your margin left and right of center div.
#right {
float: left;
}
#left {
float: left;
}
#center {
margin-left: 85px;
margin-right: 85px;
float:left;
}
Instead adding center, left and right. Use ul and set the width of li in percentage. It will improve the code and reduce the css code.
The codepen url is http://codepen.io/SESN/pen/pbbjrb
CSS
#container { width: 100%; }
.ulContainer { margin: 0px auto; list-style: none; width: 80%; }
.ulContainer li { width: 33.33%; float: left; }
HTML
<div id="container">
<h2>Here's what you'll do!</h2>
<ul class="ulContainer">
<li>
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</li>
<li>
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</li>
<li>
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</li>
</ul>
</div>
What in my css is making the big empty space at the bottom of my page under my content. as far as I know none of the content is tall enough to go down that far. its not happening to any of my other pages on the site I'm making.
HTML
<body>
<div id="wrapper">
<div id="header">
<a href="index.html"><div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Notes</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
<h3>Graphic Artist | Web Designer</h3>
View Resume
</div>
</div>
<a name="workJump"></a>
<div id="work">
<div id="label">
<h4>Work</h4>
</div>
<div id="leftColumn">
<div id= "p2article">
<a href="work1.html">
<img src="assets/work1p.jpg" alt="work one" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">Cut Paper Portrait</span>
</div>
</div>
</div>
<div id= "p2article">
<a href="work3.html">
<img src="assets/work3p.jpg" alt="Work 3" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">3D Christmas Eve Scene</span>
</div>
</div>
</div>
<div id= "p2article">
<a href="work5.html">
<img src="assets/work5p.jpg" alt="work 5" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">3D Clock Ad</span>
</div>
</div>
</div>
<div id= "p2article">
<a href="work7.html">
<img src="assets/work7p.jpg" alt="work 7" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">RIT Event Calendar Redesign</span>
</div>
</div>
</div>
</div>
<div id="rightColumn">
<div id= "p2article2">
<a href="work2.html">
<img src="assets/work2p.jpg" alt="work two" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">Charcoal Self-Portrait</span>
</div>
</div>
</div>
<div id= "p2article2">
<a href="work4.html">
<img src="assets/work4p.jpg" alt="Work 4" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">VH1 3D Bumper Animation</span>
</div>
</div>
</div>
<div id= "p2article2">
<a href="work6.html">
<img src="assets/work6p.jpg" alt="work 6" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">Beauty Is</span>
</div>
</div>
</div>
<div id= "p2article2">
<a href="work8.html">
<img src="assets/work8p.jpg" alt="work 8" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">Reporter Site Redesign</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
background: white;
}
/*----------header styles-------------*/
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 100%;
padding-left: 3em;
position: relative;
height: 15%;
box-sizing: border-box;
padding-top: 1em;
}
h1:hover
{
color: #2C3E50;
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 50%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
z-index: 98;
position: relative;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
/*----------hero image styles-------------*/
#hero{
padding-top: 25em;
width: 100%;
height: 30em;
position: relative;
z-index: 0;
}
#heroImage
{
top: 9%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 34em;
top: -15%;
margin-left: 30%;
z-index: 2;
position: relative;
clear: left;
}
h2{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px #000000;
text-align: center;
}
h3{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 30px;
color: #e5e5e5;
opacity: 1.0;
text-shadow: 2px 3px 2px #000000;
text-align: center;
}
a.down{
z-index: 99;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-decoration: none;
color: #181b1e;
background: #45CCCC;
position: relative;
padding: 0.6em 0.2em;
font-size: 1.2em;
-webkit-border-radius: 6px;
width: 30%;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a.down:hover{
text-decoration: underline;
color: white;
}
/*----------work main styles-------------*/
#leftColumn
{
width: 50%;
float: left;
height: 80em;
}
#rightColumn
{
width: 50%;
height: 80em;
float: right;
}
#label{
width: 100%;
height: 2em;
top: 10em;
}
#work{
width: 100%;
height: 10em;
position: relative;
top: -11em;
}
h4{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 40px;
color: #45CCCC;
opacity: 1.0;
text-align: center;
}
#p2article2
{
width: 70%;
height:20em;
float: center;
display: block;
margin-left: auto;
margin-left: 60px;
margin-bottom: 10em;
margin-top: 5em;
border: 1px solid #cccccc;
}
#p2article2 img
{
border: 1px solid #cccccc;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: #45CCCC;
}
#p2article
{
width: 70%;
height:20em;
float: center;
display: block;
margin-left: auto;
margin-right: 60px;
margin-bottom: 10em;
margin-top: 5em;
border: 1px solid #cccccc;
}
#articleinfo2
{
width:100%;
height:10em;
display: block;
margin-bottom: 5em;
}
#articleText2{
width: 90%;
height:70%;
margin: 5%;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 30px;
color: black;
}
The titles at the bottom of the boxes have a large height set and a large margin-bottom on them like so
#articleinfo2 {
margin-bottom: 5em;
height: 10em
}
Removing that 10em height doesn't seem to affect much in this mockup state except it does make that gap much smaller
#work{
width: 100%;
height: 10em;
position: relative; /*TRY REMOVING THIS*/
top: -11em;
}
My divs do not center properly in IE, it works fine in Firefox.
I've tried following this site: http://flumpcakes.co.uk/css/center-div-ie but the container div appears in the right hand side in IE.
<div id="topbar">
<div id="previous"> « {block:PreviousPage} {/block:PreviousPage} </div>
<div id="next"> {block:NextPage} {/block:NextPage} » </div>
</div>
<div id="container">
<div id="header">
<div id="logo">
Title here please
</div>
<div id="tagline">
So, why do arrays start from zero?
</div>
<div id="topmenu" class="toplinks">
Home Archive Ask Me Archive Random
</div>
<div id="search">
<form action="/search" method="get">
<input type="text" name="q" value="" id="" />
</form>
</div>
</div>
<div id="posts-container">
<div id="posts">
Lorem ipsum dolor sit amet, post content goes here
</div>
<div id="leftmenu">
<div id="date" >
23rd November 2010
</div>
<div id="posttitle">
This is a title and it contains all that you may need...
</div>
<i>- Filed under Misc -<i>
</div>
</div>
</div>
The css:
body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
font-family:Georgia,"Times New Roman",Serif;
font-size: 14px;
text-align:center;
}
#topbar
{
height: 25px;
background: #030303;
min-width: 900px;
width: 100%;
}
#container
{
width: 800px;
margin:0 auto;
text-align:center;
}
#header
{
height: 140px;
width: 800px;
}
#logo
{
font-size: 40px;
font-weight: bold;
margin-left: 0px;
margin-top: 45px;
position: absolute;
}
#tagline
{
font-size: 14px;
font-style: italic;
margin-top: 89px;
padding: 5px;
position: absolute;
}
#topmenu
{
margin-top: 45px;
position: absolute;
text-align: right;
margin-left: 500px;
}
#search
{
margin-top: 62px;
position: absolute;
text-align: right;
margin-left: 570px;
float: right;
}
#next
{
color: #ffffff;
text-align: right;
width: 350px;
padding:3px;
float: right;
}
#previous
{
color: #ffffff;
text-align: left;
width: 350px;
padding:3px;
float: left;
margin-left: 0px;
padding-left: 0px;
}
#posts-container
{
width: 800px;
text-align: center;
}
#posts
{
width: 613px;
margin-left:177px;
position: absolute;
padding-left: 3px;
text-align: left;
}
#leftmenu
{
width:175px;
text-align: right;
margin-left: 0px;
}
#posttitle
{
font-size: 18px;
font-weight: bold;
text-align: right;
padding: 3px;
margin-left: 5px;
}
#date
{
background: #d4ff40;
width: 165px;
height: 14px;
text-align: center;
padding: 4px;
color: #7c9c2d;
margin: 5 auto;
font-size: 11px;
}
just delete text-align:center; from body, #container and #posts-container
My divs do not center properly in IE, it works fine in Firefox
I'm not going to try to parse that HTML and CSS in my head (working links are appreciated) but odds are that you are in Quirks mode.
Add a Doctype that triggers standards mode.