CODEWITHSUNDEEP
htmlcssresponsive-design
Banshee
Banshee

Reputation: 15807

Strange extra space between 2 elements?

I try to build a responsive design for a website but have runned in to a problem.

Visit this page : http://test.ufeed.se/

Change your browser size to under 820px and you will see a responsive design. The problem here is that I get a strange space between the data and the title? I have tried to find why there is a space but without luck?

This is the simple markup of the part : 

<div class="rightPostCell">
        <div class="titleCon">
            <div class="linkIcoCon">
               ...
            </div>
            <div class="floatLeft">
               ...
            </div>
        </div>
        <div class="data dimText">
            <div class="commentsCon">
                ...
            </div>
            <div style="clear:both;"></div>
            <div class="createdDateCon">
                ...
            </div>
            <div style="clear:both;"></div>
            <div class="baseLinkCon">
                ...
            </div>
        </div>
    <div style="clear:both;"></div>
    </div>

Why is there a space between title and data? And how do I remove it?

Upvotes: 2

Views: 132

Answers (5)

user1583190
user1583190

Reputation:

There are a lot of solutions. Here is one:

mobile.css line 80

.postContainer {
  width: 100%;
  padding: 3px;
  float: left;
}

PostList.css line 37

.postContainer .rightPostCell {
  float: left;
}

Upvotes: 0

Manish Sharma
Manish Sharma

Reputation: 1720

try this one it will solve your issue add clear class after left and right cell and add over flow hidden in .postContainer .rightPostCell class

<div class="postContainer">
      <div class="leftPostCell">data</div>
      <div class="rightPostCell">data</div>
      <div style="clear:both;"></div>
    </div>

.postContainer .rightPostCell {margin-left: 123px;overflow: hidden;}

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

Changes you need to make to your mobile.css file

.postContainer .titleCon{
   overflow:hidden; /* ADD this property */
}

.postContainer .data{
   overflow:hidden; /* ADD this property */
   clear:both; /* REMOVE this property */
}

Upvotes: 0

kelly johnson
kelly johnson

Reputation: 1636

line 37 of your PostList.css add overflow:auto

in mobile.css line 80 change float:none to clear:both

will need to add some margin after that but it removes the space that occurred.

Upvotes: 0

Adrian
Adrian

Reputation: 46442

Looks like it's a float issue (I find issues tend to crop up every time I use float, generally I prefer display: inline-block because it introduces fewer bizarre bugs like this) - if I disable clear: both on the data, it falls into place correctly.

Upvotes: 2

Related Questions