CODEWITHSUNDEEP
csshtml
user1152440
user1152440

Reputation: 905

Gap Inserted Between Div Rows

I have a simple row listing certain funding opportunities. I'm confused to a behaviour that is occurring with the CSS/HTML code where there will be a gap between entries on the list if I don't use separate classes. For example, the below picture indicates what happens when I use: 

<div class="panel-inside">
    <div class="row">
        <div class="label">Funding Opportunity 1</div>
        <div class="label-date">Sep. 16, 2012</div>
    </div>
    <div class="listSeparator"></div> 
    <div class="row">
        <div class="label">Funding Opportunity 2</div>
        <div class="label-date">Dec. 2, 2012</div>
    </div>
</div>

enter image description here

However if I close each "panel-inside" class then the result is different.

<div class="panel-inside">
    <div class="row">
        <div class="label">Funding Opportunity 1</div>
        <div class="label-date">Sep. 16, 2012</div>
    </div>
</div>
<div class="listSeparator"></div> 
<div class="panel-inside">
    <div class="row">
        <div class="label">Funding Opportunity 2</div>
        <div class="label-date">Dec. 2, 2012</div>
    </div>
</div>

enter image description here

I need the formatting to be like the second picture, but I don't understand why I have to close each "panel-inside" class. Shouldn't that div be the 'container' for rows? I think the reason the gap is there is because the second row starts where the text from the one before it left off, but I have no idea how to fix this. I've included the CSS code below with border colour outlining to help differentiate the elements. Thanks for any help!

.panel-inside { 
    border: 3px dotted purple;
    border-left: 2px solid #D6D3D6;
    border-right: 2px solid #D6D3D6;
    background: white;
    padding-left: 0px;
    padding-right: 0px;
    overflow:auto;
    border-radius:7px;
} 

.row                                   
{
    height: 40px;      
    width:100%;        
    vertical-align:middle;
}

.label                               
{
    border: 1px dotted blue;
    font-family: BBAlpha Sans;
    font-size: 15pt;
    display:inline;    
    float:left;
    line-height:40px; 
    margin-left:5px;   
}

.label-date
{
    border: 1px dotted black;
    font-family: BBAlpha Sans;
    font-size: 12pt;
    color:#686868;
    display:inline;    
    float:right;
    line-height:40px; 
    margin-right:7px;  
}

.listSeparator                
{
    border-bottom: solid 1px Silver;
}

Upvotes: 0

Views: 289

Answers (3)

w3uiguru
w3uiguru

Reputation: 5895

Here is the solution without closing class="panel-inside" class for every row.

HTML is similar as first condition but one difference -

<div class="listSeparator">&nbsp;</div>

Css:

.listSeparator { border-bottom: solid 1px Silver; clear:both;}

Clear allows floated elements occuring earlier in the document to float along its sides. So by using clear:both means that your div will shifted in the end of other floating elements beside your div.

http://www.free-scripts.net/html_tutorial/css/properties/classify/clear.htm

http://www.positioniseverything.net/easyclearing.html

Upvotes: 0

Christoph
Christoph

Reputation: 51201

Seriously - when you have tabular data and a tabular structure - use tables... far more robust and crossbrowser compatible.

Optionally - add overflow:auto; to your .row OR clear:both;to .listSeparator, this should solve the issue.

edit: you can omit the height when using overflow and also omit the .listSeparator (by adding the border to .row).

Upvotes: 2

Mihalis Bagos
Mihalis Bagos

Reputation: 2510

Try modifying the listSeparator class like so:

.listSeparator                
{
    border-bottom: solid 1px Silver;
    clear:both;
}

This happens because you don't clearfix the .row class properly, but the outside extra div serves as a partial resetter.

Upvotes: 2

Related Questions