Aligning <dlv>s and text within them

[InvaderGIR]

Ok, so I'm slowly building my site, using Photoshop to create the image side of things and Textpad to do all of the code (hate using anything other than code - also how I've been taught at uni).

My problem is that I have two <div>s a left one with the main content, and a right one with secondary content...but they either both display in the center of the page, or when I get them in the right positions I use 'float: left/right;' in the css file, which messes up the whole layout of the page...

http://www.finaldecap.com/Concept52/

The above link shows my site with the content in the correct view sections, but as you can see the backing image and the secondary links for the navigation which should be at the bottom are messed up.

http://www.finaldecap.com/Concept5/

The above link shows it how it looks if I am using proper coding in the css...ie not using float, as it's a tricky customer.

The only differnce in the code in both the html and the css is the fact that one page has float and the other doesn't

I don't like to use tables <tr>/<td> etc. If I have to I will, but I'd rather is was a simple site.

If needed I can post the code of the site.

InvG

 

[Boov]

can see the code for the sites you both posted by looking at the source.

secondary links for the navigation which should be at the bottom are messed up.

can be solved like this...

#foot {clear:both}

as for the other problem todo with your left and right content areas.

#main {float:left;width:500px;background:#F00}
#right {float:right;width:224px;background:#0F0;margin:0 20px 0 0}

amend your css to add the above rules.

i added the background colors so your can see exactly how much space each content area takes up, so you can keep increasing the size of #main until your get it perfect, then just remove the background color. i added the margin to the #right to cater for the shadow effect you have on the right of your design, i just guessed at 20px, but you can fine tune this with the help of the temp green background.

 

[InvaderGIR]

Sorry it's taken so long to get back toyou on this, but thank you very much, that has cleared up the problem with the text's places well.

Now I have the problem of the repeating background, well, not repeating.

In IE it works correctly, but there is a wrongly spaced gap above the menu bar, and in FF it doesn't repeat, but has the menu bar in the correct place.

The most up-to-date version is here: http://www.finaldecap.com/Concept5/.

InvG

 

[Augmented]

Now I have the problem of the repeating background, well, not repeating.

You need to clear the floats (#main and #right). There are two common methods. Either

#center { overflow: auto;}

or

#backgroundend { clear: both;}

If you don't need the #backgroundend element, use the first method and remove that <div>, else keep it and use the second method.

 

[InvaderGIR]

Cool, thankie...they really don't teach much helpulness in first year computing at uni.

InvG