Creating columns using <div>

[Trevor L.]

BlankI have been writing web pages for a couple of months and thought I was beginning to understand HTML/CSS and even a bit of JS

But now I have a basic problem

I want to separate a page into columns, say:
<---------Column 1------------><-----------Column 2---------------->
|
|
|
|
I then want to write code for Column 1 in one block so that all the elements go into Column 1 and then write a block of code for Column 2.

It seems so simple. I tried this:
<div width="100px">
<table>
<tr>
<td>
<a href="javascript:;" onclick="openPopupCalendar();return false;">
<img style="float:right" src="images/calendar.gif" width="34" height="21" alt=''>Calendar
</a>
</td>
</tr>
.....
</table>
</div>

The function executes some JS code for a calendar which works fine.

But the image ("images/calendar.gif") positions to the very right of the page not to the right of the division, i.e. it ignores the width specification on the <div> tag. To get it aligned as I want, I have to put the width spec into the <td> tag.

What do I have to do ?
--
TIA
Trevor L.




I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Chris Leeds, MVP-FrontPage]

Blankthis'll give you a headstart:
http://www.inknoise.com/experimental/layoutomatic.php

hth

--
Chris Leeds,
Microsoft MVP-FrontPage

ContentSeed: great tool for web masters,
a fantastic convenience for site owners.
http://contentseed.com/
--
I have been writing web pages for a couple of months and thought I was beginning to understand HTML/CSS and even a bit of JS

But now I have a basic problem

I want to separate a page into columns, say:
<---------Column 1------------><-----------Column 2---------------->
|
|
|
|
I then want to write code for Column 1 in one block so that all the elements go into Column 1 and then write a block of code for Column 2.

It seems so simple. I tried this:
<div width="100px">
<table>
<tr>
<td>
<a href="javascript:;" onclick="openPopupCalendar();return false;">
<img style="float:right" src="images/calendar.gif" width="34" height="21" alt=''>Calendar
</a>
</td>
</tr>
....
</table>
</div>

The function executes some JS code for a calendar which works fine.

But the image ("images/calendar.gif") positions to the very right of the page not to the right of the division, i.e. it ignores the width specification on the <div> tag. To get it aligned as I want, I have to put the width spec into the <td> tag.

What do I have to do ?
--
TIA
Trevor L.




I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Trevor L.]

Thanks, Chris,

I thought this was going to work for a few moments, but it doesn't

I have this code

In my style.css
#container {width: 660px;
border: 0 ;
margin: 0 ;
padding: 0 ; }

div.column1{float: left;
width: 100px;
border: 0 ;
margin: 0;
padding: 0 ;}
div.column1 td
{vertical-align: top ;}


In my HTML

<div id="container">
<div id="column1">

<table>
<tr>
<td>
<a href="javascript:;"
onclick="openPopupCalendar();return false;">
<img style="float:right" src="images/calendar.gif" width="34" height="21" alt=''>Calendar
</a>
</td>
</tr>
..........

The image still positions to the extreme right of the page, not to the right of the division

Any ideas?
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Trevor L.]

I figured it out

What I now have in style.css is

#container {width: 660px ;
border: 0 ;
margin: 0 ;
padding: 0 ; }

#column1{float: left;
width: 105px;
border: 0 ;
margin: 0;
padding: 0 ;}

And this works fine

--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Chris Leeds, MVP-FrontPage]

as you get more comfortable with the style sheets, you may want to move the code from the actual page to an external style sheet.
this is the best way to go.

HTH

--
Chris Leeds,
Microsoft MVP-FrontPage

ContentSeed: great tool for web masters,
a fantastic convenience for site owners.
http://contentseed.com/
--
I figured it out

What I now have in style.css is

#container {width: 660px ;
border: 0 ;
margin: 0 ;
padding: 0 ; }

#column1{float: left;
width: 105px;
border: 0 ;
margin: 0;
padding: 0 ;}

And this works fine

--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Trevor L.]

Thanks for the help and advice, Chris

I have done that (that is, I have moved the code to style.css and linked it in)

BTW, I realised that the reason it didn't work first time was that I used the style .column1 and not #column1. As I read it, one uses .name in conjunction with class="name" and #name in conjunction with id="name".

Correctomundo ?

--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Chris Leeds, MVP-FrontPage]

That's correct. If you find yourself really liking the css stuff you may want to try the editor (topstyle) from www.bradsoft.com it's really top notch and makes mistakes on the style sheet pretty improbable if you use it's "style sweeper".
I think there's a free download you can try.

HTH
Thanks for the help and advice, Chris

I have done that (that is, I have moved the code to style.css and linked it in)

BTW, I realised that the reason it didn't work first time was that I used the style .column1 and not #column1. As I read it, one uses .name in conjunction with class="name" and #name in conjunction with id="name".

Correctomundo ?

--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html