CSS: How to make a block to cover all width of parent block


Tags: html,css,css-float

Problem :

I've come across the same issue several times already. When I display one block with the float property, the next block starts to overlape the first one. e.g.

Following block of code

.row_item{
width: 30%;
display: block;
float: left;
padding: 4px;
margin-left: 5px;

}

So if in html I have:

 <div class="row_item">
  <a href="/article/nowstar/">
<img  src="/site_media/uploads/fortpost___png_120x120_crop_q85.jpg" alt="wwwwas"/>
  </a>
  <a href="/article/nowstar/" class="article_title"><h4>Paul Merfy</h4></a>
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и ...</p>
</div>



<div class="row_item">
  <a href="/article/aliohin/">
<img  src="/site_media/uploads/LR_27b_jpeg_120x120_crop_q85.jpg" alt="wdasd"/>
  </a>
  <a href="/article/aliohin/" class="article_title"><h4>Александр Алехин, первый русский чемпион</h4></a>
  <p>Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. ...</p>
</div>



<div class="row_item">
  <a href="/article/anand/">
<img  src="/site_media/uploads/elekit-battletank-mr-9101-2_jpg_120x120_crop_q85.jpg" alt="wwww"/>
  </a>
  <a href="/article/anand/" class="article_title"><h4>Vishi Anand, чемпион с родины шахмат</h4></a>
  <p>Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. ...</p>
</div>

top 100

This word top100, starts to be displayed in the row with those 3 divs....

Actually, the problem is that, I can't understand, how to make height of these blocks controllable in some way... Because if I add borders for them, (or for element which displayed after), I see that these borders are higher...

Here some screens:

http://img.skitch.com/20100121-rxb82873i6aeyuyj1aetdu8uie.png

Will be really happy if someone will help



Solution :

Looks like you need to clear your floats.

Enclose all <div class="row_item"> ... </div> in a parent DIV and give apply following CSS:

#row_items {
  width:100%;
  overflow:hidden;
}

OR

After the last <div class="row_item"> ... </div> add the following:

<br style="clear:both" />

    CSS Howto..

    How Do I Trigger My jQuery Event?

    how to set zoom level using css

    How to customize Twitter Bootstrap from Illustrator design

    How to draw child element's border outside its parent in CSS (or simulate this effect)?

    How to make links work, regardless of location in directory structure?

    How to do transparent background on few div to see background of parent

    How to retrieve the real height of a #div (including overflowed parts)

    How to make this type of image popping out of box using XHTML css

    How to php echo content into
    classes dynamicaly [closed]

    How to remove a class as each image is loaded

    How to make the slider move right and left alternatively

    How to style a png icon with CSS?

    How to set the overall Grid thumbnail height to be equal?

    How to make link color change based on location on page?

    Dompdf - how to display table and graph sidebyside?

    How to access an object from a webpage in selenium

    CSS: How to increase distance between two elements?

    CSS question: How to fix several rendering issues on http://www.fareham.ac.uk

    How to make vim alphabetically sort CSS rules within a single line?

    How to combine bold and italic in CSS?

    How i can remove gap between Menu Box

    Implementing a select element in my form, but unsure how to grab user selection for a list

    How to center a Dijit Select widget?

    How to create a form that flys out onto the screen using javascript/css

    How to give border to any element using css without adding border-width to the whole width of element?

    Css positioning: how to position a block/paragraph under another

    Changing backgrounds for CSS slideshow

    how to make a line between div boxes - simple timeline experiment

    How to modify multiple elements of a block with BEM CSS

    In Jsoup, how do I parse the CSS query by the attribute, instead of the data?