You are here: Home » Tutorials » Tips-Tricks » Resizing the Left and Right Containers

Resizing the Left and Right Containers

Posted by Stan Bogdanov on 08 January 2008 - 19:31

Very often we need more space for, say, a reading text and less space for the questions, or vice versa.
See a demo (resize to 600x800 and back to see what happens). Here's a small trick how to achieve this.

Starting out

Create your exercise as usual and open the .htm file in a Text or HTML Editor. Find this code div.LeftContainer{
...
width: 49.8%;
... and div.RightContainer{
...
width: 49.8%;
...

Edit some CSS

Depending on which container you'd like bigger, change the width values accordingly, for instance, to look like this: 
div.LeftContainer{
...
width: 33.2%; /* adjusted width of the left container -smaller*/
...
and 
div.RightContainer{
...
width: 65.8%; /* adjusted width of the right container -bigger */
...

That's it. Save the file and view the result.

Rate this:

  • Currently3.20137157107/5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Votes: 1604

Share it:

Windows Live

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code:
 
siteadmin
Posts: 1
Comment
Scroll bar on the text box
Reply #2 on : Mon March 14, 2011, 14:07:59
Hi Alex,

Follow this tutorial from the HotPotatoes Hacking Workshop:
http://hotpot.uvic.ca/howto/hacking_workshop/task_01.htm

Here's the demo:
http://hotpot.uvic.ca/howto/hacking_workshop/examples/task_01.htm

Cheers
Stan
Alex Varsakopoulos
Posts: 1
Comment
Scroll bar on the text box
Reply #1 on : Sat March 12, 2011, 18:20:12
Hi Stan,

I would like to have some scroll bars on the text box on the left. Is that possible?

Thank you

Alex