Can columns be formatted within a column & Menu placement
Can I create two columns within a column or am I going about this the wrong way? I want the logo on the left and the schedule on the right as pictured; however I want the Sunday Services and the Wednesday Services to be placed side by side with a veritical line between them. Should I be creating 3 columns instead?
Also, I have included my navigation menu within the header and I want the bottom of the menu boxes to sit on top of the bottom of the header. You can see I left out a bottom border on the menu boxes so that the white space between the header and main content creates the bottom border. I tried the clearfix code, but it is not working. Not sure if my other code is preventing that or if I'm going about this wrong as well as my first issue. I have attached an image of my header to go along with my code.
Your help is appreciated! This is my last resort as I have been trying different methods for two day, lol!
HTML CODE:
Code:
<!--START HEADER-->
<div id="header">
<div class="headerColumns">
<!--LEFT COLUMN-->
<div class="leftHeaderColumn">
<div id="logo">
<a href="index.html"><img src="images/cbccrosslogo.gif" alt="Covenant Church A Baptist Family" width="500" height="167" id="cbclogo" /></a>
</div>
</div>
<!--LEFT COLUMN-->
<div class="rightHeaderColumn">
<div class="scheduleColumns">
<div class="headSchedule" class="sundayColumn">
<h2>Sunday Services</h2>
<p>9:00am<br />
Rev. Ralph Willis</p>
<p>10:00am<br />
Dr. Billy Storms<br />
Children & Youth Classes
</p>
<p>11:00am<br />
Dr. Billy Storms<br />
</p>
</div>
<div class="headSchedule" class="wednesdayColumn">
<h2>Wednesday Services</h2>
<p>7:00pm<br />
Dr. Billy Storms<br />
Children & Youth Night
</p>
<p>10:00am<br />
Taize Prayer Service<br />
Rev. Ralph Willis<br />
<span class="italic">(Every Fourth Wednesday)</span>
</p>
</div>
</div>
</div>
</div>
<!--START MAIN NAVIGATION-->
<div class="menu" class="clearfix">
<ul id="mainNav">
<li><a href="index.html">HOME</a></li>
<li><a href="worship.html">WORSHIP</a></li>
<li><a href="pastors.html">OUR PASTORS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="ministries.html">MINISTRIES</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="media.html">MEDIA</a></li>
<li><a href="staff.html">STAFF</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<!--END MAIN NAVIGATION-->
</div>
<!--END HEADER-->
You cannot assign two classes in this way. Change to this:
Code:
<div class="headSchedule sundayColumn">
This occurs it three separate places of your code. Without this change the first class assignment is dropped, and so the corresponding css rules are ignored.
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
I'm not a fan of divitis; that is, unnecessary over-use of DIVs.
You also floated your headerColumns left, then right - only right will be remembered. But I don't think you need this div at all. You don't need to float #header - it is a div and will naturally expand across the available width of the screen. I don't believe your menu needs to float either.
I think you're over-using float and clear. The attached screenshot gives an indication of what happens when the screen width is reduced.
Floated element should generally be given a width. Or their parent-container should be given a width and/or a min-width, to prevent the dropping shown in the screenshot. (This does not apply to images as they already have a width.)
Don't forget to make good use of margins and padding. For example, apply these to the two schedules to separate them and push them further into the window (if required).
I hope that you don't see this as a criticism. I'm just trying to offer a few pointers
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
.. If you want a vertical line between the two schedules then you could either:
apply a border-right to the left-most schedule, and/or a border-left to the other one;
apply a background image to one of the schedules, positioning it to the right (or left) side. Give the schedule some padding so that the line doesn't sit behind the text of the schedule.
A third possibility, but one that is not generally recommended, is to add an image and float it to the right so that it sits between the two schedules.
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
Thank you for all your help! You don't how much I appreciate it!
I took all your considerations and made most of the revisions. I'm so glad I decided to post the question, otherwise those classes would have given me a lot of trouble since I was not assigning multiple classes correctly.
My only question left at this point is how to decide/assign the correct percentages to the floated elements. The current elements with percentages came from tutorials and learning a little bit about them. I searched for all my floated elements and will study my html/css and play with it a bit to see what happens.
Here is an image of my changes and as you can see everything worked. Fixing the classes made the biggest difference of all. Agaen, thanks for the help!
I forgot one more question! In the attached image you can see that the Right Column Content shifted to the right so the right edge of the blue box butts up against the edge of the viewing area. I actually like this better than the way the Left Column Content is set up, but I don't know the best way to go about achieving this for the left side b/c I don't know what change I made for the right side to move. If I play with the percentage values I can move it more to the left, but again I'm not sure if this is the best procedure to fix it. I did not change any percentage values for the right content so I know there should be a better option.
I never looked beyond the top region. Gosh, where did all those percentages come from?! There seems to be a large region of your page that disappears way outside the browser window
Normally a simple margin: 0 would work. But with all those percentages, left, right, etc.. It's looking tricky to fix. All you can do for the moment is adjust left: 31% for leftColumn, but it is unlikely to align properly to the edge of the viewport.
Looks like you are after a liquid (aka.fluid) 3-column layout - using percentages is a strong indication that you want the page to expand and contract with the browser-width. I would read something like this.
Even though you might be looking for a liquid layout, you can still add min-width and max-width (pixel) values to the main container elements, to prevent total collapse and, what I've just decided to call, the dead-fish effect . That is, with a very hi-res monitor, all the content bobbing at the top of the screen
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
Something like this perhaps (just a suggestion!) - I ignored the header:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body {
margin: 0; padding: 0;
}
/*BEGIN 3 COLUMN LIQUID LAYOUT*/
.container {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
width:100%; /* width of whole page */
overflow:auto; /* This chops off any overhanging divs */
padding: 0; margin: 0;
background-color: #AFAEE7;
}
/*MAIN CONTENT*/
.mainContent {
float: left;
width: 55%;
padding: 5px 0 5px 10px;
}
/*LEFT CONTENT*/
.leftColumn {
float: left;
width: 21%;
color: white;
background-color: #032747;
}
/*RIGHT CONTENT*/
.rightColumn {
float: right;
width: 21%;
padding-right: 15px;
color: white;
background-color: #032747;
text-align: right;
}
/*END 3 COLUMN LIQUID LAYOUT*/
</style>
</head>
<body>
<div class="container">
<!--COLUMN 2 START-->
<div class="leftColumn">
<h1>LEFT COLUMN CONTENT</h1>
<p id="youthGroupBox">text and image goes here</p>
<p id="supportGroupBox">text and image goes here</p>
<p id="calendarBox">text and image goes here</p>
<p id="prayerRequestBox">text and image goes here</p>
<p id="faqBox" >text and image goes here</p>
<p id="photoAlbumBox">text and image goes here</p>
</div>
<!--START MAIN CONTENT-->
<div class="mainContent">
<h1>WELCOME</h1>
<p>Our task is to use God's gift...do in Matthew 28:18-20.</p>
<!--END MAIN CONTENT-->
</div>
<!--COLUMN 3 START-->
<div class="rightColumn">
<h1>RIGHT COLUMN CONTENT</h1>
<p>text and image goes here</p>
</div>
</div>
</body>
</html>
And play with min- and max- width (in pixels) for the three regions so that they don't collapse or drop underneath each other.
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
Yes, I am trying to create a fluid/liquid 3-column layout. Thanks for the link! I'll read through it. After skimming it, it looks like I will be able to follow the guidelines in the articles.
I'm also reading the book CSS the missing manual. I'm really trying to get this stuff down b/c I'm in school for web design. This is not just a hobby, but something I want to do for a living. It's been over a year since my first web design class and I haven't worked on a website since then so I have forgotten a lot.
Before you post, read our: 
Can columns be formatted within a column & Menu placement
. That is, with a very hi-res monitor, all the content bobbing at the top of the screen 
