I have been attempting to adjust the width (or max-width) of a floating div, but so far, none of the options I've tried have been successful.
Below is the HTML code I am working with:
<div class="tab-content">
<div id = "basicInfo" class = "tab active">
<h1>Results</h1>
<span style="clear: both;"></span>
<p>Browser version: internet explorer 8</p>
<h2>Plan details:</h2>
<ul>
<li>Plan description: not set</li>
</ul>
</div>
<div id = "statInfo" class = "tab">
<div id="chartcontainer"><p>Pie chart placeholder</p></div>
<h1>Statistics</h1>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>
And here is my CSS code:
.tab-content {
position: relative;
border-top-left-radius: 0;
padding: 10px 10px;
margin-bottom:20px;
background:#FEFEFE;
min-width: 1165px;
max-width: 1200px;
overflow: hidden;
}
#basicInfo {
border-style: none;
}
#statInfo {
border-style: none;
}
#chartcontainer {
width: 200px;
height: 200px;
max-width: 200px;
max-height:200px;
margin: 20px 20px;
float:right;
}
.clr {
clear:both;
}
The issue I'm facing is that the div with the class chartcontainer is not floating correctly to the right next to the three "text" paragraphs. The height adjusts as expected, but the width always fills the "blank space" from the paragraphs to the edge of the parent div.
Any help would be greatly appreciated.