Hi,
Having troubles understanding why these vertical scrollbars appear and
cut off my text. It's making all of the "newsBar" divs shorter than
they should be and adding vertical scrollbars. Why doesn't the content
in .productDescription push .newsBar down?
If I remove overflow: auto; on .newsBar the 2nd product listing
overlaps on the first.
I can't set an exact height on .newsBar because some of the products
will have longer descriptions.
Some help would be awesome!
The CSS:
.newsBar {
border-top: solid 1px #CCC;
overflow: auto;
padding: 12px;
width: 690px;
display:block;
position: relative;
}
h2 {
display: inline;
}
.productDescription {
position: absolute;
top: 1px;
left: 178px;
width: 440px;
padding: 0 0 8px 0;
}
.productDescription p {
margin-top: 4px;
}
.productThumb {
width: 170px;
margin: 8px 0;
}
.productThumb a img {
border:0;
}
.date {
margin-left: 2px;
}
.checkbox {
position: absolute;
left: 635px;
top: 8px;
background: #f7f7f7;
padding: 8px;
}
The HTML:
<div class="newsBar">
<div class="productThumb"><a href="#"><img src="blah.jpg"
alt="blah"></a> </div>
<div class="productDescription">
<h2><a href="#">Title</a></h2>
<span class="date">Product Code</span>
<p>High-performance unit (up to 400 kHz throughput)
featuring 4 input channels (BNC and Pod Port DIN connectors), an
analog output for stimulation or pulse generation, a trigger input,
digital inputs/outputs, High-Speed USB 2.0 interface. Includes
LabChart, Scope and LabChart Pro Modules. </p>
</div>
<div class="checkbox">
<input name="code0" value="blah" type="checkbox">
</div>
</div>
<div class="newsBar">
.... near duplicate content of the div, just with different
product info.
</div>
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [EMAIL PROTECTED]
-~----------~----~----~----~------~----~------~--~---
