prevent divs wrapping inside a container div [Archive]

sridhar_ratna

03-18-2010, 01:55 PM

Hi,

I am placing a table of data in a div. And all these div's are placed inside of container div.
What i observed is that, the child divs are wrapping to the next row of a container div when there is no space.
Instead i would like to have a horizontal scrollbar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Device Status</title>
<link href="global1.css" rel="stylesheet" type="text/css" />
<link href="status.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="global-container">
<div id="content" class="clearfix">
<div class="section">
<div class="section-header"><h1>Device Status</h1></div>
<div class="section-content clearfix device-container clearfix" id="DevicesContainer">
<div style="float: left; width: 240px;" class="left device-wrapper clearfix">
<div class="clearfix device">
<div class="clearfix device-header">
<div class="float-left device-header">
<h1> Switch SW0<span class="sw-hz-message">ERROR</span></h1>
</div>
</div>
</div>
<table class="ds-table">
<tbody>
<tr>
<th>
Label
</th>
<th>
Name
</th>
<th>
I/P Status
</th>
</tr>
</tbody>
</table>
<div style="float: left; width: 240px; height: 135px; overflow-y: auto; overflow-x: hidden;" class="left device-wrapper clearfix">
<table id="SW0" class="ds-table">
<tbody>
<tr class="odd-row">
<td style="padding: 5px;">
Bit 1
</td>
<td style="padding: 5px 5px 5px 25px;">
AUX1.INPUT
</td>
<td style="padding: 5px;" align="center">
<img src="images/0.png">
</td>
</tr>
<tr class="even-row">
<td style="padding: 5px;">
Bit 2
</td>
<td style="padding: 5px 5px 5px 25px;">
AUX2.INPUT
</td>
<td style="padding: 5px;" align="center">
<img src="images/0.png">
</td>
</tr>
</tbody>
</table>
</div>
<span class="output-string">
<h1 style="margin-left: 10px;">Output String is 00</h1>
</span>
</div>
<div style="float: left; width: 240px;" class="left device-wrapper clearfix">
<div class="clearfix device">
<div class="clearfix device-header">
<div class="float-left device-header">
<h1> Signal SG1<span class="sig-message">6</span></h1>
</div>
</div>
</div>
<table class="ds-table">
<tbody>
<tr>
<th>
Label
</th>
<th>
Name
</th>
<th>
I/P Status
</th>
</tr>
</tbody>
</table>
<div style="float: left; width: 240px; height: 135px; overflow-y: auto; overflow-x: hidden;" class="left device-wrapper clearfix">
<table id="SG1" class="ds-table">
<tbody>
<tr class="odd-row">
<td style="padding: 5px;">
# PLATE
</td>
<td style="padding: 5px 5px 5px 25px;">
TRUE.BIT
</td>
<td style="padding: 5px;" align="center">
<img src="images/0.png">
</td>
</tr>
<tr class="even-row">
<td style="padding: 5px;">
C PLATE
</td>
<td style="padding: 5px 5px 5px 25px;">
FALSE.BIT
</td>
<td style="padding: 5px;" align="center">
<img src="images/0.png">
</td>
</tr>
</tbody>
</table>
</div>
<span class="output-string">
<h1 style="margin-left: 10px;">Output String is 00110</h1>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

global1.css
html, body, div, span, h1, p, center
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}

body {
font: 400 normal 12px/ 1.6em "Lucida Grande", "Trebuchet MS", sans-serif;
background: #8FA2B0 url("../images/bg.png") top left repeat;
color: #333;
margin: 0;
padding: 0;
height: 100%;
}

.global-container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
display:inline;

/* the bottom margin is the negative value of the footer's height */
}

#content {
padding: 10px 10px 60px 0;
}

.section {
margin: 0 0 10px 10px;
padding: 4px;
background: #FFF;
}

.section-header {
background: #385A76 url("../images/thead.gif") left center repeat-x;
padding: 4px;
text-align: center;
}

.clearfix {
display: inline-block;
}

html .clearfix {
height: 1%;
}

status.css

.device-wrapper {
float: left;
margin: 2px 2px 0 0;
padding: 2px;
}

.sig-message{
padding : 0 0 0 150px;
}

.sw-hz-message{
padding : 0 0 0 110px;
}

.sw-hz-trns-message{
padding : 0 0 0 70px;
}

.device-container {
background: #8FA2B0 url("../images/bg.png") 0 0 repeat scroll;
padding-left: 4px;
width:300px;
}

.device {
padding: 0px;
margin: 2px 1px 0 0;
border: #fff 4px solid;
}

.device-header {
clear: both;
white-space: nowrap;
overflow: hidden;
background: #41637F;
}

.ds-table {
margin: 0px;
border-collapse: collapse;
width : 240px !important;
}

.ds-table th {
padding: 4px 6px 4px 0px;
background: #41637F;
color: #FFF;
font-size: 11px;
font-weight: bold;
width : 55px;
}

.ds-table td {
padding: 4px 6px 4px 0px;
width : 25px;
height :18px;
}

.odd-row {
background-color: #fff
}

.even-row{
background-color: #F2F2F2;
}

.device-header h1,.device-header h3 {
margin: 2px 4px;
font-size: 11px;
font-weight: bold;
text-align: left;
color: #FFF;
}

.output-string {
margin: 0 4px;
font-size: 13px;
font-weight: bold;
text-align: left;
color: #FFF;
}

please help me to solve this tricky one.

JBibbs

