THESE FORUMS NOW CLOSED (read only)

Fun Stuff => CLIKC => Topic started by: Mnementh on 05 Jul 2006, 22:12

Title: CSS column help
Post by: Mnementh on 05 Jul 2006, 22:12

I have this three column layout that I like for my drupal/gallery2 site, but there are overlap issues (http://aurostion.com/?q=gallery&g2_itemId=111) with the middle content and the right sidebar.  Any suggestions on how to easily fix it, or do I need to holy grail it?  I want to keep the fixed width design, if possible, and have it contain everything within the center div, like it does here (http://aurostion.com/?q=gallery).

This seems to be the relevant CSS.  I'm using the NiftyCorners template.

Code: [Select]

div#container{
width:960px;
margin:0 auto 10px;
padding:20px 0 10px;
text-align:left;
background:#FFF;
}

div#content_normal{
float:left;
display:inline;
width:540px;
margin:0 0 10px 10px;
}

div#content_wide{
float:left;
display:inline;
width:740px;
margin:0 0 10px 10px;
}

div#sidebar-left{
float:left;
display:inline;
width: 170px;
background:#eee;
margin:0 10px 10px 10px;
padding:5px 5px 0 10px;
}

div#sidebar-left p{margin:5px 0 10px;padding: 0 10px}
div#sidebar-left .block{margin: 0 0 10px;padding: 0 0 20px 0;}

div#sidebar-right {
float:right;
display:inline;
width: 170px;
background: #eee;
margin:0 10px 10px 0;
padding:5px 5px 0 10px;
}

div#sidebar-right p{margin:5px 0 10px;padding: 0 10px}
div#sidebar-right .block {margin: 0 0 10px;padding: 0 0 20px 0}

Title: CSS column help
Post by: shatteredshards on 05 Jul 2006, 23:51

I've never used that site before, so maybe I'm way off, but it just looks like a simple case of your content's too wide.

The div container is the div in which all the other divs are placed, correct? You gave that fixed width 960px. But then that center div's content is wider than the  540px width you have set (the image is 640px), plus 170px times 2 for the sidebars, plus padding...so in the end the browser, when rendering the page, is squishing it all into that 960px when obviously there's more than 960px there.

Would defining a horizontal overflow for that middle div work?

Title: CSS column help
Post by: Mnementh on 06 Jul 2006, 09:22

I know the content is bigger than the container, but what I'm seeking to do is have the page shrink the content, much like the following would.

Code: [Select]

<img src=example.jpg width="90%">

Which I probably have to go fix in the gallery2 module somewhere.

Title: CSS column help
Post by: Kana on 06 Jul 2006, 10:26

When you use exact div containers it won't shrink automatically, especially if you have it 'fixed' instead of having some options on auto.

Also just to sound like a code-nazi most designers are made to stick to a basic 800x600 rule of thumb since the majority of users still use that size (because they don't know better or lack monitor/graphics cards to go to that size)  Depending on what the page is for/content you might want to post what size its best viewed at.

If you want it to auto on the sizing I believe you'll have to work with the overflow option in the css... overflow-x, overflow-y, or just overflow for both... options are scroll, hidden (i think), and none i believe.. its been a while.. last div layouts i did was the crap for myspace (i got bored.. gimme a break).

Title: CSS column help
Post by: Rubby on 06 Jul 2006, 10:32

The container won’t resize objects for you.
A few things you could do are either resize manually, or something along the lines of this:

Code: [Select]

.resize {width: 90%;}
Just apply the inline class to everything that needs to be resized. I know that's tedious, but I don’t think there is a "quick fix" to this sort of problem.

edit: The overflow options are visible, hidden, scroll and auto (same as visible mostly).

Title: CSS column help
Post by: shatteredshards on 06 Jul 2006, 18:15

Seconding 800x600. I know, if you have a higher res you don't want to go that small, but you have to be user friendly.

Title: CSS column help
Post by: shatteredshards on 06 Jul 2006, 21:20

Then thumbnails/resizing or a scrollbar. But the fixed div simply won't work as it is.