two column layout

[al jones]

I'm getting in over my head - as always. Tried to take a two column layout
and put something together for a friend who needs a website for his youth
group soon!

url is: http://aljones.us/rsrc/index.htm

Would someone please tell me why I can't seem to get the second column to
show up on the right hand side of the page?? This is obvioulsy a borrowed
template which I've screwed up and just for starters, I need some immediate
help, please.

//al

 

[dorayme]

I'm getting in over my head - as always. Tried to take a two column layout
and put something together for a friend who needs a website for his youth
group soon!

url is: http://aljones.us/rsrc/index.htm

Would someone please tell me why I can't seem to get the second column to
show up on the right hand side of the page?? This is obvioulsy a borrowed
template which I've screwed up and just for starters, I need some immediate
help, please.

//al

You could try reversing the order of the left and right col in
the html. That would start to get you somewhere on this. But
really, your code looks awfully complicated ...

Suggest you simplify to troubleshoot your site: do what I say
above to begin with just to see, then get rid of every single
element within #leftcolumn, just put your Lorem words. Ditto the
right col.


A good general rule is this, you float some box left or right and
set a width for this float (esp if it is a nav col). You then set
a margin for your content to the left or right (depending which
way you float the other box) that is just a tad more than the
width. Good starting position. What then can muck you up is
content that cannot wrap and is too big to sit on side. But I
don't think this is your problem. Your problem, if I may say is
that you are lost with too much code and too much complexity.

 

[Jonathan N. Little]

I'm getting in over my head - as always. Tried to take a two column layout
and put something together for a friend who needs a website for his youth
group soon!

url is: http://aljones.us/rsrc/index.htm

Would someone please tell me why I can't seem to get the second column to
show up on the right hand side of the page?? This is obvioulsy a borrowed
template which I've screwed up and just for starters, I need some immediate
help, please.

//al

display : inline AND float : right; <<the float will undo the inline.


/* on left put the float back ON */

#leftcolumn {
width : 20em;
float : left;
....


/* on the right REMOVE display : inline; AND the float : right; */

#rightcolumn {
/*
add left margin to right column =
[width of left column] + [whatever margin desired for right column]
*/
margin-left: 21em; /* gives 1em left margin */

....

 

[al jones]

On Thu, 08 Mar 2007 17:01:00 +1100, dorayme wrote:

You could try reversing the order of the left and right col in
the html. That would start to get you somewhere on this. But
really, your code looks awfully complicated ...

Suggest you simplify to troubleshoot your site: do what I say
above to begin with just to see, then get rid of every single
element within #leftcolumn, just put your Lorem words. Ditto the
right col.

A good general rule is this, you float some box left or right and
set a width for this float (esp if it is a nav col). You then set
a margin for your content to the left or right (depending which
way you float the other box) that is just a tad more than the
width. Good starting position. What then can muck you up is
content that cannot wrap and is too big to sit on side. But I
don't think this is your problem. Your problem, if I may say is
that you are lost with too much code and too much complexity.

That's what I get for grabbing a template 'that looks good' so I can put up
something for him quickly. The group has had a registered domain since
last July - and with a rodeo coming up late this month they *have* to have
something up *NOW*! I thought I understood most of what I was seeing, but
I agree the code seems to be overly complex. Have to get to my day job,
and then go get content from him so I can put something more in there
besides spaceholders.

And, yes, I plan on removing a lot as I put it together ....

Thanks //al

 

[al jones]

On Thu, 08 Mar 2007 01:05:27 -0500, Jonathan N. Little wrote:

display : inline AND float : right; <<the float will undo the inline.

/* on left put the float back ON */

#leftcolumn {
width : 20em;
float : left;
...

/* on the right REMOVE display : inline; AND the float : right; */

#rightcolumn {
/*
add left margin to right column =
[width of left column] + [whatever margin desired for right column]
*/
margin-left: 21em; /* gives 1em left margin */

...

Thanks for the very specific guidance. Yep, that did it; now to go get
some content and see what I can do with it. This is quite probably going
to be a one page site - since that's what they're paying for ($0.00) but
he's a friend in need ....

//al

 

[Andy Dingley]

I'm getting in over my head

http://brainjar.com/css/positioning/

Looks like something was floated, but you're missing an element (maybe
<br style="clear:left;" >) after it to stop the image hanging out the
bottom of the container <div>


The template looks pretty clueless to be honest.
* It's XHTML
* It claims to be valid
* It has links to validators
* It places inlime elements (like <img>) in what's really a block
context.
* It uses class="blue"

None of these are inherently wrong, but they're strong hints.

 

[Bergamot]

display : inline AND float : right; <<the float will undo the inline.

I think that may actually be a kludge for IE, to avoid one (or more) of
its many float bugs.