Skip navigation
Currently Being Moderated

Centering and flowing divs and spans

Oct 31, 2013 2:06 PM

I would like to center a group of separate text items in a div and yet have the items stack appropriately when the container becomes too small.

 

I finally figured out a way to get those pesky items to squash together and center as a group. That was the result of lots of experimentation.

 

Now, when I make the containing div smaller than the group of items they flow down below each other as they should. The problem is that the text items split themselves up to do it. I would like the whole text item to skip to the next line below when there is not enough space.

 

The example in this case is a company name and tagline. Please see WhereIsTheProof.com.

When there is enough space I would like to see:

My Ground Landscape Company     Excellence in Comprehensive Integrational Land Development

When there is not enough space for the two phrases I would like to see:

My Ground Landscape Company

Excellence in Comprehensive Integrational Land Development

 

Here is the code

 

CSS

  #Header { /*fixed position and top:0 forces a box to the top but prevents centering left to right and requires a 100% width*/

        width: 100%;

        margin: auto;

        background: lightgray;

        position: fixed;

        top: 0; }

   #HeaderArea { /*forces a box to the center, text-align:center forces the following spans to be centered as a group - very important*/

        width: 80%;

        margin: auto;

        background: lightgreen;

        text-align: center; }

     .Company { /*cannot use display:block because it forces the span to expand to the div container, but when the above div is too small for both spans, they still don't stack properly*/

        background: lightblue;

        text-align: center; }

 

HTML

  <header id="Header">

    <div id="HeaderArea">

      <span class="Company">My Ground Landscape Company</span>

      <span class="Company">Excellence in Comprehensive Integrational Land Development</span>

    </div>

  </header>

 

Any ideas?

 

Thanks,

 

Mark

 
Replies
  • Currently Being Moderated
    Oct 31, 2013 2:28 PM   in reply to A1 Leasing

    header h1, header h2, header h3 {

        float:left;

        width: 33.33%;

        padding: 0 1%;

        margin: 0;

        text-align:center;

        font-size: 26px;

    }

     

    HTML:

     

    <header>

    <h1>HEADING 1</h1>

    <h2>HEADING 2</h2>

    <h3>HEADING 3</h3>

    </header>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 31, 2013 2:30 PM   in reply to Nancy O.

    Also add this media query:

     

    /* Special Rules for Mobile, Tablets */

    @media only screen and (max-width: 700px) {

    header h1, header h2, header h3 {

        float: none;

        display: block;

        margin: 0 auto;

        width: 98%;

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 1, 2013 9:15 AM   in reply to A1 Leasing

    See this example.  View source to see the code.

    http://alt-web.com/TEST/3-col-header.html

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 1, 2013 9:28 AM   in reply to A1 Leasing

    You could also do it this way, depending on how you wanted the end result to look (styling).

     

    <head>

    <style>

    body {

        font-size: 15px; /* sets base font-size for website */

    }

    hgroup {

         text-align:center; /* Centers text */

    }

    h1, h2 {

        display: inline-block; /* will allow the headings to sit next to each other */

    }

    h2 {

        margin-left: 20px; /* spacing when side by side */

    }

     

    @media only screen and (max-width: 1073px) { /* adjust max-width to when you want them to go to separate lines */

    h1, h2 {

        display: block; /* forces headings onto separate lines */

    }

    h2 {

        margin: 0; /* removes spacing */

    }

    }

    </style>

    </head>

     

    <body>

    <header>

      <hgroup>

        <h1>My Ground Landscape Company</h1>

        <h2>Excellence in Comprehensive Integrational Land Development</h2>

      </hgroup>

    </header>

    </body>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points