How to align div elements?

Question

I am trying to make a jsp page on product details. I'm a bit new to CSS so I am unable to align the div elements side by side.

.nav {
  float: right;
}
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #F2EEE9;
  font: normal 13px/1.5 Georgia, Serif;
  color: #333;
}
.item {
  background-color: #fff;
  position: relative;
  margin: 30px auto 30px auto;
  width: 978px;
}
.item img {
  display: block;
  margin: auto;
}

<div class="item">
  <div style="background: url(http://placehold.it/370x330); height: 370px; width: 330px;"></div>
    <div class="pdetails">
        </div>
</div>

I want to add a div element on the right side of the image box but I am unable to do it.

image preview

Possible copy of http://stackoverflow.com/questions/5765848/efficient-way-to-align-divs-side-by-side — Ayush, Jul 10 '15 at 07:19
i have edited the code ..i want to align the `.pdetails
` tag right next to the image tag — amol singh, Jul 10 '15 at 07:27

Nikhil Batra · Accepted Answer · 2015-07-10T07:35:22.927

6

Use style="display:inline-block" with the div.

This is because <div> are block elements by default so they will take the whole of the row on the page. Using display:inline-block will make it align on the same line thus behaving like inline element but retaining its block element properties.

Read more about display properties in Css.

Edit: As per the question add the following styles(dummy values change accordingly):

For the div containing image:

display: inline-block

.pdetails {
  height: 370px;
  width: 330px;
  display: inline-block;
}

See the screenshot:

enter image description here

edited Jul 10 '15 at 07:35

answered Jul 10 '15 at 07:14

Nikhil Batra

3,118
14
19

i have edited the code ..i want to align the `.pdetails
` tag right next to the image tag
– amol singh Jul 10 '15 at 07:27

score 0 · Answer 2 · answered Jul 10 '15 at 07:15

0

<div class="item">
  <div style="background: url(<%=request.getParameter("img")%>); height: 370px; width: 330px; display:inline-block">
  </div>
</div>

answered Jul 10 '15 at 07:15

Ravi Chauhan

1,409
13
26

Would you consider adding some explanation to your answer to make it even more useful? – Lars Ebert Jul 10 '15 at 08:21

score 0 · Answer 3 · answered Jul 10 '15 at 07:24

float : The float property specifies whether or not a box (an element) should float.

Note: Absolutely positioned elements ignores the float property!

float: none|left|right|initial|inherit;

Clear : The clear property specifies on which sides of an element where floating elements are not allowed to float

Css syntax :

<div id="wrapper">
        <div id="leftcolumn">
            Left
        </div>
        <div id="rightcolumn">
            Right
        </div>
    </div>

css

 body {
        background-color: #444;
        margin: 0;
    }

    #wrapper {
         width: 1005px;
         margin: 0 auto;
    }
    #leftcolumn, #rightcolumn {
        border: 1px solid white;
        float: left;
        min-height: 450px;
        color: white;
    }
    #leftcolumn {
         width: 250px;
         background-color: #111;
    }

    #rightcolumn {
         width: 750px;
         background-color: #777;
    }

http://jsfiddle.net/8weSA/1/

score 0 · Answer 4 · answered Jul 10 '15 at 07:25

You can do it simply by making both the elements float left like i did it in the example or there are other ways like inline and inline-block.

.fleft{float:left}

<img class='fleft' src='http://cdn2.expertreviews.co.uk/sites/expertreviews/files/0/69//nexus_6_0134.jpg?itok=lYrhMv6H' height='200px'>
<div class='fright title'>Nexus 6</div>

score 0 · Answer 5 · answered Jul 10 '15 at 08:15

0

Its very simple. just use :

html:

<div class="left-align">
..your left item..
</div>

<div class="right-align">
    ...your right item..
    </div>

css:

left-align{
float:left;
width:50%;
}

you just have to give your left item "float:left", because often right item depends on your left item's width and its float property.

answered Jul 10 '15 at 08:15

Rohit Kandpal

11
2

1

Floating elements comes with other possible problems, that can be fixed for sure, but still. In most cases it's much easier to use a `display: inline-block` which comes with less inconvenients and additional advantages (regarding alignment for example). [cfr this question](http://stackoverflow.com/questions/15172520/advantages-of-using-displayinline-block-vs-floatleft-in-css) – Laurent S. Jul 10 '15 at 08:37

How to align div elements?

5 Answers5

Linked