03-18-2010, 04:44 PM

Can you use a fixed height?

sridhar_ratna

03-19-2010, 07:47 AM

Can you use a fixed height?

I kept fixed height. but still no use. I am getting vertical scrollbar

JBibbs

03-19-2010, 11:50 AM

Yeah, I was just checking to make sure it was ok.

I attached 3 new modified files. Give these a shot.

Basically, I used positioning instead of floats to pull the containers out of the natural order, and to still allow the background color to come through.

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Device Status</title>
<link href="global1.css" rel="stylesheet" type="text/css" />
<link href="status.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="global-container">
<div id="content" class="clearfix">
<div class="section">
<div class="section-header"><h1>Device Status</h1></div>
<div class="section-content device-container" id="DevicesContainer">
<div class="device-wrapperL clearfix">
<div class="clearfix device">
<div class="clearfix device-header">
<div class="float-left device-header">
<h1> Switch SW0<span class="sw-hz-message">ERROR</span></h1>
</div>
</div>
</div>
<table class="ds-table">
<tbody>
<tr>
<th>
Label
</th>
<th>
Name
</th>
<th>
I/P Status
</th>
</tr>
</tbody>
</table>
<div class="left device-wrapper clearfix">
<table id="SW0" class="ds-table">
<tbody>
<tr class="odd-row">
<td style="padding: 5px;">
Bit 1
</td>
<td style="padding: 5px 5px 5px 25px;">
AUX1.INPUT
</td>
<td style="padding: 5px;" align="center">
<img src="images/0.png">
</td>
</tr>
<tr class="even-row">
<td style="padding: 5px;">
Bit 2
</td>
<td style="padding: 5px 5px 5px 25px;">
AUX2.INPUT
</td>
<td style="padding: 5px;" align="center">
<img src="images/0.png">
</td>
</tr>
</tbody>
</table>
</div>
<span class="output-string">
<h1 style="margin-left: 10px;">Output String is 00</h1>
</span>
</div>
<div class="left device-wrapperR clearfix">
<div class="clearfix device">
<div class="clearfix device-header">
<div class="float-left device-header">
<h1> Signal SG1<span class="sig-message">6</span></h1>
</div>
</div>
</div>
<table class="ds-table">
<tbody>
<tr>
<th>
Label
</th>
<th>
Name
</th>
<th>
I/P Status
</th>
</tr>
</tbody>
</table>
<div class="left device-wrapper clearfix">
<table id="SG1" class="ds-table">
<tbody>
<tr class="odd-row">
<td style="padding: 5px;">
# PLATE
</td>
<td style="padding: 5px 5px 5px 25px;">
TRUE.BIT
</td>
<td style="padding: 5px;" align="center">
<img src="images/0.png">
</td>
</tr>
<tr class="even-row">
<td style="padding: 5px;">
C PLATE
</td>
<td style="padding: 5px 5px 5px 25px;">
FALSE.BIT
</td>
<td style="padding: 5px;" align="center">
<img src="images/0.png">
</td>
</tr>
</tbody>
</table>
</div>
<span class="output-string">
<h1>Output String is 00110</h1>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

status.css

.device-wrapperL {
display: inline;
margin: 2px 2px 0 0;
padding: 2px;
position: absolute;
left: 250px; /***** LEFT OFFSET EACH NEW OBJECT SHOULD OFFSET BY +250 ******/
}

.device-wrapperR {
display: inline;
margin: 2px 2px 0 0;
padding: 2px;
position: absolute;
}

.sig-message{
padding : 0 0 0 150px;
}

.sw-hz-message{
padding : 0 0 0 110px;
}

.sw-hz-trns-message{
padding : 0 0 0 70px;
}

.device-container {
background: #8FA2B0 url("../images/bg.png") 0 0 repeat scroll;
padding-left: 4px;
height: 300px;
position: relative;
overflow: auto;
}

.device {
padding: 0px;
margin: 2px 1px 0 0;
border: #fff 4px solid;
}

.device-header {
clear: both;
white-space: nowrap;
overflow: hidden;
background: #41637F;
}

.ds-table {
margin: 0px;
border-collapse: collapse;
width : 240px !important;
}

.ds-table th {
padding: 4px 6px 4px 0px;
background: #41637F;
color: #FFF;
font-size: 11px;
font-weight: bold;
width : 55px;
}

.ds-table td {
padding: 4px 6px 4px 0px;
width : 25px;
height :18px;
}

.odd-row {
background-color: #fff
}

.even-row{
background-color: #F2F2F2;
}

.device-header h1,.device-header h3 {
margin: 2px 4px;
font-size: 11px;
font-weight: bold;
text-align: left;
color: #FFF;
}

.output-string {
margin: 0 4px;
font-size: 13px;
font-weight: bold;
text-align: left;
color: #FFF;
}

global1.css

html, body, div, span, h1, p, center
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}

body {
font: 400 normal 12px/ 1.6em "Lucida Grande", "Trebuchet MS", sans-serif;
background: #8FA2B0 url("../images/bg.png") top left repeat;
color: #333;
margin: 0;
padding: 0;
height: 100%;
}

.global-container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
display:inline;

/* the bottom margin is the negative value of the footer's height */
}

#content {
padding: 10px 10px 60px 0;
width: 300px;
}

.section {
margin: 0 0 10px 10px;
padding: 4px;
background: #FFF;
}

.section-header {
background: #385A76 url("../images/thead.gif") left center repeat-x;
padding: 4px;
text-align: center;
}