Trouble positioning DIVs with CSS

Factual Questions
1

I am trying to create a three-column layout of a webpage, using <div> tags and CSS to lay it out.

I cannot use absolute positioning because I want the page to be centered regardless how large the browser window is. The overall container <div> is set at margin-left: auto and margin-right: auto to achieve this.

I have tried relative positioning the column DIVs, by setting the height and width values of the DIVs (height:400px; width: 235px; ), then using left:245px and top:-400px.

Ironically this works fine in IE, but in Firefox, the top of each successive column is slightly lower than the previous one. I’ve tried it without defining the column heights, too, with the same result.

I’m about to give up and use a table (sigh), but I’d really like to figure this out.

Thanks.

2

Float and Clear.

My advice: don’t use any positioning - relative or absolute. Just float in the correct order, and clear in between floats. Schematically this is how I do it:

<BIG ENCLOSURE DIV (screen width)>
<SECOND ENCLOSURE DIV (total content width, containing margin:auto commands)>
<CENTRAL DIV></DIV>
<clear>
<LEFT-HAND DIV (float left)></DIV>
<clear>
<RIGHT-HAND DIV (float right)></DIV>
<clear>
</DIV SECOND ENCLOSURE>
</DIV BIG ENCLOSURE>

The piss-poor implementation of CSS between browsers is the reason I still use tables even now, 15 years since I began doing this kind of thing.

More specific advice here.

3

Aha.

I’d been trying floats, but floating right from the left-most column instead of floating left and right from the center column (which, needless to say, created a mess instead of a set of columns).

I’m keeping the table for this one (since there’s a second section in each column that also has to line up across the top – and I really need to get this out the door); but I’ll keep this in mind for next time.

Thank you.

4

If I can hijack Kaio’s thread, maybe someone can give me some help with a CSS issue as well.

I have two types of divs… The first is



.credits {
   font-family: 'Courier New', 'Lucinda Console', Monospace;
   font-size: small;
   text-align: center;
   width: 45%;
   padding: 2px;
   float: right;
   margin: 10px 0px 10px 10px;
   border: 1px solid #EBEBEB;
}

and the second



.comments { 
   margin: 20px 10px 5px 10px; 
   padding: 5px;
   border: 1px dashed #EBEBEB; 	
}

These work fine in most cases. The problem comes when a credits div floats next to a comments div. The text in the comments div correctly flows around the credits div but the border for the comments div does not; it overlaps the credits box.

Here’s a link to a page showing the problem (It’s my Lost blog; look about halfway down the credits box.)

Am I missing something obvious here or is this supposed to be the way it works? Any suggestions? Thanks.

5

Your .comments DIV is expanding to fill its container, which is the .content DIV. Because of the float on the .credits DIV, .comments ignores it completely.

Try messing around with changing the comments DIV display: element to “inline” from its default setting of “block”. That will wrap the DIV around the text and treat the entire DIV as if it were one character. More here. Problem is that it will hug the text no matter how long or short it is.

The alternative is to float .comments left and give it an absolute width. And you have to pay attention to which order they appear in within the code or they’ll give you unexpected results.

I’m sure there are people who know more than me about this and would disagree, but in my opinion - many years of working with the shit - it’s a fool’s errand to make elegant CSS if you’re just trying to bang a design out. If you’re doing it for its own sake, knock yourself out.) Tables do what you expect them to do (usually) and are about 20 times quicker and easier to implement.

6

Are you learning this from scratch or do you want to do it the way the pros do, by copying each other? :smiley:

Go here —> CSS layouts - Max Design

Tried and true code by one of the gurus in the field.

7

Tried a couple of jjimm’s suggestions with varying success. Changing the .comments div to inline produced some very bizarre formatting (left and right border appeared above and below text, top and bottom borders vanished).

Adding a float: left to the div sorta worked but short comments elsewhere wound up with non-comment text flowing around them which wasn’t what I wanted to happen there.

I know I can use tables to tweak the exact formatting I want but I’m kind of determined to figure out how to make CSS do what I want here. Call me stubborn.

8

OK, I’ve found a kludge that sorta solves my problem. If I set a background in my .credits div then it covers up the border of the .comments div behind it. This at least looks a bit cleaner even if it isn’t exactly what I wanted. Thanks for the help.

9

As always try Dynamic Drive and look at the CSS templates. Or you can ask their forums too