How to ensure that elements are properly aligned even when window is resized?

Question

I have a webpage aligned properly when viewed fullscreen in a browser, but when the same is resized things go horribly mis-aligned. Here's the html.

<html>
<head>
<style type='text/css'>
  textarea {
    height:500px;
    width:500px;
    font-size:20;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  }
  input[type="text"] {
    width: 450px;
    height: 30px;
  }
  #chatArea {
    width:600px;
    margin: 10px auto;
  }
  h1
  {
    text-align: center;
    width:600px;
    margin-left:280px;
    margin-right:20px;
    color: brown;
  }
  .greyText
  {
    color:grey;
  }
</style>
</head>

<body>
<h1>Suggestion Box</h1>
<div id="chatArea">
<textarea id='chatHistory' value="Type your suggestion here." ></textarea>
<br/><br/>
<form id= 'chatForm' onsubmit="return false">
    <input name= 'newMessageString' id="newMessageString" type="text" />
    <input type="submit" value='send'/>
</form>
</div>
</body>
</html>

How can I make sure that however the page is resized the elements stay at the center?

@mediaqueries, floats, percentages. Or use a responsive grid. Welcome to the world of supporting 10000000 resolutions. — elclanrs, May 22 '13 at 21:30
You should look for "responsive" web development, or "mobile", or "adaptive", or "fluid"... there are many approaches to the same problem. — elclanrs, May 22 '13 at 21:33
You can also try adapting one of these: http://www.dynamicdrive.com/style/layouts/category/C13/ — RandomUs1r, May 22 '13 at 21:38

score 2 · Accepted Answer · answered May 22 '13 at 21:34

Change the width of your textarea to 600px to fill the entire centered #chatArea div and center your h1 by changing its margins to:

margin-left: auto;
margin-right: auto;

Full code:

<html>
<head>
<style type='text/css'>
  textarea {
    height:500px;
    width:600px;
    font-size:20;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  }
  input[type="text"] {
    width: 450px;
    height: 30px;
  }
  #chatArea {
    width:600px;
    margin: 10px auto;
  }
  h1
  {
    text-align: center;
    width:600px;
    margin-left: auto;
    margin-right: auto;
    color: brown;
  }
  .greyText
  {
    color:grey;
  }
</style>
</head>

<body>
<h1>Suggestion Box</h1>
<div id="chatArea">
<textarea id='chatHistory' value="Type your suggestion here." ></textarea>
<br/><br/>
<form id= 'chatForm' onsubmit="return false">
    <input name= 'newMessageString' id="newMessageString" type="text" />
    <input type="submit" value='send'/>
</form>
</div>
</body>
</html>

score 1 · Answer 2 · edited May 23 '17 at 11:57

You need to take a look at responsive design

There are a lot of FW that can help like

And all are based on media queries @media(max-width:1023px) , this is not supported in IE8 you can take a look at IE8 support for CSS Media Query OR use http://code.google.com/p/css3-mediaqueries-js/

Edit

I forget to tell you that most of the widths are percent like 34.333%

I hope this can help and put you on the right track

score 1 · Answer 3 · answered May 22 '13 at 21:37

Here is the code :

<html><head>
<style type="text/css">
  textarea {
    height:500px;
    width:500px;
    font-size:20;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  }
  input[type="text"] {
    width: 450px;
    height: 30px;
  }
  #chatArea {
    text-align:center;
    width:600px;
    margin: 10px auto;
  }
  h1
  {
    text-align: center;
    color: brown;
  }
  .greyText
  {
    color:grey;
  }
</style>
</head>

<body cz-shortcut-listen="true">

<div id="chatArea">
<h1>Suggestion Box</h1><textarea id="chatHistory" value="Type your suggestion here."></textarea>
<br><br>
<form id="chatForm" onsubmit="return false">
    <input name="newMessageString" id="newMessageString" type="text">
    <input type="submit" value="send">
</form>
</div>

`</body></html>

You accidentally left in `cz-shortcut-listen="true"` which is added by the Colorzilla Chrome extension. — Paul, May 22 '13 at 21:44
He's wrapping your content in a container (using your #chatArea div - note he moved your h1 into #chatArea) which has a css margin: 10px auto ... This technique is described generically in my answer below. the "auto" is what does it - that basically centers your element as long as the container is smaller than the window. — 1nfiniti, May 23 '13 at 17:46

score 1 · Answer 4 · answered May 22 '13 at 21:44

you can use percentages to acomodate your layout on the browser take a look at the changes i made http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

 <style type='text/css'>
              textarea {
                height:500px;
                width:500px;
                font-size:20;
                font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
              }
              input[type="text"] {
                width: 450px;
                height: 30px;
              }
              #chatArea {
                width:80%;
                margin: 10px auto;
                display:block;
                text-align:center;
              }
              h1
              {
                text-align: center;
                width:80%;
                margin-left:auto;
                margin-right:auto;
                color: brown;
              }
              .greyText
              {
                color:grey;
              }
            </style>

score 1 · Answer 5 · answered May 22 '13 at 22:09

1

The general approach for this is to wrap your body content in a fixed-width container with left & right margins set to "auto" to center the content.

ie

HTML

<body>
    <div class="container">
        <!--the rest of your content goes here-->
    </div>
</body>

CSS

.container {
    width:960px; /* or whatever width you would like to set */
    margin: 0 auto;
}

answered May 22 '13 at 22:09

1nfiniti

2,032
14
19

2

I think discussions about various responsive frameworks etc. are a bit out of scope here - this is a rather elementary question. Move on to that stuff once you learn the basics. – 1nfiniti May 22 '13 at 22:10

How to ensure that elements are properly aligned even when window is resized?

5 Answers5