Positioning Help...

Hey Guys,

I have done more of the site and I took some of your suggestions and "tabbed" my work . Anyway, I have done more and I believe I made a big progress tonight. But it has flaws. So here is what it is meant to turn out like and here is it's current status. Here are my queries and concerns:

1. How do I move the "Clan News" floated table to the top near the other tops of tables?
2. Why does the Clan News <div> have a background and border round it but the other two don't, even though I have used the same code for #rightbox and .divleftbox
3. How do I get an outline around the content div?
4. What’s wrong with my current code for the height and width, basically why won't it have a set height?

Thanks to anyone who helps .

Images arent uploaded, hard to see whats going on.

This is the correct link to the website: http://www.xbox360corner.com/clantemplate/ :P

Question 1:


Question 2:

In your HTML document, change:
id="leftbox"
to
class="leftbox"


Question 3:

Question 4:

Your current code consists of no height value since your website can expand vertically to infinity. You need a width since your website is a fixed layout (cannot expand to cater for the browser).

Argh, don't use spacer images! Use a repeating background and margins on the images.

How do I move the "Clan News" floated table to the top near the other tops of tables?

Well, you have to set RightContent to float, not RightBox.

You shouldn't have to use the float: attribute
and should be able to position with absolute
realative positioning.

Use these attriubutes for positioning:

margin http://www.w3schools.com/css/css_reference.asp#margin padding http://www.w3schools.com/css/css_reference.asp#padding

If you use the position:relative attribute to a div you will
have to make a duplicate with the same dimensions inside
of that div and set it to position:absolute; inside of that div
so you can position the content inside.

<div id="relative"> <div id="absolute"> (use the padding here) <div id="content"></div>(use the margin here) </div> </div>

Originally Posted by Techno [*]How do I get an outline around the content div?

border:0px solid #000000;

Add or subtract where the border is applied after
the border is assigned.

border-right-width:0px; border-left-width:0px borer-top-width:0px border-bottom-width:0px

_|

Tried all the things you suggested but the box won't float at the top... Can you help?

http://www.xbox360corner.com/clantemplate

Ok....I've gotten it to work...

One of the things I'd like to point out about CSS is that it's intended to reduce redundant information...so having all those margin & paddings set to 0 in each div ID is redundant, they can all be replaced by the code below:

the * just like in searches indicates all...so everything will have a padding and margin set by default to 0, including the body and all child divs. Only when you then change the div padding/margin does it change.

I'm uploading the modified css I've added it here as a txt file. I just changed the style sheet so that should be all you need.

You will notice that I have empty ID Divs in the CSS, that is because I didn't want to remove them just in case you were going to change any styling there and all that was within them was the margin/padding:0 which is unnecessary

The real problem was that you needed a clearing div after your left floated div. In the page between your left and right content you should have a

Since you wanted something to float on the right of it you need to clear right as below:


I also added an margin-bottom: 18px to the #rightbox as it was sitting ontop of your footer.

Hope this helps

Attached Files

style1.txt (1.2 KB, 1 views)

Put the rightbox BEFORE the leftbox.

<div id="rightbox"></div>
<div id="leftbox"></div>