PDA

View Full Version : Issue seperating divs



noneforit
Jan 30th, 2010, 11:38 PM
Hello

Havent posted in a while

Test version is here

http://www.noneforit.com/test/

Basically, I want the links to sit above the large box as opposed to in it if that makes sense.

I have tried margin and padding top but the links seem to want to nest themselves in the box instead of above it

Any help would be appreciated

Cheers

Excavator
Jan 31st, 2010, 02:20 AM
Hello noneforit,
Your ul is collapsed until you clear the floated li's.
Try adding this bit in red -

#links ul
{
width:700px;
margin:50px auto;
overflow: auto;
}

Read about clearing floats with overflow here (http://www.quirksmode.org/css/clearing.html).

mbaker
Jan 31st, 2010, 04:57 AM
To have your navigation bar appear immediately above the border box you could try adding to #wrapper clear:right; (in green below):


#wrapper
{
width:700px;
height:500px;
margin:0 auto;
border:#804000 4px solid;
clear:right;
}

noneforit
Jan 31st, 2010, 11:17 AM
I used overflow:auto and this made the links appear above the wrapper which is good.

Now there is a huge gap between the two, I need to links to sit flush against the top of the wrappper

Tried clear:right as suggested but this didnt seem to have any affect

Have updated the test version in the link above

Cheers

abduraooft
Jan 31st, 2010, 02:43 PM
Is that site down?

noneforit
Jan 31st, 2010, 02:47 PM
Yeah it does appear to be

My web hosts site is down and another domain I host with them is down :confused:

Not sure who I need to contact

Excavator
Jan 31st, 2010, 05:01 PM
I used overflow:auto and this made the links appear above the wrapper which is good.

Now there is a huge gap between the two, I need to links to sit flush against the top of the wrappper

Tried clear:right as suggested but this didnt seem to have any affect

Have updated the test version in the link above

Cheers

Your putting that gap in with this bit highlighted in red -
#links ul
{
width:700px;
margin:50px auto;
overflow: auto;
}

If you don't want top and bottom margin both to be 50px, write it like this - margin: 50px auto 0;

When writing it shorthand (http://www.spoono.com/csst/tutorials/tutorial.php?id=5) like that it goes clockwise - margin:top/right/bottom/left;
In your case, when you don't specify the bottom measurement it assumes the same as top.


ps. Your site is down for me too.

Excavator
Jan 31st, 2010, 05:10 PM
Tried clear:right as suggested but this didnt seem to have any affect



No, clear:right; would not have much affect in this case. That is for stopping the affects of float and that's not your problem.
See what the clear property (http://www.w3schools.com/Css/pr_class_clear.asp) is for.

An example would be 2 images floated left with text flowing on the right of them. If you want the 2 images on seperate lines, instead of side by side like the float:left; would put them, putting clear:left; on the second image would make it go down to the second line because it would allow nothing on it's left.

noneforit
Jan 31st, 2010, 06:31 PM
Thanks very much Excavator, i knew it would be something obvious that I was missing :thumbsup:

Have emailed the webhost but its been down all day...not happy :mad: