New to non-table layout trying CSS div layout with difficulties.

Hi folks,

I've been using CSS for style for several years now, but I've never
attempted a layout using CSS. (I'd like to move away from tables)

I'm working on a page here:
http://www.eurekacamp.ca/demo/contact.php
using the stylesheet here:
http://www.eurekacamp.ca/demo/Eureka.css

To describe it as a table. I'm hoping to have a large cell with the
text for a section contained in it. and then a smaller cell with an
image. My problem is I simply can't get the DIV tags to align side by
side. The second div keeps showing up below where the first one
finishes.
I have seen something like this work here on css-discuss:
http://css-discuss.incutio.com/?page=TwoColumnFloat

I don't understand why their example works and my attempt does not.

I appreciate any assistance (and pointers) the community can provide.

Thanks
Greg.

greg.mckone (AT) gmail (DOT) com wrote:

To describe it as a table. I'm hoping to have a large cell with the
text for a section contained in it. and then a smaller cell with an
image. My problem is I simply can't get the DIV tags to align side by
side. The second div keeps showing up below where the first one
finishes.

What two divs are you talking about?

(<div>s are elements, not tags.)

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

On 16 Mar 2006 21:34:07 -0800, greg.mckone (AT) gmail (DOT) com wrote:

Hi folks,

I've been using CSS for style for several years now, but I've never
attempted a layout using CSS. (I'd like to move away from tables)

I'm working on a page here:
http://www.eurekacamp.ca/demo/contact.php
using the stylesheet here:
http://www.eurekacamp.ca/demo/Eureka.css

To describe it as a table. I'm hoping to have a large cell with the
text for a section contained in it. and then a smaller cell with an
image. My problem is I simply can't get the DIV tags to align side by
side. The second div keeps showing up below where the first one
finishes.
I have seen something like this work here on css-discuss:
http://css-discuss.incutio.com/?page=TwoColumnFloat

I don't understand why their example works and my attempt does not.

I appreciate any assistance (and pointers) the community can provide.

Thanks
Greg.

1. (Comment) The sample you provided is nowhere near non-table layout.
2. (Answer) Your #topcontent and #bottomcontent has 60% width each, how do
you expect them to fit side by side in 800px table cell, which is 100% in
your case, where you may have to need 120%?

--
o'tom po'tom

OK, good clarification on "element" versus "tag" thank you.

Yes, I was hoping for a hybrid approach until I wean myself off of
tables.

As I am used to tables, if I have rows. (my page has a table with rows)
in a given row I have 100% to work with, so my "topcontent" has 60% and
my "bottomcontent" has 60% because they are in seperate rows. I'm
working under the understanding that these Divs will live within the
table rows because that is where they have been placed (they are
contained) and that within that row, CSS can be used to layout the
elements in that row.

Does that make sense? I'm well aware of how poorly this page is
working, what I'm asking is why the Div elements won't co-exist side by
side (at the same location vertically on the page) when I'm specifying
widths for the elements that are less than 100% So
"topcontent" should be to the left of "topimage"
"bottomcontent" should be to the left of "bottomimage"

Sounds to me like I should just use tables.
Unless this is really straight forward?

Greg.


Nije Nego wrote:

On 16 Mar 2006 21:34:07 -0800, greg.mckone (AT) gmail (DOT) com wrote:

Hi folks,

I've been using CSS for style for several years now, but I've never
attempted a layout using CSS. (I'd like to move away from tables)

I'm working on a page here:
http://www.eurekacamp.ca/demo/contact.php
using the stylesheet here:
http://www.eurekacamp.ca/demo/Eureka.css

To describe it as a table. I'm hoping to have a large cell with the
text for a section contained in it. and then a smaller cell with an
image. My problem is I simply can't get the DIV tags to align side by
side. The second div keeps showing up below where the first one
finishes.
I have seen something like this work here on css-discuss:
http://css-discuss.incutio.com/?page=TwoColumnFloat

I don't understand why their example works and my attempt does not.

I appreciate any assistance (and pointers) the community can provide.

Thanks
Greg.

1. (Comment) The sample you provided is nowhere near non-table layout.
2. (Answer) Your #topcontent and #bottomcontent has 60% width each, how do
you expect them to fit side by side in 800px table cell, which is 100% in
your case, where you may have to need 120%?

--
o'tom po'tom

I've started my compromise. I've retreated back to tables, but have
used an absolutely positioned graphic (tree on the right side of the
page).

http://www.eurekacamp.ca/demo/contact.php

I liked the effect so much I decided to try it on the left with a div
that holds images (each image 200px wide, the div 200px wide, so they
stack vertically.) I had planned top pop this on the left of the page
and then use the table to bump the text to the right so it didn't
collide. However, I'm seeing the images from the div TWICE. once
they appear as if the stylsheet didn't exist and the second time they
seem to be positioned correctly. These are foreground images. The
stylesheet can be seen here: http://www.eurekacamp.ca/demo/Eureka.css

Thanks for your assistance, sorry for the novice questions, but my css
positioning skill is quite low.

Greg.