Using 3 DIVs side by side, with the center DIV being the 'content' DIV

Question

0.00/5 (No votes)

See more:

Hi everyone,

Wondering if anyone can help me here... I'm currently working on a website, of which would need to have the main content centered in the browser, so it will look fine in different screen resolutions.

At first my theory was to use tables to structure the layout, but I couldn't find a way to have an image as a background in a table cell, so I took the DIV route.

I'm guessing I would need:
A 'container' DIV - (to hold the corresponding DIV's)
3x DIV's inside the 'container' - (these would be side by side, the 2nd being 'main')

Any answers would be much appreciated, thanks for your time,
Tom.

Posted 22-Jan-12 10:14am

thomasriley

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Espen Harlinn · Accepted Answer · 2012-01-22T10:22:00

Solution 1

Have a look at this:
http://stackoverflow.com/questions/6208214/placing-3-divs-side-by-side[^]

Best regards
Espen Harlinn

Posted 22-Jan-12 10:22am

Espen Harlinn

Comments

Sergey Alexandrovich Kryukov 22-Jan-12 16:30pm

Should help, my 5.
Actually, a while ago I found a more "universal" method of finding samples on this topic with pretty good relevance, please see my answer.
--SA

Espen Harlinn 22-Jan-12 16:45pm

Thank you Sergey!

thatraja 23-Jan-12 13:05pm

Right, 5!

Espen Harlinn 23-Jan-12 15:50pm

Thank you, thatraja!

Sergey Alexandrovich Kryukov · Accepted Answer · 2012-01-22T10:29:00

Solution 2

A while ago I found a good way to form a Google query to find enough samples in this very popular topic.

Please do this: http://bit.ly/x3AW1M[^].

[EDIT]

Also, it might be very useful to have resizable columns where you might need JavaScript. I would recommend to use jQuery. So, this search could be more productive:

http://bit.ly/x62NXg[^].

Good luck,

—SA

Posted 22-Jan-12 10:29am

Sergey Alexandrovich Kryukov

Updated 22-Jan-12 11:13am

v2

Comments

Espen Harlinn 22-Jan-12 16:45pm

Ahh, yes - lots of examples, and then you have
http://www.csszengarden.com/
http://www.mezzoblue.com/zengarden/alldesigns/

csszengarden is actually a pretty interesting site :)

Sergey Alexandrovich Kryukov 22-Jan-12 17:09pm

Thank you very much, Espen, they look very interesting and useful, but I advise you to move these two references to your answer, with your recommendation.
--SA

Sergey Alexandrovich Kryukov 22-Jan-12 17:14pm

And I added another good query, in case of user-modified width (and whatever else) is required, which is very likely.
--SA

Espen Harlinn 22-Jan-12 17:19pm

Which leads you to the Columnizer jQuery Plugin:
http://welcome.totheinter.net/columnizer-jquery-plugin/
This plugin is actually pretty cool :)

Sergey Alexandrovich Kryukov 23-Jan-12 13:42pm

Good to know, thank you for sharing. I'll take a look at the implementation when I have time. jQuery is pretty nice, works well, produce compact application code.

I would move this link in your answer, will you?

Cheers,
--SA

Espen Harlinn 23-Jan-12 16:07pm

Glad that you liked it, I think I'll just leave it as it is, it was after all something I wanted to bring to your attention :)