how to position a search bar in html/css


Tags: html,css

Problem :

This is my code so far:

html:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home_style.css">
</head>

<body>

<div class="header">
    <div class="search_bar">
        <input type="text" name="search" value="search">
</div>

</body>
</html>

css:

html,body{
height:100%;
min-height:100%; 
width:100%
min-width:100%;
}

.header{
margin-bottom:0;
height:10%; 
width:100%;
background-color:#343430;
}

.search_bar input[type="text"]{
position:relative;  
left:20%;
top:25%;
width:30%;

background-color:white; 
color:grey;
}

How do I make the search bar be positioned further down, i need the search bar to be positioned in the middle of the header not the top. Why is top:25% not working?



Solution :

Replace position:relative with position:absolute:

html, body {
    height:100%;
    min-height:100%;
    width:100% min-width:100%;
}
.header {
    margin-bottom:0;
    height:10%;
    width:100%;
    background-color:#343430;
}
.search_bar input[type="text"] {
    position:absolute;
    left:20%;
    top:25%;
    width:30%;
    background-color:white;
    color:grey;
}

If you look at the definition for relative positioning:

The element is positioned relative to its normal position,
so "left:20" adds 20 pixels to the element's LEFT position

your search bar was really positioning itself.

Demo


    CSS Howto..

    With html tables, using CSS, how do I get the tables next to each other?

    How do I keep text from wrapping under an element which floats to its left?

    How to set background image to keep its position while browser width is changing?

    How to check multiple conditions within a td in Angular table?

    How to detect IE8 separate from newer versions when IE8 compatibility set

    How to crop image with css

    How to have different transition durations for css and angular transition on same element?

    How to avoid margin form ul in li tag?

    How to explain CSS clear property? [duplicate]

    How does jQuery's toggle function work, how to write it in javascript without jquery?

    css how to fix layout in table

    How to define alternative font-family corresponding to font-size CSS

    How Visually Long is a String?

    How to center right-aligned numbers in table column using CSS?

    Css how to set 3 block block/div's in one line [closed]

    How to add spacing between two span elements

    How can I make a designer's static web page run in rails 4

    Can't figure out how to horizontally CENTER my content div [duplicate]

    How can I edit a web part's .css file on the fly in MOSS 2007?

    How do I force nested list items to be the same width as parent list item?

    How can i display images horizontally using PHP and mysql?

    HTML+CSS: How to add shadow (as image) to image?

    How to make/render a font-awesome font “thin”? [duplicate]

    How I can center a menu bar with ul

    How to make the element located in the center of a div?

    How to format CSS for 8.5x11 inch printed pages

    How can I make my div's svg background image scale dynamically and stay in the center of the div

    How to Style Similar to an Exam Questi-n

    How to have two elements with scrollbars next to each other?

    Image rotation in IE causes automatic translation. How do I remove the translation?