Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 1
New to the CF scene
Join Date: Dec 2011
Posts: 3
Thanks: 1
Thanked 0 Times in 0 Posts
Alignment issue with a grid layout
Hello!
I need help with some code that I'm working on for a layout. I'm trying to put it onto Wordpress after, but for some reason, my alignment is off.
My main problems I noticed are:
The logo messes up with the alignment (possibly because of z-index)
#recent-news div alignment is off (from display:inline?)
First <hr /> line disappears on Firefox
I had to force the alignment from OUR SPONSORS and down with a blank ul; it shows up caught behind the logo
Copyright doesn't span 100%; when setting a width to the div, the Copyright info disappears
Here's the code!
index.html
http://socalnpo.danaoira.net
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SoCal NPO - Southern California Non-Profit Organizations Magazine</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="logo">
<a href="#"><img src="images/southern-california-non-profit-organizations-magazine-socal-logo.png" /></a>
</div>
<div id="top-menu">
<a href="#">Home</a> |
<a href="#">Articles</a> |
<a href="#">Blog</a> |
<a href="#">About</a> |
<a href="#">Calendar</a> |
<a href="#">Subscribe</a> |
<a href="#">Contact</a>
</div>
<div id="header">
<div id="menus">
<div id="main-menu">
<ul class="main-menu">
<li><a href="#">Community</a></li>
<li><a href="#">Non-Profit Organizations</a></li>
<li><a href="#">Donors</a></li>
</ul>
</div>
<div id="category-float">
<ul id="category">
<li><a href="#">Environmental</a></li>
<li><a href="#">Arts & Culture</a></li>
<li><a href="#">Quality of Life</a></li>
<li><a href="#">Education</a></li>
<li>
<form method="get" id="search" action="#">
<fieldset>
<input type="text" class="searchbar" />
</fieldset>
</form>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div id="featured">
<div id="featured-1">
<a href="#" class="post-thumbnail"><img src="images/100-mile-club-300.png" alt="100 Mile Club" /></a>
<h1><a href="#">100 Mile Club</a></h1>
<p>The 100 Mile Club is an organization that provides opportunities for school age children to run or walk 100 miles at school during a single year.</p>
</div>
<div id="featured-2">
<a href="#" class="post-thumbnail"><img src="images/non-profits-share-the-vision-300.png" alt="Non-Profits Share the Vision" /></a>
<h1><a href="#">Non-Profits Share the Vision</a></h1>
<p>The 100 Mile Club is an organization that provides opportunities for school age children to run or walk 100 miles at school during a single year.</p>
</div>
<div id="featured-3">
<a href="#" class="post-thumbnail"><img src="images/corenet-global-junior-achievement-300.png" alt="CoreNet Global Junior Achievement" /></a>
<h1><a href="#">CoreNet Global Supporting Junior Achievement</a></h1>
<p>The 100 Mile Club is an organization that provides opportunities for school age children to run or walk 100 miles at school during a single year.</p>
</div>
<br />
</div>
<!-- Six (6) Recent News -->
<div id="recent">
<hr />
<ul>
<li class="recent-news"><a href="#">Recent News</a></li>
<li class="view-more-news"><a href="#">View more news ...</a></li>
</ul>
<div id="columns">
<div id="recent-1">
<a href="#" class="post-news"><img src="images/csusb-recognition-150.png" alt="CSUSB Recognition" /></a><h2><a href="#">CSUSB Recognition</a></h2>
<p>Short article summary no longer than three lines goes here yep yep!</p>
</div>
<div id="recent-2">
<a href="#" class="post-news"><img src="images/ieep-quality-of-life-summit-150.png" alt="IEEP Quality of Life Summit" /></a><h2><a href="#">IEEP Quality of Life Summit</a></h2>
<p>Short article summary no longer than three lines goes here yep yep!</p>
</div>
<div id="recent-3">
<a href="#" class="post-news"><img src="images/perris-historical-exhibit-150.png" alt="City of Perris Historical Exhibit" /></a><h2><a href="#">City of Perris Historical Exhibit</a></h2>
<p>Short article summary no longer than three lines goes here yep yep!</p>
</div>
<div id="recent-4">
<a href="#" class="post-news"><img src="images/historical-society-fashion-150.png" alt="Historical Society Celebrates 100 years of fashion" /></a><h2><a href="#">Historical Society Celebrates 100 years of fashion</a></h2>
<p>Short article summary no longer than three lines goes here yep yep!</p>
</div>
<div id="recent-5">
<a href="#" class="post-news"><img src="images/woodcrest-christian-school-150.png" alt="Woodcrest Christian School" /></a><h2><a href="#">Woodcrest Christian School</a></h2>
<p>Short article summary no longer than three lines goes here yep yep!</p>
</div>
<div id="recent-6">
<a href="#" class="post-news"><img src="images/tour-de-perris-150.png" alt="Tour De Perris 100 Mile Race" /></a><h2><a href="#">Tour De Perris 100 Mile Race</a></h2>
<p>Short article summary no longer than three lines goes here yep yep!</p>
</div>
</div>
<br /><br />
<hr />
</div>
</div>
<div id="footer">
<div id="sponsors-head">
<ul>
<li class="blank"><h2>Our Sponsors</h2></li>
<li class="sponsors">Our Sponsors</li>
<li class="advertise"><a href="#">Advertise with us!</a></li>
</ul>
<div id="sponsors">
<ul id="sponsors">
<li><a href="#"><img src="images/bank-of-america-logo.png" alt="Bank of America proudly sponsors SoCal NPO Magazine" title="Bank of America proudly sponsors SoCal NPO Magazine" /></a></li>
<li><a href="#"><img src="images/gresham-savage-attorneys-logo.png" alt="Gersham Savage Attorneys at Law proudly sponsors SoCal NPO Magazine" title="Gersham Savage Attorneys at Law proudly sponsors SoCal NPO Magazine" /></a></li>
<li><a href="#"><img src="images/workforce-investment-board-logo.png" alt="Riverside County Workforce Investment Board proudly sponsors SoCal NPO Magazine" title="Riverside County Workforce Investment Board proudly sponsors SoCal NPO Magazine" /></a></li>
<li><a href="#"><img src="images/premier-service-bank-logo.png" width="135" alt="Premiere Service Bank proudly sponsors SoCal NPO Magazine" title="Premiere Service Bank proudly sponsors SoCal NPO Magazine" /></a></li>
<li><a href="#"><img src="images/eda-logo.png" alt="Riverside County Office of Foreign Trade proudly sponsors SoCal NPO Magazine" title="Riverside County Office of Foreign Trade proudly sponsors SoCal NPO Magazine" /></a></li>
<li><a href="#"><img src="images/altek-media-group-logo.png" alt="Altek Media Group proudly sponsors SoCal NPO Magazine" title="Altek Media Group proudly sponsors SoCal NPO Magazine" /></a></li>
</ul>
</div>
</div>
</div>
<div id="footer-links">
<ul id="submissions">
<li>Submissions</li>
<li><a href="#">Become a Contributor</a></li>
<li><a href="#">Submit Articles</a></li>
</ul>
<ul id="about">
<li>About</li>
<li><a href="#">Overview</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Privacy Statement</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
<ul id="support">
<li>Support</li>
<li><a href="#">Search Tips & Tricks</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">Need Help?</a></li>
</ul>
<ul id="follow-icons">
<li>Follow</li>
<li class="twitter"><a href="#"><img src="images/twitter-icon.png" alt="Follow SoCal NPO Magazein on Twitter!" /></a></li>
<li class="facebook"><a href="#"><img src="images/facebook-icon.png" alt="Like SoCal NPO Magazine on Facebook!" /></a></li>
<li class="youtube"><a href="#"><img src="images/youtube-icon.png" alt="Subscribe to SoCal NPO Magazine on YouTube!" /></a></li>
</ul>
<ul id="follow">
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">YouTube</a></li>
</ul>
<div class="copyright">
© 2011 Altek Media Group. All Rights Reserved.
</div>
</div>
</div>
</body>
</html>
style.css
Code:
/* CSS Document */
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
body {
font: 12px/14px Arial, Tahoma;
color: #505050;
background: #8b5a02 url(images/bg.png);
background-repeat: repeat-x;
}
a {
color: #c00015;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
#container {
width: 960px;
margin: 130px auto 65px auto;
background: #ffffff;
border: 1px solid #e6e6e6;
box-shadow: 0 0 5px #000000;
-moz-box-shadow: 0 0 5px #000000;
}
#logo {
position: relative;
z-index: 0;
left: 50px; top: -70px;
float: left;
}
#top-menu {
float: right;
margin: -35px 25px 0 0;
color: #ffffff;
}
#top-menu a {
color: #ffd161;
}
#header
#menus
#main-menu
ul.main-menu {
margin: 35px 0 0 75px;
font: 20px/36px Arial, Tahoma;
text-transform: uppercase;
float: left;
}
#category-float {
width: 962px;
margin: -30px 0 0 -1px;
float: left;
background: url(http://socalnpo.danaoira.net/images/categories-search.png);
}
#category {
position: relative;
margin: 13px 0 13px 50px;
height: auto;
font: 14px Arial, Tahoma;
color: #ffd161;
}
#category-float ul li {
display: inline;
}
#category a {
color: #ffd161;
padding: 0 25px;
}
#category a:hover {
color: #ffd161;
padding: 0 25px;
background: #c00015;
}
#search {
float: right;
}
input.searchbar {
width: 240px;
height: 15px;
border: 0;
margin-right: 48px;
background: #ffd161;
}
#main {
width: 960px;
float: left;
overflow: hidden;
}
#featured, #recent {
width: 884px;
margin: 35px 35px 0 35px;
}
/* FEATURED NEWS SECTION */
#featured-news {
width:275px;
display:block;
padding:10px 0;
}
#featured-1 {
float: left;
width: 275px;
margin: 0;
display: inline;
}
#featured-2 {
float: left;
width: 275px;
margin: 0 29px;
display: inline;
}
#featured-3 {
float: right;
width: 275px;
margin: 0;
display: inline;
}
#featured-1 h1, #featured-2 h1, #featured-3 h1 {
font: 18px/16px Arial, Tahoma;
margin: 22px 0 0 0;
height: 38px;
}
#featured-1 p, #featured-2 p, #featured-3 p {
font: 12px/18px Arial, Tahoma;
margin: 0 0 24px 0;
}
a.post-thumbnail img {
width: 275px;
}
hr {
position: relative;
margin: 24px 0;
background-color: #e9e9e9;
color: #e9e9e9;
width: 884px;
height: 1px;
border: 0;
}
/* RECENT NEWS SECTION */
#recent ul {
margin: 0 0 20px 0;
}
li.recent-news {
font: 18px/14px Arial, Tahoma;
text-transform: uppercase;
display: inline;
}
li.view-more-news {
font: 14px/14px Arial, Tahoma;
float: right;
display: inline;
}
a.post-news, h2 {
font: 14px/12px Arial, Tahoma;
width: 135px;
margin: 10px 0 0 0;
}
#columns {
width: 884px;
display: block;
height: 260px;
margin: 20px 0 0 0;
}
#recent-1 p, #recent-2 p, #recent-3 p, #recent-4 p, #recent-5 p, #recent-6 p {
font: 12px/14px Arial, Tahoma;
width: 135px;
margin: 10px 0 0 0;
}
#recent-1 {
float: left;
width: 135px;
margin: 0 8px 0 0;
display: inline;
}
#recent-2 {
float: left;
width: 135px;
margin: 0 7.5px;
display: inline;
}
#recent-3 {
float: left;
width: 135px;
margin: 0 7.5px;
display: inline;
}
#recent-4 {
float: left;
width: 135px;
margin: 0 7.5px;
display: inline;
}
#recent-5 {
float: left;
width: 135px;
margin: 0 7.5px;
display: inline;
}
#recent-6 {
float: right;
width: 135px;
margin: 0;
display: inline;
}
#footer, #sponsors {
width: 960px;
margins: 20px 36px;
display: block;
}
/* SPONSORS SECTION */
li.blank h2 {visibility: hidden;}
#footer-columns {
width: 884px;
height: 260px;
margin: 20px 36px 0 36px;
}
#sponsors-head {
width: 884px;
margin: 30px 36px;
}
li.sponsors {
color: #c00015;
font: 18px/14px Arial, Tahoma;
text-transform: uppercase;
display: inline;
}
li.advertise {
font: 14px/14px Arial, Tahoma;
float: right;
display: inline;
}
ul#sponsors li {
display: inline;
align: center;
margin: 20px 5px 0 5px;
position: relative;
top: 15px;
}
#sponsors img {
width: 135px;
}
/* FOOTER LINKS */
#footer-links {
width: 962px;
height: 220px;
margin: 50px 0 50px -1px;
background: #86000a;
}
#footer-links ul li {
color: #ffd161;
font: 11px/18px Arial, Tahoma;
}
#footer-links a, a:hover {
color: #ffffff;
}
#submissions {
float: left;
width: 165px;
margin: 60px 0 0 50px;
display: inline;
}
#about {
float: left;
width: 165px;
margin: 60px 0 0 0;
display: inline;
}
#support {
float: left;
width: 165px;
margin: 60px 0 0 0;
display: inline;
}
#follow-icons {
float: left;
width: 40px;
margin: 60px 0 0 0;
display: inline;
}
#follow {
float: left;
width: 165px;
margin: 80px 0 0 0;
display: inline;
}
#follow li {
height: 28px;
}
span#full {width:960px;}
div.copyright {
font: 11px/18px Arial, Tahoma;
color: #a0a0a0;
position: relative;
top: 235px;
left: -730px;
}
/* CONTENT PAGE STYLING */
#video-container {
height: 340px;
width: 884px;
}
#video {
float: left;
}
#bio {
float: right;
width: 280px;
}
#bio h1 {
font: 18px/16px Arial, Tahoma;
color: #c00015;
text-align: center;
float: right;
width: 280px;
}
#bio h2 {
font: 14px/16px Arial, Tahoma;
color: #c00015;
text-align: center;
float: right;
width: 280px;
}
#ep-sponsor {
text-align: center;
align: center;
}
#content {
width: 884px;
align: justify;
font: 12px/14px Arial, Tahoma;
}
#content p, #bio p {
margin-top: 10px;
}
#content h1 {
font: 18px/16px Arial, Tahoma;
color: #c00015;
}
Thanks for all your help! It will be great to be able to finish this project, but even better to get some help with this code because my CSS just isn't doing it for me. :P
PM User | 2
Master Coder
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Hello Ahiko,
Quote:
The logo messes up with the alignment (possibly because of z-index)
Not sure what the issue is here. It looks good to me in IE and FF both.
Quote:
#recent-news div alignment is off (from display:inline?)
Not sure I understand the issue here either...
Code:
First <hr /> line disappears on Firefox
No it's there, just not where you're looking for it. Without clearing the floats in #featured, that hr ends up near the top of #featured-3.
Make your CSS look like this -
Code:
#featured, #recent {
margin: 35px 35px 0;
overflow: auto;
width: 884px;
}
See this explanation of
how overflow: auto; clears your floats .
Quote:
I had to force the alignment from OUR SPONSORS and down with a blank ul; it shows up caught behind the logo
I think this may help -
Code:
#footer, #sponsors {
clear: both;
display: block;
width: 960px;
overflow: auto; /*floats need cleared here too*/
}
Quote:
Copyright doesn't span 100%; when setting a width to the div, the Copyright info disappears
If you use clear: both; again, you don't need the positioning. You do need to move .copyright out of #footer-links if you don't want it to have the #86000a background
Try this -
Code:
div.copyright {
font: 11px/18px Arial, Tahoma;
color: #a0a0a0;
clear: both;
/*
position: relative;
top: 235px;
left: -730px;
*/
}
Users who have thanked Excavator for this post:
PM User | 3
New to the CF scene
Join Date: Dec 2011
Posts: 3
Thanks: 1
Thanked 0 Times in 0 Posts
Awesome!! Thank you so much, Excavator! I will definitely try these fixes when I get some free time in between all of my projects.
I never understood the concept of clearing floats, so I will have to look into that.
I'll let you know how it goes!
Jump To Top of Thread
Thread Tools
Rate This Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 05:15 AM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
Alignment issue with a grid layout
