problem with using DIV in layout...

[tylerjca]

Okay, I've been trying to use DIVs for layout purposes since I understand they are the better and "more efficient" way. The problem I'm having is I'm trying to get the same effect that would otherwise be MUCH easier and quicker using a table...

Since with <td>'s, they only go to a new row when you use <tr>, it just keeps adding cells to the right and never "carriage returns" (for lack of a better term). I want to have the same effect with DIVs, but I don't know how to it.. I'm using the float: left method, but when an element within the next div is set to 100% (such as tabular data within a table), the whole element is brought underneath the floating DIV, rather than span 100% of the remaining space on the page... how can I AVOID this? If there's no easy way, I see no reason NOT to use tables in layouts. They're cleaner, they do what you want them to, and you don't have to fuss with a lot of CSS to get everything to line up properly.

Mind you, I do find it better to use DIVs in a layout because just with CSS, I can completely change the way everything is set up. I sometimes use DIVs for a 2-pane or 3-pane layout, but only when I know the person's resolution isn't going to be lower than 1024 x 768. Otherwise, all the DIVs pile over top of one another when the an element in the center is wider than the remaining space.. or set to 100%.

ANYWAYS... if anyone can help me out with this, that would be great..

Thanks in advance :thumbsup:

[TripperTreats]

I understand your frustration. I asked the exact same questions as you when I first switched from tables to divs. But I assure you, if you spend several hours learning CSS, these problems will go away, and you will never look back. It's just a matter of knowing how to make divs line up how you want, which is usually just a matter of one or two style properties.

For your question, it depends on what you are trying to achieve. If you are trying to have two columns, with the second one spanning the remainder of the space, try this:

#col1 {width: 20%}
#col2{margin-left: 20%}

or

#col1 {float: left; width: 20%}
#col2{width: 79%}

I used 79% because IE does silly things with scrollbars and adds extra space to the sides of the body. Very annoying. Let me know if this is not what you wanted. If not, there are equally easy ways of achieving what you want. Please believe me (and countless others) who say that CSS and divs beat tables for many reasons.

[ronaldb66]

I see no reason NOT to use tables in layouts. Then, by all means, stick to them, at least until your understanding of CSS reaches a level where you stop thinking table rows and columns and start thinking positioning.

It would help though if you could give a clear example of what elements your page contains and how you want them to be layed out; perhaps we can give you some pointers based on that.

By the way:
only when I know the person's resolution isn't going to be lower than 1024 x 768. No table layout is able to provide a 100% solid solution for a wide range of window sizes either; whether one uses layout tables or CSS positioning, choices have to be made which affect how a page is rendered at various window sizes/resolutions.

[Graft-Creative]

when an element within the next div is set to 100% (such as tabular data within a table), the whole element is brought underneath the floating DIV, rather than span 100% of the remaining space on the page...

This is probably because the table such is calculating 100% based on the width of the viewport, rather than it's parent element (presuming you didn't set a width for the parent div?)

Try removing the 100% rule from your table - it's not needed anyway - this should (hopefully, depending on any other variable there may be in your layout) make the table take up only the remaining screenspace, and keep its parent div floated at the same time.

Kind regards,

Gary

[tylerjca]

okay i think i'm getting a hang of this.
I've done the following, and it works. I have a "main" div surrounding the left and right divs, so i found setting the right div to 79% wouldn't span the whole remaining width. Setting to 100% got it working even with a table within it set to 100% as well.

#left{
float: left;
width: 20%;
}

#right{
width: 100%;
}


So thank you all who replied. Greatly appreciated!