CSS: problem with Float property

Question

Here is my problem with CSS when I use the Float property My picture: http://www.sourimage.com/show-image.php?id=fb748238bf7e4ab12001e64cb543066b

It does not look good because having many blank space among the block. My CSS code:

.listcol{
    width:180px;
    float:left;
    margin-right:5px;
    background-color:#eceff1;
    margin-top: 1px;
    min-height:200px;
    background-image: url(../images/colbg_btm.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    margin-bottom: 0px; 
}
.listcol ul{
    margin-left: 0px;
    padding-left: 0px;
    padding-top: 0px;
    margin-top: 0px;
    list-style-type: none;
}

Please take a look to review and help me to correct no any blank space on the screen! Thanks so much!

Answer 1

Can't see the picture, but maybe if you express the width as a percentage of the width of the page...Instead of 180px, maybe

width: 80%;

..using whatever percentage looks best to you.

Answer 2

I should demonstrate my picture as below

---------------  ----------------
|    block1    | |              |
|              | |    block2    |
|--------------| |              |
                 |              |
     space       |---------------
----------------
|              |
|    block3    |
|              |
|--------------|

My expectation is to have no space. Please give me solution! Thanks so much

Answer 3

I think we need to see your html markup to be sure, but what you need to do is have a structure where block1 and block3 are in a container block. The container can float, and block2 can float. Block1 and block3 do not need to float.

Answer 4

can you post some of the html? Or fix the image? It looks like you took care of the left margin for your UL, but there may some extra margin lying around in some of your other block elements since they tend to come with built in margin.

i also agree with Robert Harvey. Try to use percentages where reasonable instead of pixels. it'll be more consistent across any changes the user or browser makes to screen size, font size, etc.

are block1, 2, and 3 all UL's in the listcol div?

Answer 5

I think u can solve your problem by giving line-height to li as "0px".

ul li { 
 float:left;
 line-height:0px;
}
ul {
 width:124px;
}


<ul>
 <li><img src="images.jpeg" /></li>
 <li><img src="images.jpeg" /></li>
</ul>

Answer 6

I try to work around on your ideas but It's not fine. Also, I put my HTML as below:

#content02{
    width:740px;
    float:left;
    margin-left: 10px;
}
.wrapper{
    width:760px;
    margin-left:auto;
    margin-right:auto;
}
.main02{
    width:760px;
    float:left;
    background-color:#FFFFFF;
    padding-bottom:20px;
    padding-top: 10px;
}
.listcol{
    width:180px;
    float:left;
    --position: absolute;
    margin-right:5px;
    background-color:#eceff1;
    margin-top: 1px;
    min-height:200px;
    margin-bottom: 0px; 
}
.listcol ul{
    margin-left: 0px;
    padding-left: 0px;
    padding-top: 0px;
    margin-top: 0px;
    list-style-type: none;
}
.listheader{
    display: block;
    margin-top: 0px;
    background-color: #2F404A;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 10px;
    width: 180px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-position: top;
    text-align: center; 
}

<div class="wrapper">

<div class="main02">
<div id="content02">
<div class="listcol">
<ul>

</ul>
</div>
<div class="listcol">
<ul>

</ul>
.....
.....
</div>

Please to note that the number of block increasing dynamically and use the same style "listcol". You can see the picture depicting this issue here: http://www.sourimage.com/show-image.php?id=fb748238bf7e4ab12001e64cb543066b

Answer 7

Please give the link to your site (the page with the problem), and I will solve this issue for you.

Answer 8

The space can't be avoided in current solution because it's the height of the block2 that's "pushing" down block3 when it's floated to to left.

So you will probably need a completelly different html layout to solve your request...

Please show us som more samples of how you want the page to look with more li elements of different heights.

Answer 9

Huynh:

You need to wrap a div around each of your columns. That should allow the boxes to flow from top to bottom within their own div, and then you can float each of the div columns. Give each div a width of 25%. You might also want to wrap the whole thing in a div, and give it a width of 100%.

Answer 10

Please try getting rid of "min-height" in the '.listcol'. Also, get rid og the "position: absolute" in the '.listcol'.

Let me know if that worked.

If it doesn't, you can try to modify your HTML to be in columns, so for example:

<div class="column">

    <div class="box"></div>

    <div class="box"></div>

</div>

<div class="column">

        <div class="box"></div>

        <div class="box"></div>

</div>

And the CSS:

.column{
    float: left;
    width: 200px;
    margin-right: 5px;
}

.box{
    margin: 0px;
}