ASCX inline DIV styles? - html

Question

In the Visual Studio the CSS file has this. I am trying to use an inline code to float these 2 boxes side by side and not alter the actual CSS file if possible. In the ASCX file I have the code as:-
<h2 class="QuickLinks">
Build Release Notes</h2>
<div class="QuickLinks">
<p> There is a list of very long law statutory codes but putting this as a test only </p>
<div>
<h2 class="QuickLinks">
Supplemental Release Notes</h2>
<div class="QuickLinks">
<p> here is a list of very long law statutory codes/ links and pdf links but putting this as a test only </p>
</div>
css file (sample) there are 100s of settings but I found this:
div#MainContent h2.QuickLinks, div#MainContent h2.QuickLinks a:link, div#MainContent h2.QuickLinks a:visited, div#MainContent h2.QuickLinks a:hover, div#MainContent h2.QuickLinks a:visited, div#MainContent h2.QuickLinks a:hover {
background-image: url(images/mc/mc_03.jpg);
background-color: #b0b0b0;
color: #000;
}
div#MainContent div.QuickLinks {
border: 2px solid #b0b0b0;
border-top: none;
}

Answer 1

You'll need to wrap each section in a container, and then either float the containers or give them display of inline-block to get them to sit side-by-side.
HTML:
<div class="QuickLinks-Container" style="float:left;width:48%;">
<h2 class="QuickLinks">Build Release Notes</h2>
<div class="QuickLinks">
<p>There is a list of very long law statutory codes but putting this as a test only</p>
</div>
</div>
<div class="QuickLinks-Container" style="float:left;width:48%;">
<h2 class="QuickLinks">Supplemental Release Notes</h2>
<div class="QuickLinks">
<p>here is a list of very long law statutory codes/ links and pdf links but putting this as a test only</p>
</div>
</div>
fiddle: http://jsfiddle.net/xupxf3um/

Answer 2

This is the actual Code. I did not reference all those links and docs. I am unable to see why it does not float as 2 separate boxes on the top.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="KnowledgeBase.ascx.cs" Inherits="Control_KnowledgeBase" %>
System Knowledge Base
Home I Customer Care
I Field Customer Care
I Logout
<h2 class="Billboard">
General System Information</h2>
<div class="Billboard">
<p>
80 Links and Documents
</p>
</div>
<h2 class="QuickLinks">
Build Release Notes</h2>
<div class="QuickLinks"style="float:left;width:48%;">
<p>
120 Links and Documents
</p>
</div>
</div>
<h2 class="QuickLinks">
Supplemental Release Notes</h2>
<div class="QuickLinks"style="float:left;width:48%;">
<p>
10 Link and Documents
</p>
</div>
<h2 class="Billboard">
TFACTS Customer Care</h2>
<div class="Billboard">
<p>
10 Link and Documents
</p>
</div>
<h2 class="Billboard">
Reference Materials and Storyboards
</h2>
<div class="Billboard">
<p>
250 Links and documents
</p>
</div>
<!-- InstanceEndEditable -->
</div>
<!-- CLOSES THE MAIN CONTENT DIV -->