#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    2
    Rep Power
    0

    Cool Help positioning container


    Hey guys,

    I have been learning CSS and it seems pretty straight forward thus far.

    I am, however, having a positioning issue. I am attempting to use a div container to put my navbar and search bar in. But when I decrease my browser window, the div container does not stay centered(just kind of stays to the right).

    The following is the css i used:

    #navcontainer
    {
    text-align: center;
    background: #99ffcc;
    border: 4px inset #66cccc;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 2px;
    padding-left: 2px;
    margin-left: 130px;
    margin-right: 130px;
    min-height: 30px;
    max-height: 30px;
    min-width: 400px;

    }

    and the following is the HTML:

    <h2>
    <div id="navcontainer">
    <ul>
    <li><a href="URL here">Home</a></li>
    <li><a href="URL here">Contact</a></li>
    <li><a href="URL here">Things</a></li>
    <li><a href="#about">Stuff</a></li>
    </ul>

    <form id="searchbox" method="get" action="URL here" align="center">
    <input id="search" type="text" placeholder="Google it..." name="q" maxlength="255" value="">
    <input id="submit" type="submit" value="Search">
    </div>

    </form>
    </h2>

    Any suggestions would be swell!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    276
    try setting your margin-left/margin-right to auto instead of an actual pixel value.

    And your closing </h2> , </form> and </div> items are in wrong order.
    Last edited by DonR; June 11th, 2013 at 06:35 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    2
    Rep Power
    0
    Originally Posted by DonR
    try setting your margin-left/margin-right to auto instead of an actual pixel value.

    And your closing </h2> , </form> and </div> items are in wrong order.
    Hey DonR,

    Thank you, that did the trick. Like I said, I am new to this. Just started learning a few days ago. I greatly appreciate the help! Have a wonderful day.

IMN logo majestic logo threadwatch logo seochat tools logo