force content to align top

summary:

When an object is too wide, it automatically skips below the sidebar.

force content to align top

scottplan 1196689194|%e %b %Y, %H:%M %Z|agohover

Not sure if this is a "themes" question or if there's another trick I could use here.

I've now used a table to lay out my frontpage. I want the table to fill out as much space as the browser window allows. But when the window is narrow, the table jumps below the sidebar. If someone doesn't think to scroll down, it looks like there's no content in the page's main body.

Is there a way to force the table to the top of the screen, beside the sidebar? If the window is too narrow, then the rightmost portion of the table should simply be out of view.

It seems like the solution should be in the css somewhere — maybe a general bug fix — because I can't think of an instance where it makes sense to orient a page that way.

Re: force content to align top

PizzaGeek 1196724193|%e %b %Y, %H:%M %Z|agohover

This thread may offer some help:

http://community.wikidot.com/forum/t-25622

Is your site public so we can see the issue?

-Ed

Re: force content to align top

scottplan 1202445916|%e %b %Y, %H:%M %Z|agohover

Clean, uncluttered, hassle-free layout is one of wikidot's big strengths. But here's my frequent headache with layout. It seems to be true of most (all?) of the standard wikidot themes.

With wider, blockier elements, whenever the window's width is smaller than the combined width of (sidebar + main-content elements), those elements jump down below the sidebar.

The result is a large blank space. At lower screen resolutions (when this is most likely to happen), it's not even clear to users that the page has any content at all.

I'd like to set my css to ensure that the (sidebar + main-content) sections have a minimum width. I think the effect would be to force-justify the content to the top. For narrower windows, the content on the right would be out of view, but that's clearly preferable to having it jump down where it's entirely out of view.

It's not enough to set the minimum width of the main-content section, because it still floats independent of the sidebar. Maybe if css treated the sidebar and main-content as a unified section instead of as independent sections? It's also not enough to simply set the width, because I'd still want the content to fill a wider window.

Also, a narrower screen will push the header's search field into the title, so it feels cluttered. I'd prefer to have the header also respect a minimum width.

If someone can point to a custom css fix, that would be so great. It also seems like this merits a general css fix. Sidebars are such a common website feature, and I don't think I've come across this glitch elsewhere.

I think lots of people have had this issue — here, here, here, and here.

Any insights? Thanks.

Re: force content to align top

scottplan 1202446693|%e %b %Y, %H:%M %Z|agohover

Oh, and it happens in IE7 (of course) — doesn't seem to happen in Firefox. But 50% of visitors to our neighborhood wiki use Exploder.

S.

Re: force content to align top

scottplan 1202608713|%e %b %Y, %H:%M %Z|agohover

While I'm patiently waiting for my css savior to come along and respond to my posts, I'm slowly figuring some of this out.

For instance, I've learned that many web designers don't have much nice to say about Internet Explorer.

I've also started to understand the geometry and logical puzzles of wikidot's page layout. It's a series of nested boxes, kind of like this:

container In css, wikidot already sets a minimum width for this box (600px), but it seems neither IE nor Firefox respect this universal min-width (?) header I've set min-width to 750 here, which means the search field no longer collides with the site-title. On other wikis, this width would vary depending on the length of the title. For me, this seems to be a fix with no downsides. content-wrap In the screen shot, the page-content elements have skipped down below the sidebar, because (sidebar + non-breaking page-content elements) are wider than the window. I want these wide elements to simply extend beyond the window's right edge. So I've set the min-width for this box at 950px. sidebar If this chart were accurate, then I still don't see how this bug could happen. When page-content jumps, it's to the bottom edge of the sidebar's content. With text in page-content, I've noticed there's a slight jog to the left as it wraps around the bottom of the sidebar. Is this where the fix lies? main-content But this box contains more than just page-content. By setting content-wrap's min-width at 950, all the other frames (breadcrumbs, all the buttons, and action items) also fill 100% of the main-content width, so now they also run off the edge of narrower windows — not good. page-title breadcrumbs page-content This is the frame I'm most focused on. When it has wide elements and is viewed in a narrow window, how to keep those elements from jumping below the sidebar's content? If (sidebar + non-breaking elements) are wider than 950px, then this box will still skip to the bottom of the sidebar. page-info page-options buttons gotta see all those buttons action item This is where all those wiki-features appear — the editor, the history list, tags, etc. For me, these features always appear beneath the sidebar. Maybe it's the same bug, just not as obvious? By setting a min-width for content-wrap, these features also extend off the window's right edge — not good. footer ("Hosted by Wikidot.com", etc.)

So does anyone have a straightforward fix? Or should I just blame Microsoft and live with it?

Re: force content to align top

Craig Macomber 1202609141|%e %b %Y, %H:%M %Z|agohover

