A CSS layout prob! Appreciate any help with this folks

andthen · #1 (**permalink**) 08-14-2009, 10:35 AM

Hi there people,

I have a box that I need to format so that they display in a two-column fashion, left to right, only the problem with my solution is that if for example box 1 has mare content than the others and thus the height increases, box 3 gets effected and so box 3 doesnt align to the left.

And so to sum up I would like the left to right layout to be consistant regardless of how big the other boxes become. Oh and the best bit is that I am unable to change any other object apart from the settings for "contentBlock" because the wrapper is dynamic and...i just cant touch anything else!

So...any takers? ...please? lol its friday, I could use a victory!

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>
<title>contentBlock example page</title>
<style type="text/css">
        
        body {
        background:#999999;
        }
        
        .contentPanel {
        background:#cccccc;
        width:790px;
        height:auto;
        margin:10px auto;
        border:dashed 1px #000000;
        padding:10px 0 0 10px;
        }
        
        .contentBlock {
        background:#ffffff;
        float:left;
         width:363px;
        margin:0 10px 10px 0;
        border:solid 1px #000000;
        padding: 10px;
        display:table;
        
        }
        
        .contentBlock img{
        float:right;
        margin:0.5em;
        }
        
    </style>
</head>
<body>
<div class="contentPanel">
  <div class="contentBlock">
    <p><strong>Loret ipsum 1</strong></p>
    <p>és un text simulat que empren els editors quan presenten les mostres del treball final als seus clients, conté quelcom que tal vegada no presta l'atenció en si mateix. 
      S'ha emprat des del segle XVI, basat en extractes d'un treball de Ciceró (45 a.C.)</p>
    <p>és un text simulat que empren els editors quan presenten les mostres del treball final als seus clients, conté quelcom que tal vegada no presta l'atenció en si mateix. 
      S'ha emprat des del segle XVI, basat en extractes d'un treball de Ciceró (45 a.C.)</p>
  </div>
  <div class="contentBlock">
    <p><strong>Loret ipsum 2</strong></p>
    <p>és un text simulat que empren els editors quan presenten les mostres del treball final als seus clients, conté quelcom que tal vegada no presta l'atenció en si mateix. 
      S'ha emprat des del segle XVI, basat en extractes d'un treball de Ciceró (45 a.C.)</p>
  </div>
  <div class="contentBlock">
    <p><strong>Loret ipsum 3</strong></p>
    <p>és un text simulat que empren els editors quan presenten les mostres del treball final als seus clients, conté quelcom que tal vegada no presta l'atenció en si mateix. 
      S'ha emprat des del segle XVI, basat en extractes d'un treball de Ciceró (45 a.C.)</p>
  </div>
  <div class="contentBlock">
    <p><strong>Loret ipsum 4</strong></p>
    <p>és un text simulat que empren els editors quan presenten les mostres del treball final als seus clients, conté quelcom que tal vegada no presta l'atenció en si mateix. 
      S'ha emprat des del segle XVI, basat en extractes d'un treball de Ciceró (45 a.C.)</p>
  </div>
</div>
</body>
</html>

Regards,
AndThen

a53mp · #2 (**permalink**) 08-14-2009, 04:41 PM

Should I use tables for layout?

NJ · #3 (**permalink**) 08-14-2009, 04:57 PM

In some cases, tables do work best. However, from a purist standpoint, this is not a case for tabular data; so, it would not be a place for a table (if you aren't a purist, you can do what you want!)

However, have you considered creating three ID layers for your columns, instead of class styles? That way you can size and position the layers precisely for each individually. If you put an image larger than the column in any one of them, you are still going to have to deal with the overflow.

lstjean · #4 (**permalink**) 08-14-2009, 05:33 PM

You could do like so :

<div class="contentPanel">

<div class="contentBlock">
</div>
<div class="contentBlock">
</div>
<div style="clear:both;"></div>

<div class="contentBlock">
</div>
<div class="contentBlock">
</div>
<div style="clear:both;"></div>

</div>

Doing so would align the top of your left and right boxes, but would not enlarge the white box with less content in it.

Nevertheless, I do not know if you will be able to implement this since you say you have no control on the dynamically generated code....

Hope this help!

morestar · #5 (**permalink**) 08-14-2009, 05:50 PM

This page will help you: CSS Equal Columns Height script

I would would scrap the pompous CSS layouts and use tables cause you'll end up with little issues between browsers...

my two cents

jimkelly7777 · #6 (**permalink**) 08-14-2009, 06:07 PM

It's funny but I never read this question regarding tables.

sharonjackson · #7 (**permalink**) 08-14-2009, 06:19 PM

Quote:

Originally Posted by morestar

This page will help you: CSS Equal Columns Height script

I would would scrap the pompous CSS layouts and use tables cause you'll end up with little issues between browsers...

my two cents

If my client is in a hurry and I have no time to dick around with css and browsers that hate each other, I use tables. They are stable, they are easy and you don't have to end up biting your keyboard in a rage. If the purists are sneering at you, so what? They aren't signing your paycheck.

Here's to tables!!

davuart · #8 (**permalink**) 08-14-2009, 06:55 PM

Changed as I did not read the question fully, this should now work
Hopefully this below will help, I have taken out any font colour or type from the body or other elements so just left the basic sizing in place.
This is set to provide three equal columns for a page width of 760px.
Its easy to change to other widths just change the min-body width, contentwrapper, col1 to add up to the new width with the margins then the footer as well.

Hopefully makes sense, just copy and paste and see how it looks.

//
doc title and head removed place your own in here

<style type="text/css">
body {
margin: 0px;
padding: 0px;
min-width: 760px;
}
#contentwrapper {
margin: 0 auto;
background-repeat: repeat-y;
width: 760px;
}
#columntop {
background-repeat: no-repeat;
height: 12px;
}
.col1 {
float: left;
width: 250px;
margin-right: 3px;
}

