Geek asks and answers

CSS floated div, not shrunk to content

This is very strange for me, and although I was looking, everyone seems to have the opposite problem for me (the floating div is being compressed)!

I have this page: http://www.tameside.gov.uk/test/news , which uses PHP to generate the div at the top for various news, and it works fine, however, the elements (which are floating divs) are in a div that floats on the left, which for some reason does not shrink to those elements (which are just content).

As far as I know, a floating div has always been reduced to its contents, but this particular one is expanded to 100% of the page. I have colored the background of the containing div in gray to show you what I mean.

I want it to shrink to content so that I can use a centering trick, and then it will center the div no matter how many divs are in the top news. But since it does not contract, the trick obviously does not work.

CSS for each of the news sections below:

.news-top-item {
    border-radius: 10px;
    border-color: #3f7dae;
    border-style: solid;
    border-width: 2px;
    float: left;
    width: 19%;
    text-align: center;
    margin-right: 0.5%;
    height: 13em;
    padding-top: 0.5em;
    cursor: pointer;
    position: relative;
}

They also have a gap inside which there is little CSS attached to it to link everything:

.news-top-item span {
    display: inline;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left: 0;
    z-index: 2;
    background-image: url('/tmbc_images/include/1pixel.gif');
    cursor: pointer;
}

I doubt I intervened, but put him just in case.

The outer div has only "float: left" and the background color applied to it.

Any help would be greatly appreciated.

Thank,

James

+3
source share
4 answers

You should remove float: left and use display: inline-block instead

.news-top-item {
    border-radius: 10px;
    border-color: #3f7dae;
    border-style: solid;
    border-width: 2px;
    display:inline-block;
    width: 19%;
    text-align: center;
    margin-right: 0.5%;
    height: 13em;
    padding-top: 0.5em;
    cursor: pointer;
    position: relative;
}

And add text-align: center to your containing div

+1
source 
width:100%;
height:100%;

- 100% ...

width:auto;
height:auto;
0

:

.news-top-item {
    border-radius: 10px;
    border-color: #3f7dae;
    border-style: solid;
    border-width: 2px;
    float: left;
    width: 200px; /* <--- */
    text-align: center;
    margin-right: 2px; /* <--- */
    height: 13em;
    padding-top: 0.5em;
    cursor: pointer;
    position: relative;
}
0

Just quickly looked through your page and quickly fixed in the news at the top to add margin-left: 20%; to the inline style of the div that contains the news.

Hope that solves your problem.

-1
source

More articles:


All Articles