5

I was trying to make a browser independent code with a search bar in it ( this search bar i took from demos.jQuery.com) but now when I am trying to fix the margin percent in the left and right side ( i want it center aligned even when browser width is changed ) I am unable to do that , I am new to CSS can someone help ?

the code that i made till now is :

HTML : 

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Screen1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="screen1.css">
</head>
<body>
<div id="header"><p class="p1"><b>Composite<img class="img1" src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_down-128.png" alt="alternate"></b></p></div>

<div id=""main>
 <div data-role="main" id="main" class="ui-content">
    <form>
      <input data-type="search" id="divOfPs-input">
    </form>
    <div class="elements" data-filter="true" data-input="#divOfPs-input">
      <p><strong>These</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
      <p><strong>p elements</strong> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
      <p><strong>are</strong> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
      <p><strong>filterable</strong> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
    </div>
  </div>
    </div>
</body>
</html>

CSS : 

@CHARSET "ISO-8859-1";

#header
{   position:absolute;
    height:40px;
    width:100%;
    background-color:#D1D3D4;
    verticle-align="middle";
    left:0;

}
.img1
{
    position:relative;
    height:13px;
    float:right;
    padding-right:12%;
}

.p1{

    position:relative;
    padding-bottom:5%;
    padding-left:7%;
    width:100%;

}

#main
{   
    position:absolute;
    margin-top:80px;
    left:-.3%;
    margin-right:2%;
    width:98%;
    border-right:5%;

}

Refer this fiddle

BomberMan
  • 1,094
  • 3
  • 13
  • 33
vaibhav
  • 762
  • 2
  • 12
  • 34

5 Answers5

3

The main problem is that you have defined 98% width without box-sizing: border-box; so padding was pushing content outside of visible area. You have to adjust #main div to:

#main
{   
    /* left:-.3%;
    margin-right:2%; */
    width:100%;
    box-sizing: border-box;
}

Fiddle: http://jsfiddle.net/3je1bk67/3/

emmanuel
  • 9,607
  • 10
  • 25
  • 38
1

If you want to make your elements centred using margin-right and margin-left try this:

/* just change the element tag you want to center */
p{ 
  margin-left:10%;
  margin-right:10%;
}

That will make all your <p> elements centred, and you can apply it to any element.

Take a look at this Demo.

cнŝdk
  • 31,391
  • 7
  • 56
  • 78
1

to allign search bar in the middle you just have to add this 

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

enter image description here Hope it helps

Aameer
  • 1,366
  • 1
  • 11
  • 30
0

This answer will help you: How to horizontally center a <div> in another <div>?

Also you have a typo in your code: <div id=""main> instead of <div id="main">.

Community
  • 1
  • 1
balintant
  • 2,774
  • 1
  • 19
  • 33
0

Jsfiddle

http://jsfiddle.net/3je1bk67/6/

you can resize the browser to see the effect

  #main
    {   
        margin:30px 0px 0px 0px;

    }
Manjunath Siddappa
  • 2,126
  • 2
  • 21
  • 40