How to set margin left and right to the center div when using float:left


Tags: css

Problem :

Currently I have 3 divs with content that echoes out dynamically using php and mysql.

How can i target the center div of these 3 and apply css to it?

The purpose is to separate the first, second and third div using margin-left and right on the center div to make it look more neat and ofcourse to separate the content of each div so it doesn't look like a complete block of text.

And adding margin:left; to the class is not possible because i want the first div to display "inline" with the div above.

So is there a way to target the center div that is outputted and applying css to it?

The php:

foreach ($stmt as $row) {
$cont_short .= "
    <div class='cont_short'>
      <h1>".$row['title']."</h1>
      <p>".$row['description']."</p>
    </div>
    "
    ;

The CSS:

.cont_short{
  float: left;
  width: 31.5%;
  padding: .4em;
  margin-bottom: .5em;
  background: #DDD8DC;
  -moz-border-radius: .2em;
  -webkit-border-radius: .2em;
  -khtml-border-radius: .2em;
  border-radius: .2em;
}


Solution :

Just going with the line below

How can i target the center div of these 3 and apply css to it?

Than you can use nth-of-type selector to target the second div specifically...

div.wrap div.cont_short:nth-of-type(2) {
    color: red;
}

Demo

So the above selector selects 2nd div which is nested inside element having a class of .wrap


    CSS Howto..

    How do I set a CSS url to an absolute location?

    How to implement icon fonts like github.com

    how to make dropdown menu using html & css

    How to add border between td's in which are in different tr's?

    show/hide div on click

    How do I specify another width for newly added divs in javascript

    How to style a div to be a responsive square? [duplicate]

    CSS: How to fix the width of a vertical menu?

    How to set a css class to table header cell

    How to change this FontAwesome to image in Css?

    How do I put a clear button inside my HTML text input box like the iPhone does?

    How to position element between two sections while also being responsive?

    how to align div horizontally using CSS?

    JQuery : How to disable mouse move vertically?

    how to align an image, bottom right of table cell by using css?

    How do I overlay a gradient (background) on top of a border?

    How to appy font color from li:hover to inner a link text using CSS

    How do i add an external CSS file as well as CSS in the HTML file?

    how to style xml tag attribute with css

    How to get a css stylesheet value that is not interpreted by the browswer?

    How to add custom code to specific
  • s in wordpress while building navigation?
  • Foundation Framework: How can I get multiple links in a mobile drop-down to be horizontally aligned and not stacked?

    how to give space for every row (CSS issue)

    How to fade out and fade in the divs sequentially

    How to create table by using div

    How to customize HTML/CSS tooltips?

    How can I make a two column layout's main div auto fit to browser width?

    How to put button next to Image in CSS?

    How can I insert dynamic text into a div with absolute position?

    How can I style this span for a quote without causing this layout problem?