Blog Documentation Book a Demo
Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

CSS Trickstery

KosmoKosmo
edited October 2005 in Vanilla 1.0 Help
Usually I solve these kinds of problems, but I think this time I have been staring the code way too long since I just can't figure out what gives.

Basically the problem is that I have two sections wrapped in divs, one is navigation and one is the main section where all the data is presented. The Navigation is supposed to start right from the top of the window and the main section is supposed to start 60px down.

But for some reason the main section is dragging the navigation section down with him, and I just don't know why it is doing that. The solution to this might just be stupid easy but I'm just can't seem to figure it out.

#sidebar { position: absolute; left: 0; width: 170px; padding-left: 20px; padding-right: 20px; } #content { font-size: 100%; margin: 60px 0px 0 210px; padding: 0px 20px 0 20px; width: 60%; }

Comments

  • 3stripe3stripe ✭✭
    would floating one of the divs to the side help?
  • KosmoKosmo
    edited October 2005
    No, the bugger still drags the navigation section down. :edit: And I actually tried it so that both of the sections would start from the top but the main section would have padding-top: 60px; but it didn't help because for some reason then there is this 10px gap at the top of the page.
  • 3stripe3stripe ✭✭
    I was thinking about CSS last night. Love it to bits but as I'm still just a beginner I also hate it a lot of the time, so frustrating to fix, even when you know all it is is pure logic (well most of the time it is)
  • KosmoKosmo
    Well, CSS itself is very simple and easy as pie, but it is the browsers that fuck everything up.
  • 3stripe3stripe ✭✭
    You can say that again
  • KrakKrak New
    Is this for WordPress?
  • KosmoKosmo
    edited October 2005
    Nope, it's for textpattern, much more flexible publishing platform and better for my client.
  • stuartstuart
    If you can toss a link up I'll take a look for you.
  • KosmoKosmo
    If you want I can put the whole CSS file (which isn't that many rows at the moment) right here if you want, I can't give you the link to the site itself since it is in a private server.
  • NickENickE New
    edited October 2005
    Dangit, that approval thing is annoying... Anyways, as I would have posted several hours ago if I was able, I find that when I have two or more divs that are meant to be next to each other, the one(s) that are positioned absolutely have to be actually coded in the HTML above the other(s) in order for it to work. So I suppose, if the #content div is before #sidebar, you could try switching their order and seeing what happens.
  • KrakKrak New
    Thats why I asked if it was WordPress. When making my themes for WP I have had similar issues with the content and the sidebar.
  • timberfordtimberford
    kosmo, just add top:0; to the #sidebar rules.
  • KosmoKosmo
    Cool timberford, that did the trick. Always when I build sites I put the navigation div before content no matter where the navigation is going to be in the final version, because when you take the styling off, the navigation should be the first thing you see.
  • KrakKrak New
    I will have to remember this. /me writes it all down
  • KosmoKosmo
    Sorry to bump this but the same two boxes cause me grey hairs again.

    The succesfully top aligned sidebar doesn't play nice with my footer, since the sidebar isn't floated and it's position is absolute the footer will slide right under it and clear:both; doesn't help a bit.

    Problem shown below (sorry if the image is too big.)

    image
  • timberfordtimberford
    edited October 2005
    well this is the problem with using absolute positioning. are you sure the nav bar requires it?

    you could put a height on #content, but i would have thought you would want that to grow/shrink with the text. you may get away without putting a height on the content div if you can be sure there will always be enough text in there to clear your sidebar.
  • KosmoKosmo
    I went through the site design and I tought that I could put enough text to the content div to stretch the lenght of the nav minimum, but then I noticed that I have news items in there, and I kinda like to have single news items there too just in case there is a long article about something, so it's there just in case so the news page doesn't stretch too long. I tried to take off the absolute positioning, but then the problem of the sidebar element wanting to hang around with the content element popped up again. I have started to think about three column layout, I could fit search and something mildly useful in there, maybe google ads or something, and I could make that so long that it would be longer than the sidebar. But I have to look in to some options.
  • KosmoKosmo
    Again, it took some figuring out, but I changed the whole thing around, I ditched the stupid absolute positioning in favor of floated design. The nasty problem of top margin reared it's head again, but it just went away when I added padding-top to the content element, apparently it seems that the infamous negative padding can be fixed by just addign padding to the top, I tried it with adding just 1px of padding to it and the content element went flush with the top of the page, what a strange thing to do. I just hope that my site design works with older firefoxes. But clear water, I'm not out there yet.
This discussion has been closed.