CSS: How to position divs 2 by 2


Tags: css,html,formatting,webpage

Problem :

the trick is that i want div number 3 to be slightly higher in a way that the margin between 1 and 3 is 15 px like 2 and 4.

http://www.tiikoni.com/tis/view/?id=528cedf

The problem is that the size of the div differs with the size of the data from my SQL query, so i don't know what is the size of the div. And the divs are obtained in the order 1,2,3,4,5..... 2 by 2 where each one represents an element of my query. I already divided divs in leftobject, rightobject.

.leftobject
{
float:left;
position: relative;
width: 300px;
border-style: outset;
border-width: 3px;
border-color: #EdEDED;
background-color: #FFFFFF;
border-radius: 15px;
margin-bottom: 15px;
}   

.rightobject
{
margin-left: 315px;
position: relative;
width: 300px;
border-style: outset;
border-width: 3px;
border-color: #EdEDED;
background-color: #FFFFFF;
border-radius: 15px;
margin-bottom: 15px;
}   

I am running a for loop for outputting divs using json if element % 2 = 0 then it's on the left side else it's on the right side.

Thank you.



Solution :

You can always use float:right; in addition to float:left;.

#wrap div:nth-of-type(odd) {
    float:left;
}
#wrap div:nth-of-type(even) {
    float:right;
}

Fiddle


    CSS Howto..

    How to make the table fit to the mobile screen size in css?

    Background Image in WebView showing in Simulator, but not on Device

    How to reset the input css to the defaults in Bootstrap 3.2

    How to change background while changing visiblity?

    How to set responsively images on images to appear fixed using HTML+CSS+JS?

    How apply CSS to browse button

    How to delete space in css?

    Live search div not showing up when something is entered

    How to hyperlink a css box [closed]

    how to place css div container “text-align: center ;”

    How to match the last n children with CSS?

    how to display a dropdown ul two per row

    How to make this arrow in CSS only?

    How to create a modal popup using javascript and CSS

    How can I print the selected item from bootstrap drop down using jquery or javascript in php

    How to using CSS to set content of column to top not center in JSF, primefaces?

    HTML/CSS How to make menu slide up when menu item is clicked?

    How to change active link color in navigation bar

    How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

    CSS. How to add small image on background?

    How to determine when document has loaded after loading external css

    How to draw a shape using a piece of image in php

    Horizontal
      navigation - how to vertical align contents of

    How to apply css in react component when using ES6?

    How to include PHP code in CSS?

    How to make an Image overlay the site on click?

    CSS Flex Box — flex-wrap:wrap; How to style a specific line?

    How to make image thumbnail look like video with CSS

    How to include css file in a JavaFx Spring application

    How do I fit text into footer margins