Seeking advice on how to position a div region containing page content beneath a navbar without using margin-top. Currently, I have implemented margin-top:200px, but I am uncertain if this approach is responsive or if there is a better method available.
The goal is to place the paragraph "I am on the left" below the navbar. Are there alternative solutions to achieve this layout without relying on margin-top?
Below is the excerpt of HTML code:
<div class="navbar navbar-default navbar-fixed-top" style="top:50px; background:none; border:0px; box-shadow:none;">
<div class="navbar-inner">
<div class="container-fluid" >
<ul class="nav navbar-nav">
<li><a href="#">News</a></li>
<li><a href="#">Portofolio</a></li>
<li><img id="logo" src="images/logo.png"></img></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6"><p id="some">I'm on the left</p></div>
</div>
</div>
</div>
</div>
Here is the associated CSS code:
.content{
margin-top: 200px;
}
#some{
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border-radius: 24px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
background: white;
}
I experimented with the following CSS adjustment:
.navbar-fixed-top {
margin-bottom: 19px;
}
However, this modification did not produce the desired outcome.