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;
}
Related
The result should be looking like this, as it appears in Edge:
This is how it looks when rendered in Chrome; as you may notice the search box is misplaced, on the line below the category bar:
The raw code:
Please help me to find the error that makes the search box appear on the lower line. I have been through this from start to finish for hours, and can't figure out why the same code looks fine in Edge, but not in Chrome.
I won't switch browsers, I need a solution for this to keep operating with
Chrome.
#topbar {
width: 1000px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top: 8px;
width: 100px;
float: left;
margin-right: 8px;
}
.topbar-section {
float: left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image {
width: 25px;
margin: 11px 15px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 14px;
padding-right: 50px;
}
#wigglyline {
float: left;
height: 40px;
}
#bell {
height: 25px;
margin: 9px 8px;
}
#bell-div {
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow {
width: 16px;
margin-left: 20px;
}
#search-box {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
margin: 5px 0 5px 5px;
float: left;
}
#magnifying-glass {
height: 26px;
margin-top: 5px;
}
.clear {
clear: both;
}
#menu-bar-container {
background-color: #BB1919;
width: 100%;
height: 100px;
}
#menu-bar {
width: 1000px;
margin: 0 auto;
}
h1 {
padding: 0;
margin: 0;
color: white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
}
<div id="topbar">
<img id="logo" src="images/bbc-blocks-dark.png">
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="images/signinimage.png">
<span id="signin-text">Sign in</span>
</div>
<div id="bell-div">
<img id="wigglyline" src="images/wigglyline.png">
<img id="bell" src="images/bell.png">
</div>
<div class="topbar-section topbar-menu">
News
</div>
<div class="topbar-section topbar-menu">
Sport
</div>
<div class="topbar-section topbar-menu">
Weather
</div>
<div class="topbar-section topbar-menu">
iPlayer
</div>
<div class="topbar-section topbar-menu">
TV
</div>
<div class="topbar-section topbar-menu">
More
<img id="more-arrow" src="images/more-arrow.png">
</div>
<div class="topbar-section">
<input id="search-box" type="text" value="Search">
<input type="image" id="magnifying-glass" src="images/magnifying-glass.png">
</div>
</div>
<div class="clear"></div>
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
</div>
</div>
It's because the width of your container isn't big enough. If you make the width of #topbar 1100px then it won't wrap.
#topbar {
width: 1100px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top: 8px;
width: 100px;
float: left;
margin-right: 8px;
}
.topbar-section {
float: left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image {
width: 25px;
margin: 11px 15px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 14px;
padding-right: 50px;
}
#wigglyline {
float: left;
height: 40px;
}
#bell {
height: 25px;
margin: 9px 8px;
}
#bell-div {
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow {
width: 16px;
margin-left: 20px;
}
#search-box {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
margin: 5px 0 5px 5px;
float: left;
}
#magnifying-glass {
height: 26px;
margin-top: 5px;
}
.clear {
clear: both;
}
#menu-bar-container {
background-color: #BB1919;
width: 100%;
height: 100px;
}
#menu-bar {
width: 1000px;
margin: 0 auto;
}
h1 {
padding: 0;
margin: 0;
color: white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
}
<div id="topbar">
<img id="logo" src="images/bbc-blocks-dark.png">
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="images/signinimage.png">
<span id="signin-text">Sign in</span>
</div>
<div id="bell-div">
<img id="wigglyline" src="images/wigglyline.png">
<img id="bell" src="images/bell.png">
</div>
<div class="topbar-section topbar-menu">
News
</div>
<div class="topbar-section topbar-menu">
Sport
</div>
<div class="topbar-section topbar-menu">
Weather
</div>
<div class="topbar-section topbar-menu">
iPlayer
</div>
<div class="topbar-section topbar-menu">
TV
</div>
<div class="topbar-section topbar-menu">
More
<img id="more-arrow" src="images/more-arrow.png">
</div>
<div class="topbar-section">
<input id="search-box" type="text" value="Search">
<input type="image" id="magnifying-glass" src="images/magnifying-glass.png">
</div>
</div>
<div class="clear"></div>
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
</div>
</div>
It's because you've set the width property of the ID top-bar to 1000. Search bar cannot fit in (At least in chrome, maybe because of default browser margins)
Make the width property to something like 1050px to solve it.
#topbar {
width: 1050px;
margin: 0 auto;
height: 40px;
}
It works!
This is NetBeans. I have tried to include an external CSS file but when used externally the images all get really enlarged. Whereas my I use the same styling within the html file using internal styling the images are of correct ratio.
body {
width: 100%;
height: 100%;
margin: 0;
}
.header {
background-color: #000;
color: #fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}
.inner header {
width: 80%;
margin: auto;
}
.logo {
float: left;
height: 50px;
padding: 15px;
font-size: 20px;
font-weight: bold;
padding-left: 90px;
}
a {
text-decoration: none;
background-color: transparent;
color: #ededed;
}
.header link {
float: right;
font-size: 14px;
height: 50px;
padding: 15px 15px;
font-size: 16px;
font-weight: bold;
}
#su {
float: right;
height: 50px;
padding: 15px 90px;
}
#l {
float: right;
height: 50px;
padding: 15px 0px;
}
.content {
min-height: 600px;
}
.banner-image {
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(image/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image {
padding-top: 12%;
width: 80%;
margin: auto;
}
.banner-content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow: hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
margin-left: 200px;
}
.button {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.container {
width: 90%;
margin: auto;
overflow: hidden;
}
.items {
width: 30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float: left;
margin-left: 1%;
}
.thumbnail {
display: block;
max-width: 100%;
height: auto;
}
.caption {
color: #000;
padding: 0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer {
background-color: #000;
color: #fff;
font-size: 14px;
text-align: center;
}
<html>
<head>
<title>Lifestyle Store</title>
</head>
<body>
<div class="header">
<div class="inner header">
<div class="logo">
Lifestyle Store
</div>
<div class="header link">
<div id="su">
Sign Up
</div>
<div id="l">
Login
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner-image">
<div class="inner-banner-image ">
<div class="banner-content">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on premium brands</p>
<form>
Shop Now
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<img src="image/camera.jpg" class="thumbnail">
<div class="caption">
<h2>Cameras</h2>
<p>Choose among the best from the world</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/watch.jpg" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/shirt.jpg" class="thumbnail">
<div class="caption">
<h2>Shirts</h2>
<p>Our exquisite collection of shirts</p>
</div>
</a>
</div>
</div>
<footer>
<div class="container">
<p>Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p>
</div>
</footer>
</body>
</html>
Have you linked the CSS file correctly in this line? Try dragging and dropping the file directly into the HTML to ensure the location and name is correct.
href="assignment1/public_html/style.css"
Edit:
The current link you have is saying that you have the index.html file outside of the 'assignment1' folder. If you have your HTML file inside 'public_html' then the stylesheet link should be the following.
href="style.css"
---I tried all of the suggestions on fixing the code, but either the search bar comes before the "More" tab, or just doesn't change the final output. Any further ideas?
Ok I'm trying to re-create the BBC website. In the process when I tried to add the search bar it seemed to wrap my top bar under itself, and I'm not sure how to fix the issue. I'll post the code (about 120 lines, not much) and a link to the reference site and hopefully somebody out there knows how to deal with this.
http://www.bbc.com/news/technology ---- all I'm trying to do at the top bar that will take you to other portions of the website (i.e. the top tabs labelled "News, Sports, Weather,...etc." But like i said the code makes my search bar wrap down.My code.
#topbar {
width: 800px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0 auto;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top: 8px;
float: left;
margin-right: 8px;
}
.topbar-section {
float: left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 11px;
padding-right: 65px;
}
#signin-image {
width: 25px;
margin: 9px 15px;
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 80%;
padding: 10px 14px 0px 14px;
height: 27px;
}
#more-arrow {
width: 6px;
margin-left: 65px;
}
#search-box {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
margin: 7px 0px 7px;
float: left;
}
#search-icon {
height: 26px;
margin-top: 7px;
background-color: #E4E4E4;
}
<div id="topbar">
<img id="logo" src="images/bbc-blocks-dark.png">
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="images/signinimage.png">
<span id="signin-text">Sign in</span>
</div>
<div class="topbar-section topbar-menu">News</div>
<div class="topbar-section topbar-menu">Sport</div>
<div class="topbar-section topbar-menu">Weather</div>
<div class="topbar-section topbar-menu">Shop</div>
<div class="topbar-section topbar-menu">Earth</div>
<div class="topbar-section topbar-menu">Travel</div>
<div class="topbar-section topbar-menu">
More
<img id="more-arrow" src="images/more-arrow.png">
</div>
<div class="topbar-section topbar-menu">
<input id="search-box" type="text" value="Search">
<input type="image" id="search-icon" src="images/search-icon.png">
</div>
</div>
Increase toolbar with to 1000px and Apply float right on search area.
Here is the updated code
#topbar {
width: 1000px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0 auto;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top: 8px;
float: left;
margin-right: 8px;
}
.topbar-section {
float: left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 11px;
padding-right: 65px;
}
#signin-image {
width: 25px;
margin: 9px 15px;
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 80%;
padding: 10px 14px 0px 14px;
height: 27px;
}
#more-arrow {
width: 6px;
margin-left: 65px;
}
#search-area {
float: right;
}
#search-box {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
//margin:7px 0px 7px;
float: left;
}
#search-icon {
height: 26px;
// margin-top: 7px;
background-color: #E4E4E4;
}
<div id="topbar">
<img id="logo" src="images/bbc-blocks-dark.png">
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="images/signinimage.png">
<span id="signin-text">Sign in</span>
</div>
<div class="topbar-section topbar-menu">
News
</div>
<div class="topbar-section topbar-menu">
Sport
</div>
<div class="topbar-section topbar-menu">
Weather
</div>
<div class="topbar-section topbar-menu">
Shop
</div>
<div class="topbar-section topbar-menu">
Earth
</div>
<div class="topbar-section topbar-menu">
Travel
</div>
<div class="topbar-section topbar-menu">
More
<img id="more-arrow" src="images/more-arrow.png" </div
<div id="search-area">
<input id="search-box" type="text" value="Search">
<input type="image" id="search-icon" src="images/search-icon.png">
</div>
</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.