FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


CSS and centered columns





dayveday
Howdy,

I'm trying to make two columns appear in a page where I'm making a small image gallery. The left column has a list of thumbnails (arranged vertically) and the right has the large picture of whichever one is currently selected. So far, so good.

Because each of the columns essentially have a fixed width (ie. the width of the picture), I want the two columns to be aligned together in the centre of the page. But, at the moment, I've got the thumb nails sitting right next to the left of the browser, and the large picture sitting in the middle by itself. Ugly.

Is there a way to fix this with CSS alone? Or do I have to resort to using tables?

Thanks for your help!
{name here}
Pretty simple to fix if you know math. Set your wrapper div for absolute positioning, then set left as 15%, top as 10px, and width as 70%. This will make a center wrapper that's 70%. Now if you setup a div that's 35% wide, 10px margin up top and 45% left, you can have two columns without resorting to tables provided you set the other div as 35% and have a 15% spacing left.
dayveday
Thanks for your help with that. The only problem for me was that I don't know exactly where the columns should start since I had content above them.
Also, the content isn't perfectly centred inside the columns below, because their width depended on the width of the browser, not of the content.

I did get a solution though, once I read about auto-margins. To get it working, I set it up as two div tags inside a third div.

<div id="galleryContainer">
<div id="galleryMain">Main content</div>
<div id="galleryMenu">Menu</div>
</div>

Then the CSS was really simple. Make #galleryContainer have auto left and right margins. Make #galleryMain float right, and then #galleryMenu sits next to it in the centre of the page. Simple!
IceCreamTruck
If I may, I would like to remind you that search engines aren't always up to speed on how to break a page down, and some, not all users might have trouble viewing the page if it strays too far from the HTML standard.

Have you considdered making this move using simple tables? flat HTML files always give the search engines a leg up even if the content redirects users to browser specific complex pages, like the one you are currently building.

So to speak this is just a warning to keep it simple and you won't alienate users or search engine bots. A lot of people really are using older equipment and browsers. Check the effects of developed webpages when you turn CSS off, cause that's what a good majority of visitors to your site will see.
{name here}
IceCreamTruck wrote:
If I may, I would like to remind you that search engines aren't always up to speed on how to break a page down, and some, not all users might have trouble viewing the page if it strays too far from the HTML standard.

Have you considdered making this move using simple tables? flat HTML files always give the search engines a leg up even if the content redirects users to browser specific complex pages, like the one you are currently building.

So to speak this is just a warning to keep it simple and you won't alienate users or search engine bots. A lot of people really are using older equipment and browsers. Check the effects of developed webpages when you turn CSS off, cause that's what a good majority of visitors to your site will see.

Tables make your design bigger, and they aren't friendly toward the blind. Usually IE 5 users won't be a problem when viewing your site.

Also, the W3C wants you to use divs, not tables, in your designs.
IceCreamTruck
hmmmmm,
you know, I too must study all the time to keep up to date on these things. Thanks for the heads up!

BTW, can you move <imgs> around inside <divs> once the page has loaded using javascript? ignor if too far off topic.
dayveday
Yes, as name_here mentioned, W3C has made it really clear that tables should only ever be used for displaying tabulated data. CSS needs to be used for all layout (which makes it hard, I'm used to using tables)

But, just like Javascript, you want to make sure the page degrades gracefully when CSS doesn't work. In this case, for browsers without CSS (and SEs) the page will simply be displayed so the gallery menu appears beneath the gallery pictures.
nvsnkalyan
As already mentioned tables make site clumsy.....
I have read somewhere that search engine spiders consider the first 200 words of the page(HTML) to make up the theme of the site. SO having tables makes the code larger and the search engines come across more of unnecessary html......this makes the search engine index the page as low quality stuff
But using DIV's clears this problem....In fact it makes the code smaller and load faster......
Moreover IE takes a lot of time to render TABLE's than DIV.....so it is always better to consider having the design done in pure CSS
a_dubDesign
IceCreamTruck wrote:
A lot of people really are using older equipment and browsers. Check the effects of developed webpages when you turn CSS off, cause that's what a good majority of visitors to your site will see.

Do you have stats to back that up? Its understandable if you're using CSS3, maybe 2, but that seems way off base if we're talking CSS1, which is what that type of layout would be.
Related topics
Okay, I'm done trying to use CSS for layout.
new to css: help with positioning
The CSS Creator site
CSS Problem
Yet Another Css Postioning Problem
Help wanted with CSS and iframes It works
Page columns: tables or no tables?
3 columns using div and css
Css- 2 equal columns in Explorer
CSS layout problem
height 100% columns, fluid and only with CSS
CSS DIV layout advice
Equal Columns in CSS
CSS: columns
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.