like this
css
.newsBar {
border-top: solid 1px #CCC;
overflow: auto;
padding: 12px;
width: 690px;
display:block;
}
h2 {
display: inline;
}
.productDescription {
padding: 0 0 8px 0;
margin:1px 80px 0 178px;
}
.productDescription p {
margin-top: 4px;
}
.productThumb {
width: 170px;
margin: 8px 0;
float:left;
}
.productThumb a img {
border:0;
}
.date {
margin-left: 2px;
}
.checkbox {
background: #f7f7f7;
padding: 8px;
float:right;
}
html
<div class="newsBar">
<div class="productThumb"><a href="#"><img src="blah.jpg"
alt="blah"></a> </div>
<div class="checkbox">
<input name="code0" value="blah" type="checkbox">
</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>
<div class="newsBar">
.... near duplicate content of the div, just with different
product info.
</div>
Sero 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]
-~----------~----~----~----~------~----~------~--~---
