Log in

View Full Version : Resolved 3 Column Layout problems


krisjohnson
11-23-2008, 08:13 PM
I've been learning lots of new things over the past 2 weeks -- since my last posting.

I've worked my way up to using CSS for page layouts now.

So below is the HTML for my sample that I worked up.

I was successful with a 2 Column layout :) -- so I then moved on to a 3 Column.

This design is essentially 3 columns on 2 rows. Whereas, the 3 columns in row 1 has all the content and row 2 spans the width of the page as the overall page footer.

I have left and right columns for possible advertisement or additional navigation; the middle column will house all the content and an overall pager footer.

Inside of the Middle (content) column – I’ve broken it down into specific floating rows/boxes for various purposes (Branding area, Navigation, Search, 2 Column Content, Content Footer).

The fixed column CSS script looks pretty decent except for one catch -- as I implement the 2 Column Content floating box in the Middle column – I also seem to get some unwanted borders that cross over into my left and right ad/nav columns; this ruins the look of clean column lines.

This happened just as I added in the main content section. I wanted to make these two floating columns inside of the Middle column content section.

I’m curious to better understand my mistakes on the Fixed CSS script. :confused:

BTW -- The liquid version of the CSS script looks much worse in the Middle column. I'm not sure why there is such a difference.

I'd like to understand “why” (when I switch over to percentages for the Liquid script) that so many more items become “broken” (compared to the Fixed script final output).

You can see an example at:

http://www.danereidmedia.com/talktones/3col_layout_sample.html

I’m showing the results from the Fixed CSS script (with the one issue).

CSS (scripts attached):
3col_base_fixed.css
3col_base_liquid.css



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Three Column Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://www.danereidmedia.com/talktones/">

<style type="text/css" media="all">@import url(assets/css/3col_base_fixed.css); </style>
<!-- <style type="text/css" media="all">@import url(assets/css/3col_base_fixed.css); </style> -->
</head>

<body>
<div id="container">
<!-- Left Column -->
<div id="leftColumn">
<h2>Left Advertising Column </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
</div> <!-- Left Column -->

<!-- Right Column -->
<div id="rightColumn">
<h2>Right Advertising Column</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
</div> <!-- Right Column -->

<!-- Middle Column -->
<div id="middleColumn">
<!-- Branding Row -->
<div id="branding">
<h2>Branding Area</h2>
My Talk Tones
</div> <!-- Branding Row -->
<!-- Navigation Row -->
<ul id="mainNav">
<li><a href="#">Home</a></li>
<li><a href="#">Name Ringers</a></li>
<li><a href="#">Bible Verses</a></li>
<li><a href="#">Musical Tones</a></li>
<li><a href="#">Feature Tones</a></li>
</ul> <!-- Navigation Row -->

<!-- Search Row -->
<div id="searchZone">
<form action="#" method="post" name="searchItem" class="formText">
Search by: &nbsp;
<select class="formText">
<option value="" selected="selected">Choose search critera</option>
<option value="Category">Category</option>
<option value="Name">Name</option>
<option value="Artist">Artist</option>
<option value="Chapter">Chapter</option>
</select>
Keyword: &nbsp;<input name="search_value" type="text" value="Input value here" size="20" maxlength="50" class="formText">
<input name="search_button" type="submit" value="Search" class="formText">

</form>
</div> <!-- Search Row -->

<!-- Content Row -->
<div id="leftContent">
<h2>Left Middle Column Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
<div id="rightContent">
<h2>Right Middle Column Content</h2>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div id="middleFooter">
Content | Footer | Content | Footer | Content | Footer
</div>

</div> <!-- Middle Column -->

<div id="footer">
Page | Footer | Page | Footer | Page | Footer
</div>

</div> <!-- Container -->
</body>
</html>
monicasaha
11-24-2008, 07:55 AM
mistakes i find in ur css.. for example..


#middleColumn#rightContent

use space in between like this

#middleColumn #rightContent

never forget to end the attribute with";"
when u r using padding never forget to "substract" from width or height whatever u r using in padding

and moreover when u finish floating never forget to use overflow:hidden or br..

best of luck
krisjohnson
11-25-2008, 01:55 AM
Thanks for the input monicasaha!!
I've made the adjustments in my CSS script that you suggested
But this really doesn't address the basic issue that I'm having.

I've used Float on the left and right columns in the 3 column layout
All my content is in the Middle column area.

I'm using floating boxes to contain "rows" of content in the Middle column.

I'm able to add simple content to each floating box/row.

But when I want to use the "float" selector to make two columns inside of one of the rows -- I get horizontal line to brake across my 3 column layout. This ruins the effect.


Here are the CSS commands:


#middleColumn #leftContent {
width: 310px;
margin: 0;
padding: 10px 5px;
/* float: left; */
}


#middleColumn #rightContent {
width: 310px;
margin: 0;
padding: 10px 5px;
/* float: right; */
}

Notice in the sample page:
http://www.danereidmedia.com/talktones/3col_layout_sample.html

I've commented out the attempt float each box to appear side-by-side. This removes the line that would appear if I left those values in these commands.

IS there a way to do a 2-col layout inside the Middle column of my 3-col design???
monicasaha
11-25-2008, 06:48 AM
chk the attachment... i think u haven't followed all my suggestions...here the file.. plz chk..
hope this will solve ur problem.

best of luck
krisjohnson
12-04-2008, 02:18 PM
Monicasaha:

I reviewed your attachment. That was much clear than you original suggestions/notes.

You took a slightly different layout approach by using "float" on each column from left to right; initially I "FLOATed" left and right column in the appropiate direction and then I floated the middle column left of the RIGHT column. So even my HTML layout was different. Perhaps this is what was causing my problem. I based it on several examples in my CSS book on multiple column layouts.

So now I believe I understand all but one thing -- the overflow tag. My book really on refers to it as it applies to it's usage with images. But here we used it with floating boxes to ensure that everyone played fairly with one another.

Do you have any additional insigt into using this selector wisely?
If so - just e-mail me your thoughts. I'll try to incorporate your advice in future efforts.

Kristopher