HelixTitan HelixTitan - 18 days ago 5
ASP.NET (C#) Question

Make a Div fill the width of content not just the screen

I am trying to fix this div. It is set to 100% width yet it doesn't take up the whole page. What can I do to fix this?

picture

Relevant code (some things I was messing with are still in the code):

<body>
<form id="form1" runat="server">
<nav class="navbar navbar-default" style="position: page; top: 0; left: 0; margin: 0; padding: 0; width: 100%;">
<div id="header" style="height: 50px; width: 100%; position:relative; background-color: #2A333E;">
<div style="height: 50px;">
<img alt="logo" src="http://i.imgur.com/hRaRJhq.png" style="width: 157px; height: 52px;" />
</div>
</div>
</nav>
</form>
</body>


CSS:

html, body {
margin:0px;
padding:0px;
width: 100%;
}

Answer

The problem is, that 100% is calculated on viewport, not on page content, if you don't need to scroll horizontally your navbar you can just set position of navbar to fixed and add some top padding to body to not cover content above.

But if you want navbar to be scrolled with content then you must place it in the same container where this table is.