...

View Full Version : css alignment issue



purekarma
06-12-2004, 01:03 AM
hello, I'm working on a site right now while I wait for the domains and hosting stuff to finish processing, but I've run into a couple problems. I'm relatively new to css so I don't know how to solve them.

I am trying to design a site to have a simple layout so that there is the header at the top, and underneath, the main content. The main content would be divided into the navigation menu at the left and the content at the right. The problems I'm having are:

The site won't stay at the very top (there is a gap between the top of the screen and the container). You probably won't be able to see this on the free hosting service I am currently using.
The navigation menu and content will not go side by side.

Any suggestions?

the temporary site is here:

http://akos91.bravehost.com/

and the stylesheet is here:

http://akos91.bravehost.com/style/style.css

thanks for any help!

bradyj
06-12-2004, 01:32 AM
try adding to your body css:
margin: 0px;
padding: 0px;


That should remove it.

silenus
06-12-2004, 01:36 AM
To get the nav + cont side by side you're gonna have to either float them or absolutley position them. Oh and declare margin/padding: 0 in your style sheet to remove the space at the top of the page.

purekarma
06-12-2004, 04:25 AM
when I tried floating the div's, the nav and content divs were moved out of the container div. I don't know why this happens, though. I've looked on other sites and it seems to have worked fine for them.

the body margin/padding thing worked, thanks. the absolute positioning didn't work either, though.

bradyj
06-12-2004, 07:04 AM
the absolute positioning didn't work either, though.

It should, there may be a little error in how you are writing it. If you post the code, I'm sure we can figure it out:) Glad the first one worked.

mindlessLemming
06-12-2004, 08:21 AM
when I tried floating the div's, the nav and content divs were moved out of the container div.
Floated elements do not cause their parent element to extend.
In normal speak, that means you need to "clear" the floats if you want the parent container to extend.
eg:


<div id="container">
<div id="left"></div>
<div id="right"></div>
<div style="clear:both;><!--needs this--></div>
</div>

Obviously you should reference that style info via a class instead of inline...
The "<!---->" comment is to make mozilla (if memory serves) render the empty div.

silenus
06-12-2004, 02:54 PM
mindlessLemming's right, you need to clear it. But you can do it without the extra div. Check here (http://www.positioniseverything.net/easyclearing.html) to learn how.

mindlessLemming
06-12-2004, 05:04 PM
Doh! I should have remebered that one. After all, I was at the WSG (http://webstandardsgroup.org/) meeting where Tony Asslet (http://www.csscreator.com/attributes/containedfloat.php) announced it :o

silenus
06-12-2004, 05:23 PM
Doh! I should have remebered that one. After all, I was at the WSG (http://webstandardsgroup.org/) meeting where Tony Asslet (http://www.csscreator.com/attributes/containedfloat.php) announced it :o

Hehe. Do the WSG hold meetings in Australia only? I'd love to goto meetings like that here in England.

mindlessLemming
06-13-2004, 03:40 AM
[offtopic]
Yes, unfortunately their meetings are only in Australia, atm. But their mailing list has a an international focus, with many members from UK. (Though I still prefer this forum over any list :thumbsup: )



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum