June 11th, 2013, 12:45 PM
-
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!
June 11th, 2013, 05:32 PM
-
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 05:35 PM.
June 12th, 2013, 08:37 AM
-
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.