Feel free to blame Microsoft, but I think it is a different Internet Explorer buy than you might think. I have seen an issue where clear floats went below the nav bar, and this was caused by my CSS being screwed up and the nav bar overlapping the body a tiny bit (This happened in all browsers and was my fault). It could be the Internet Explorer is screwing up the location or size of some of the elements which might somehow cause the problem. I suggest tweaking the sizes and positions. A good way to start would be to compare the locations of the nav bar in Internet Explorer and another browser to see which way (if any) it has moved and try to compensate.

Re: force content to align top

scottplan 1202628675|%e %b %Y, %H:%M %Z|agohover

Bingo.

I had some minor customization, so I reverted to the standard theme just to be sure. The problem is there too. Then for the heck of it I tried out a bunch of other themes. Same problem.

In the base css, the side-bar is floated left. I'm pretty sure the custom css below positions the sidebar absolutely. But here's a head-scratcher — top: 0 locates the bar where I'd expect, right at the top; top: 1 (or any other positive integer) drops it down to where I want it. No complaints there, but I don't get it.

Here's the custom css that seems to have fixed it:

#side-bar {
    position: absolute; top: 1; left: 20px;    
}

… and here's the code for keeping the search box clear of the site's title:

#header {
    min-width: 750px;
    width:expression(document.body.clientWidth < 750? "750px" : "auto");
}

Thanks for the suggestion Craig. It's taken a lot of drilling down and analysis for me to arrive at that one line of code, but hopefully it's an elegant solution.

Re: force content to align top

scottplan 1202633170|%e %b %Y, %H:%M %Z|agohover

…Not yet so very elegant. Now the footer doesn't respect the bottom of the sidebar.

I'll sleep on this one. Good thing this wiki doesn't have too many short pages.

Re: force content to align top

Phil Chett 1202682042|%e %b %Y, %H:%M %Z|agohover

As far as i can ,make out, as soon as you start using divs in a page, then things start to go wrong with the page layouts. The size of pictures is an important factor to consider as well.

I use divs only when really needed. Hopefully in most cases tables will do the trick. (IMHO). I also tend to go for smallish pics.
But then you have to consider what you are going to put in each cell. Thought must be given to what will happen to the content on resizing.

All i can tell you for sure, is that after spending hours apon hours of getting the code to do what you want, as in, looks ok in ff and ie7, as soon as you use ie6 it all goes to pot, which i have found on more than one occasion to make me the same :-)

Re: force content to align top

scottplan 1202684416|%e %b %Y, %H:%M %Z|agohover

Thanks Phil.

My stash is much less interesting, so I just keep plugging away.

You're right about different IE versions. When I narrow the window in IE6 and the min-width limit kicks in, everything freezes up. So much for that "fix"…

Meanwhile, I'm now floating main-content right and adjusting margins. With sidebar and main-content pulling in opposite directions, it seems to be working. But I've got to check it out in other browsers first.

Re: force content to align top

burr 1202719818|%e %b %Y, %H:%M %Z|agohover

Here is a site that has the functionality that you are after: http://www.digital-web.com/ Hopefully you can figure out what they are doing to achieve that functionality, and then apply it to your site.

Re: force content to align top

scottplan 1206321815|%e %b %Y, %H:%M %Z|agohover

After ignoring this issue for awhile, I finally got fed up and came at it from a different angle.

This CSS problem in IE6 and 7 is all tied up in variable window widths. So I just constrained the overall width of the page to ~800 px, which is as lo-res as screen settings come, I guess. It's easier to read text in narrower columns anyway.

I added this into my custom theme, which extends flannel ocean. I haven't tested it fully, but so far, it seems to look OK in IE7 and Firefox. I've mixed em and px widths pretty liberally, so any misalignments are probably because of that.

#container-wrap {
    background-color: #ccc;
}

#container {
    background-color: #fff;
    width: 812px;
    margin: 0 auto 0 auto;
}

#header h1{
    margin: 0 0 0 -60px;
}

#header h2{
    margin: 0 0 0 -60px;
}

#content-wrap {
    margin: 1em 0 1em 1em;
}

#top-bar{
    right: 5em;
}

#side-bar{
    width: 10em;
    padding: 1em;
    margin: 0 0 1em -1em;
}

#main-content{
    margin: -0.5em 0 0 12.5em;
    width: 612px;
    padding: 0 0em;
}

#page-content{
    width: 612px;
    margin: 1em 0 1em 0;
}

#page-info{
    margin: 1em 5px 0 0;
}

#action-area{
    margin: 5em 0 0 0;
}

Re: force content to align top

gerdami 1203104384|%e %b %Y, %H:%M %Z|agohover

Scottplan,
I found your puzzle so beautiful I could not resist create howto at a-wikidot-page-explained.

---

Howto's content might need to be updated. No se.

