Side-by-side boxes?

[JoeMNI]

Hi,

My website is getting too tall for my taste. I'm tired of each layout window sitting on top of eachother.

Is there a way to put boxes on the homepage side-by-side? I would like to put my bio window alongside a smaller slideshow or alongside my facebook fan scroll.

Is it even possible?

Here's my website:
www.MathewsNatureImages.com (http://www.MathewsNatureImages.com)

(P.S.: I know all my pictures aren't great. I'm not asking for photo critiques today thanks.:thumb )

[photokandy]

Here's something you can try:


div#biobox
{
width:200px;
float: left;
}

div#slideshowBox
{
width:780px;
float: right;
}

div#categoriesBox
{
clear: both;
}


The above will force your Bio to be 200px wide (you can add a height to indicate a specific height as well) and positioned to the left, and will force your slideshow to be 780px wide (you'll want to change your slideshow code to match as well) and be positioned to the right. The "clear: both" is added to the box directly underneath to make sure that it doesn't try and occupy the same space as the two "floaters" above it.

To use this technique, the boxes have to be in direct proximity -- i.e., to get the facebook widget in the same space as the Bio, we'd have to use other, more painful measures, unless you added its code to your Bio (in which case we could play more with it there).

Side note: this may play a little havoc with the movability of your modules -- i.e., what SM says as "move up" may not react that way when these styles are in place. Just something to think about...

Finally, I rather like many of your pics, although I find I could do without the spiders. ;-) (But that's a personal taste!)

Hope that helps!

[JoeMNI]

Thanks!

I see what you mean by "play a little havoc" but tha was no problem. I made my slide show smaller so that it should be able to fit side-by-side. I can tell it is trying to do what your code addition says, but it isn't working yet. :scratch I'm sure there is something about the rest of my code that is interfereing with it.

#homepage {width: 1000px;}
#my_banner {
width: 1000px;
height: 170px;
margin: 0 auto;
background: url(http://mathewsnatureimages.smugmug.com/photos/620113387_uuN2U-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src=http://www.mathewsnatureimages.com/photos/535136333_ok4Tx-O.png');
}
div#biobox
{
width:300;
float: left;
}
div#slideshowBox
{
width:680px;
float: right;
}
div#categoriesBox
{
clear: both;
}
#bioBox .photo {
display: none;
}
#userBio {
text-align: left;
borderThickness: '15',
borderColor: '8f7a69',
}

Ideally it is my facebook fan scroll I want to get next to my bio. But for now I can only get it to work by putting it's code in my custom footer.

Thanks for the reply! I'll keep tinkering when I get back from the field later today.:thumb

[denisegoldberg]

This has nothing to do with your question above, but...

I just wandered through your galleries, and I saw that you are allowing access to your originals.

Are you aware that no one will need to pay you for your images since you have originals enabled in your galleries? I know, I know, you have right click enabled. But that is merely a speed bump on the way to grabbing a copy of an image. I recommend that you set the largest size available for viewing to X3Large - or whatever you are comfortable with, anything smaller than Original.

http://www.smugmug.com/help/image-protection
http://blogs.smugmug.com/pros/2008/07/04/right-click-protection-and-image-security/

--- Denise

[photokandy]

Thanks!

I see what you mean by "play a little havoc" but tha was no problem. I made my slide show smaller so that it should be able to fit side-by-side. I can tell it is trying to do what your code addition says, but it isn't working yet. :scratch I'm sure there is something about the rest of my code that is interfereing with it.

#homepage {width: 1000px;}
#my_banner {
width: 1000px;
height: 170px;
margin: 0 auto;
background: url(http://mathewsnatureimages.smugmug.com/photos/620113387_uuN2U-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src=http://www.mathewsnatureimages.com/photos/535136333_ok4Tx-O.png');
}
div#biobox
{
width:300;
float: left;
}
div#slideshowBox
{
width:680px;
float: right;
}
div#categoriesBox
{
clear: both;
}
#bioBox .photo {
display: none;
}
#userBio {
text-align: left;
borderThickness: '15',
borderColor: '8f7a69',
}

Ideally it is my facebook fan scroll I want to get next to my bio. But for now I can only get it to work by putting it's code in my custom footer.

Thanks for the reply! I'll keep tinkering when I get back from the field later today.:thumb

Whoops, I made a typo -- that might be part of it. Instead of "biobox", use "bioBox" -- see if that helps! :-)

I'll see if I can play around a bit and get the facebook widget where you want; but it may require a bit more code to get that in the right space.

[JoeMNI]

Are you aware that no one will need to pay you for your images since you have originals enabled in your galleries? I know, I know, you have right click enabled. But that is merely a speed bump on the way to grabbing a copy of an image. I recommend that you set the largest size available for viewing to X3Large - or whatever you are comfortable with, anything smaller than Original.

--- Denise

I'll do it. Thanks for the tip.

Just curious... is that because of a fault in the website programming or just that because it isn't good to show each pixel clearly?

[denisegoldberg]

Just curious... is that because of a fault in the website programming or just that because it isn't good to show each pixel clearly?
There is no fault in the website programming - it's the nature of the web. If something is visible in a browser then the image can be grabbed from the browser buffer. If there is any fault it is that the feature in smug is called "right click protection". It's a warning, nothing more.

The original is only used for printing. There is no need to allow access to it in your galleries.

If you want to see the difference, do a right click save from each sized image and look at the difference in the file size.

--- Denise

[JoeMNI]

Yea!:clap

I don't know why, but it suddenly works! I have a little tweaking to do to get the two divs the same height, but that should be a cinch.

The only other odd thing is that my bio photo dissappeared and I can't figure out why.

Thanks Denise and Kandy!

[JoeMNI]

The only other odd thing is that my bio photo dissappeared and I can't figure out why.

Thanks Denise and Kandy!

My fault. I found the error. Everything works great now.:thumb