Hi Sero,
The reason of scrolllbars appear is the productDescription DIV
posotion absolute. Remove it, use margin and float to fix it.
On Nov 4, 3:17 am, Sero <[EMAIL PROTECTED]> wrote:
> 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]
-~----------~----~----~----~------~----~------~--~---
