How do I get things to expand/contract with window size?

Question

RE: www.hawaiihosa.org
I'm working on a website for my organization...and it looks
alright when the windows of internet explorer and firefox are
expanded...but when the windows are smaller, the heading remains
the same size, and the text moves behind my vertical menu bar on
the left.
Is there a way to make it so that the header is the same
width (with proportional height) as the width of the white area? I
think the white area is set to a width of 80 percent or something.
When windows are smaller, is there a way to make it so that
the text in the body of the pages stays where they originally were
(to the right of the menu bar...and not behind)?
Another thing not related to window size...how do I get the
text to be vertically in line on one side? Whenever write anything
and it extends below the menu bar, it uses the full white space. I
want it to have the same width of writing space as the rest of the
page. In other words, I want it to be constricted to the right of
the menu bar with the text being justified to the left.
Hopefully someone can halp us with this.
Thank you very much!
Maurice Nakamura
If you didn't get the url...its
www.hawaiihosa.org

Answer 1

I would set the page to adhere to a minimum width. Add
min-width: 610px;
to your css as shown below. (this won't work in IE browsers
prior to 7
so if you want to support that google min-width for IE6)
.twoColLiqLtHdr #container {
width: 80%; /* this will create a container 80% of the
browser width */
background: #FFFFFF;
min-width: 610px;
margin: 0 auto; /* the auto margins (in conjunction with a
width)
center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center
on the body
element. */
To have the text vertically inline on one side as you put it
try adding
this to your css stylesheet:
#container p {
margin-left: 190px;
Instead of the width for the side bar being 24% make it 170px
as shown
below:
.twoColLiqLtHdr #sidebar1 {
float: left;
width: 170px; /* since this element is floated, a width must
be given */
background: #FFFFFF; /* the background color will be
displayed for the
length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual
space within
this div */
You cant really make your header img grow/reduce in size as
the page is
enlarged or narrowed because it would distort. What you need
to do is
find a place to slice it into sections wherebay you can have
part of it
as a repeating background image i.e., the left and right side
of the
image remains on the left and right but the bit in the middle
repeats
itself as the browser window is widened and narrowed.
This needs to be taken into account when designing a liquid
page.
MauriceNakamura wrote:
> RE: www.hawaiihosa.org
>
> I'm working on a website for my organization...and it
looks alright when the
> windows of internet explorer and firefox are
expanded...but when the windows
> are smaller, the heading remains the same size, and the
text moves behind my
> vertical menu bar on the left.
> Is there a way to make it so that the header is the same
width (with
> proportional height) as the width of the white area? I
think the white area is
> set to a width of 80 percent or something.
> When windows are smaller, is there a way to make it so
that the text in the
> body of the pages stays where they originally were (to
the right of the menu
> bar...and not behind)?
> Another thing not related to window size...how do I get
the text to be
> vertically in line on one side? Whenever write anything
and it extends below
> the menu bar, it uses the full white space. I want it to
have the same width of
> writing space as the rest of the page. In other words, I
want it to be
> constricted to the right of the menu bar with the text
being justified to the
> left.
>
> Hopefully someone can halp us with this.
>
> Thank you very much!
> Maurice Nakamura
>
> If you didn't get the url...its
http://www.hawaiihosa.org
>