last edited on 1203104617|%e %b %Y, %H:%M %Z|agohover by gerdami + show more

Re: force content to align top

Phil Chett 1203160502|%e %b %Y, %H:%M %Z|agohover

When it comes down to coding CSS , i think this sums it up rather nicely :-)

last edited on 1206427332|%e %b %Y, %H:%M %Z|agohover by Phil Chett + show more

Re: force content to align top

scottplan 1203165808|%e %b %Y, %H:%M %Z|agohover

Priceless!

… Only in my case it's been 98% purple and gold.

S.

Re: force content to align top

viszlai 1212606833|%e %b %Y, %H:%M %Z|agohover

I am using a formatted table and the table appears to align at the bottom of the page. I have removed the left side nav bar and it still aligns at teh bottom

Allof the other suggests don't seem to address this issue. I'm guessing it is something very simple.

I even added this line as suggested with not impact:

[[table style="width: 1%; margin: 40px; border-collapse: collapse; border:2px solid"]]

Any idea's?

Re: force content to align top

Phil Chett 1212618895|%e %b %Y, %H:%M %Z|agohover

go on visla, give us a link so we can have a look. then we might be able to advise.

Re: force content to align top

Socks 1212625689|%e %b %Y, %H:%M %Z|agohover

Even with a link, his sites are private.

Except one that doesn't use tables, as far as I can see.

Re: force content to align top

viszlai 1212628251|%e %b %Y, %H:%M %Z|agohover

My bad - work in progress - had it set up as private - personally hate to se those under construction sites.

here is the link: firefrog.wikidot.com/search-for-a-job

you will need to scroll down far

while i'm at it - how do I change the background color of the page as well

Re: force content to align top

Helmuti_pdorf 1212650775|%e %b %Y, %H:%M %Z|agohover

I have created a "tab-test" page in the sandbox ( http://sandbox.wikidot.com/tab-test ) to have a try for this issue with your source ( copied from the options - view source.

Hope this is correct for you.

And now - some question I have and cannot answer:

Are you using a special CSS ? - the fonts are different - could be the sandbox has another theme)

Why do you use 1% for the tab width?

The pictures cannot be found - this is okay.
Who ever have an idea - can test here..

Re: force content to align top

Phil Chett 1212665859|%e %b %Y, %H:%M %Z|agohover

re table:
its almost as if some nasty little gremlins have counted all the not needed spaces and carrage returns and stuck them in front of your table and pushed it down

Re: force content to align top

scottplan 1212670058|%e %b %Y, %H:%M %Z|agohover

I agree Phil — something to do with the way the coding is laid out.

I monkeyed with it and saw that the space at the top is proportional to the number of rows. It's also proportional to the number of cells, because when I pasted 10 rows of 3 cells each (using viszlai's method), the table would march down the page more slowly.

It doesn't have anything to do with the tabview, because the table by itself creates the same space.

I also coded table the way I would have done it (much flatter), and there's no issue.

So it's something related to the coding, but also related to something going on at the cell level. Can't figure out why that would be.

Re: force content to align top

Alderman 1212671746|%e %b %Y, %H:%M %Z|agohover

I don't have a clean fix for this problem, just something I thought I'd throw out there as something to consider:

In my experience - for what it's worth - I've found that the difference between % and px is key when it comes to (re-)scaling issues. When something is set with %, it will generally rescale depending upon the size of the browser window (i.e. the % is determined by the overall size of the window). When something is set with px, on the other hand, the value is more or less 'absolute'. A px value will not rescale to the window, and will simply push any remaining part of the page out of the screen, causing a scroll bar to appear on the browser window.

Part of the problem here could reside in the fact that most of our templates are a mix of % and px values. Hence, some things scale and others don't. Normally, this is a good thing (for example, you don't want your header to scale vertically, while you generally do want it to scale horizontally). But, on rare occasion, it can cause some serious (looking) problems, mainly because a px value overrides a % value.

This all might be so obvious to everyone here that no one felt the need to mention it. If so, simply ignore this message. ;)

Re: force content to align top

viszlai 1212672669|%e %b %Y, %H:%M %Z|agohover

THANKS scottplan - I copied your version of the table into tab 2 and it appears to solve the problem. I'll play with the content and see if i find what was diffierent.

Re: force content to align top

Helmuti_pdorf 1212676343|%e %b %Y, %H:%M %Z|agohover

I changed the sandbox http://sandbox.wikidot.com/tab-test in the same way - it is really the lots of line feeds and spaces between the cell and row tags !
( I made the list of cells shorter…)

Re: force content to align top

Phil Chett 1212683533|%e %b %Y, %H:%M %Z|agohover

from: http://sandbox.wikidot.com/tab-test2

if you remove CR you will get a flatter table as in tab 2