#columnbottom {
clear: both;
background-repeat: no-repeat;
height: 12px;
}
.content {
padding: 8px 20px;
font-size: 0.75em;
line-height: 1.5em;
}
.content p {
margin: 6px 0px 12px;
}
#footer {
margin: 0px auto;
font-size: .7em;
width: 760px;
}
#footercontent {
padding: 12px 0;
}
.clearfloat {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
</style>
</head>

<body>

<div id="contentwrapper">
<div id="columntop"> </div>
<div class="col1">
<div class="content">
<h1>One</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio pulvinar fringilla. Nunc blandit interdum metus. Duis leo nunc, sollicitudin ut, fermentum congue, pharetra eu, massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue tristique eros. Nulla </p>
</div>
</div>
<div class="col1">
<div class="content">
<h1>Two</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio pulvinar fringilla. Nunc blandit interdum metus. Duis leo nunc, sollicitudin ut, fermentum congue, pharetra eu, massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue tristique eros. Nulla </p>
</div>
</div>
<div class="col1">
<div class="content">
<h1>Three</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio pulvinar fringilla. Nunc blandit interdum metus. Duis leo nunc, sollicitudin ut, fermentum congue, pharetra eu, massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue tristique eros. Nulla </p>
</div>
</div>
<div id="columnbottom"> </div>
</div>
<div id="footer">
<div id="footercontent"></div>
</div>
</body>
</html>

jwheck · #9 (**permalink**) 08-14-2009, 09:51 PM

I suggest using the 960 Grid System (type this in your browser: 960.gs) to help with your layout. It's a huge time-saver and is cross-browser compatible.

andthen · #10 (**permalink**) 08-15-2009, 01:39 PM

lol awesome, im forwarding that to everyone in the office on monday!

andthen · #11 (**permalink**) 08-15-2009, 01:43 PM

Thanks everyone, didnt expect such a quick reply to a post, I shall go through these and reond accordingly as soon as I finish my mundane weekend errands!

\cheers

morestar · #12 (**permalink**) 08-15-2009, 06:45 PM

Quote:

Originally Posted by sharonjackson

If my client is in a hurry and I have no time to dick around with css and browsers that hate each other, I use tables. They are stable, they are easy and you don't have to end up biting your keyboard in a rage. If the purists are sneering at you, so what? They aren't signing your paycheck.

Here's to tables!!

Yes and I first, second and third the motion...

Like I've said before, one of the worst things about 'pure' css layouts is that in the future, the next designer isn't only going to have to trace the html but will have to trace whatever was running through the developers head when we wrote his css styles...a table is always a table but a div and span could be almost anything in css and anywhere for that matter too...

andthen · #13 (**permalink**) 08-15-2009, 07:02 PM

CHeers Jwheck thats looks quite interesting, I think I saw something like that a year ago but I think at the time I just surrendered to a table! Taa again

andthen · #14 (**permalink**) 08-15-2009, 07:10 PM

Thanks for the response Sharon - a very good point I totally agree, however for this particular issue I am basically in control of that one div which is supposed to be filled by info about magazines - which get generated via a registration process, anyway I cant in anyway change the outer container or anything else, just that div! Anyway I think someone on the other end just cant be bothered to make a compromise hense muggins over here!

andthen · #15 (**permalink**) 08-15-2009, 07:33 PM

Davuart -

Thats brill thanks for time and effort, however Im only allowed to change one div for that particular proj so that dynamic data can populates different blocks within a two-column format.... yup I know stupid restriction, but I think on monday they may have to compromise and give the go ahead for a complete layout change!

However your layout is a much cleaner version of a similar layout I completed for a site im currently doing for my mate (FOR FREE!), I think I should pretend Im getting paid and up my game!

andthen · #16 (**permalink**) 08-15-2009, 07:47 PM

NJ-

Cheers, Yes I agree about the ID's, Im trying to be a purist! And yes unfortunately I'll still have that problem, my collegue created that markup and asked me to look at the prob so after a redbul and x amount of time later I just gave up, went to the gym and re-assured myself that I am a...well reasonably ok web designer!

andthen · #17 (**permalink**) 08-15-2009, 07:53 PM

lstjean,

CHeers for the suggest, however I think I still get that prob with the more content in one cell effecting the other cells.

andthen · #18 (**permalink**) 08-15-2009, 08:04 PM

Morestar,

Thats cool I gets ya, but for that particular job I had to use a 1 div for dynamic data that needed to fill/display in a two-column layout.

Im still a reletively new designer so I think I just want to do new things and not go back to tables... I actually get angry at the idea of using a table after trying to use CSS lol, like Im surrenduring or something. But yep a good point

BoBoMisiu · #19 (**permalink**) 08-17-2009, 12:55 AM

You could use the interactive Yahoo CSS Grid Builder
please excuse the non link link, I currently have less than 10 posts.
Go to the following -- developer.yahoo.com/yui/grids/builder/

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Regarding Site's cache prob???	govindseo	Google Discussion Forum	2	09-25-2008 09:11 PM
Language Redirect Indexing Prob.	soia15	Search Engine Optimization Forum	9	05-10-2006 05:04 PM
can anyone help with this oscommerce prob?	Biggles	Web Programming Discussion Forum	0	09-30-2005 03:42 PM
Prob with signing up for the WPW newsletter...	mlevenhagen	WebProWorld: Guidelines/Announcements/Suggestions	1	11-29-2004 04:54 PM
Obscuring email addy from bots (prob.Off topic)	writergrrrl48	Search Engine Optimization Forum	3	02-18-2004 12:51 AM