[SOLVED] Trying to learn to use divs instead of tables

[jordanwb]

For reference see http://99.224.95.32/div, there are five areas. Area 4 is to show below area 1, but be wider than area 1. Area 5 is to show below area 3 but we wider. Area 2 is to show up between area 1 & 3. See the attached picture to see what I want to do.

 

Thanks.

 

[attachment deleted by admin]

[haku]

I assume that you want to know how to do this (you didn't ask a question).

 

Google '3-column layout alistapart' to get a good 3-column layout for the top half, and then add two divs underneath it using a 2-column layout technique. Just keep them entirely separate.

 

I should warn you though, that you will probably find this fairly difficult if you are new to CSS. It's not an easy layout you have chosen there.

[jordanwb]

I'm not new to CSS but I'm not pro.

 

I assume that you want to know how to do this (you didn't ask a question).

 

My bad. Yes that's what I was asking.

[jordanwb]

I was able to do this: http://99.224.95.32/div/index.htm with only tables. I didn't think you could do column spanning like that. Still I'd like to figure out how to do that with div's because I've read that using tables for layout is bad style, even though I don't see why.

[haku]

You must be developing on a small monitor, because that layout you designed falls apart on a 1024x768 monitor and above. It doesn't look the way you want.

 

 

[jordanwb]

My monitor is set to 1280X1024. If you mean it breaks by one div goes out of the border of it's parent div then yeah that happens on my PC.

[haku]

It looks like the attached file.

 

Actually, as you had been talking about tables, I thought you had done what you wanted on tables, and didn't look at the code to realize you had done it with CSS.

 

[attachment deleted by admin]

[jordanwb]

That's more or less what I get. I got what I wanted with tables though: http://99.224.95.32/div/index2.htm

 

[attachment deleted by admin]

[yanivkalfa]

well its Pretty simple mate ...

First Creat your main frame size -- the size that your whole size be in for e.g 1024 /768 .. or what ever by makeing  a big div like this ...

 

#Bigframe {
Position:reletive;
Hight:769px;
Width:1024px;
}

thats will make you big frame .. -- just check my spelling laters thoughs .

then you make the smaller Frames the way you want ...

 

#Fram1 {
left:5px;
Position:reletive;
Hight:100px;
Width:500px;
}

#Fram2 {
Left:510px;
Position:reletive;
Hight:100px;
Width:500px;
}
#Fram3 {
Left:xxx  what ever works for you 
Position:reletive;
Hight:xxxx what ever works for you 
Width:xxx  what ever works for you 
}
#Fram4 {
Left:xxxxx  what ever works for you 
Position:reletive;
Hight:xxxx  what ever works for you 
Width:xxxx  what ever works for you 
}

 

as simple as that then in the body you just call this Frams to appear by divs or what ever you like Span / P/table/ allmost everything will work i thinks

[body]
<div id="Bigframe ">
<div id="Fram1"></div>
<div id="Fram2"></div>
<div id="Fram3"></div>
<div id="Fram4"></div>
</div>
</body>

 

thats it basicaly and just put what ever you like inside this dives

 

[jordanwb]

All right thanks bud.