Raviteja Raviteja - 4 days ago 5
CSS Question

How to center the form respective to header?

I have a fixed side navbar. In the I have a header and body-content, where I want the form to be in center with respect to the header.

HTML

<body>
<div id="sideNav">
SideNav
</div>
<div id="mainContent">
<div id="header">
<div>
<h3>
Header
</h3></div>

</div>
<div class="body-content">
<form id="form1">
<h3>
Form
</h3>
<div id="formset">
<table>
<tr>
<td>
<label>Login</label>
</td>
<td>
<input type="text" />
</td>
</tr>

</table>
</div>

</form>
</div>
</div>
</body>


CSS

* {
margin: 0;
padding: 0;
}

body {
position: relative;
}

#sideNav {
width: 150px;
height: 100%;
background-color: #6bc7cc;
position: fixed;
width: 15%;
}

#mainContent {
background-color: Aqua;
height: 100%;
position: absolute;
left: 15%;
right: 0;
}

#header {
width: 100%;
height: 50px;
background-color: #fcb;
}

.body-content {
margin: 45px;
}

#formset {
width: 500px;
margin: 0 auto;
}


Fiddle Here

Answer

Try to use this may it helps u and not style in #formset

#form1{
    display: table;
    margin: 0 auto;
}

#formset{
  width:none;
  margin: 0 auto;
}
Comments