rewriting page without the use of tables

[tcjay]

I am trying to rewrite my web page without using tables. When formatting the leftmargin, the blocks are stacked on top of each other rather than down the lefthand side of the page.

I have change it using <DIV>. I am having trouble on the left margin.

The structure is as follows for the left margin.

<DIV id="leftmargin">
<DIV id="leftmarginbox_title">
<P>text</P>
</DIV>
<DIV id="leftmarginbox-item">
<P>text</P>
</DIV>
<DIV id="leftmarginbox_title">
<P>text</P>
</DIV>
<DIV id="leftmarginbox-item">
<P>text</P>
</DIV>
<DIV id="leftmarginbox_title">
<P>text</P>
</DIV>
<DIV id="leftmarginbox-item">
<P>text</P>
</DIV>
</DIV>

#leftmargin{
postion:absolute;
width: 120px;
}
#leftmarginbox_title{
position:absolute;
left:0px;
width:120px;
margin-right: 0px;
padding:10px;
line-height:17px;
font-size : 11px;
background-color: #FF66CC;
color : White;
border-style: solid;
border-top-width: 0px;
border-left-width: 0px;
border-bottom-width: 0px;
border-right-width: 0px;
border-color: #000066;
padding-bottom: 4px;
padding-top: 2px;
padding-left: 4px;
padding-right: 2px;
}

#leftmarginbox-item{
position:absolute;
width:120px;
font-size : 11px;
background-color: Silver;
border-color: Gray;
border-style: solid;
border-top-width: 1px;
border-left-width: 0px;
border-bottom-width: 0px;
border-right-width: 0px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 4px;
padding-top: 2px;
text-decoration : none;
left: 0px;

How do I get it so the blocks are arranged in a column down the page?

[tcjay]

I found the answer. It has to do with layers.

[w3.org...]

[Ryan8720]

You aren't allowed to have more that one instance of an ID per page. You need to change id="leftmarginbox_title" and id="leftmarginbox-item" to class="leftmarginbox-title" and class="leftmarginbox-item". You also need to specify left and top for #leftmargin.

[tcjay]

thanks for the pointer

[tcjay]

Ok.............. I have page reformatted using css with two columns. The second column starts at the bottom and right of the first column. I am not sure how to fix it so they are side by side.

This is the link.
[needlepointbackbay.com...]

[joolsm]

Float the leftmargin div to the left (which should correct the lilac bits being narrower than the grey bits) and the mainbody div to the right.

Also get your doctype correct and then validate your html at [validator.w3.org...]
At the moment it isn't valid. BTW - it's against the Terms of this forum to post url's.

Jools

[SethCall]

btw, your page doesn't show anything but a background in mozilla.

[tcjay]

I have changed my document type and the float but now the second column is of to the right of the page. It looks like there is another column there and it start at in the middle of the page rather than up at the top. The word wrap is not functioning either.

.textarea{
font-family: Tahoma, Verdana, Arial, Clean, Helvetica, sans-serif;
font-size: 12px;
width: 500px;
text-align: left;
border-top-width: 0px;
border-left-width: 0px;
border-bottom-width: 0px;
border-right-width: 0px;
float: right;
}

[joolsm]

I have changed my document type and the float but now the second column is of to the right of the page.

Not on my system it doesn't. Win 98SE in IE6 and Opera 7.2. Resolution 800x600 and 1024x768 both have the left div to the left and the text in the right div in middle of page. Oh, and the grey and lilac bits are still not set to the same widths. The footer isn't positioned properly either - presumably you want it to go across the whole of the bottom of the page, but it wraps round the beginning of the textarea div. Look at the horizontal alignment of the textarea div.

Jools

[tcjay]

My mistake............. my browser window was not wide enough so it was shifted down by default. I widened the footer box so that it would fit rather than slide up the the left side.

[tcjay]

Is there a way using css where the text is uneffected by the size of width of the window. I would prefer that the layout did not change.

[joolsm]

In which case you need a fluid layout. Go back into your css file and use percentage instead of px. A bit of background reading and some homework on css in general might not come amiss.

Also what is the width of this div?

#mainpage{
margin-left:0px;
border-top-width: 0px;
border-left-width: 0px;
border-bottom-width: 0px;
border-right-width: 0px;
position: relative;
font-color: BLACK;
left: 0px;
top: 0px;
width: 500;
height: 662px;
z-index: 1;
visibility: visible;
float: right;
}

What are you going to do if the content of your page is higher than the 662px you have set for the mainpage div? Also your html still doesn't validate as there isn't a valid doctype - try putting

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

at the top of your source code, go to the W3c validator address a couple of posts up and get your html right. Then you might start to get somewhere.

Jools