CODEWITHSUNDEEP
htmlcss
user846198
user846198

Reputation: 29

How to put divs of same class under each other?

what do i do that putting class auto_box under each other. not putting side by side?

like this: https://i.sstatic.net/g9fEZ.gif

html:

<div class="auto_box"></div>
<div class="auto_box"></div>
<div class="auto_box"></div>

css:

.auto_box {
    background: #ffffec;
    width: 173px;
    direction: rtl;
    font:16px Tahoma, Arial, Helvetica, Sans-serif;
    color: #9d9d9d;
    text-align: right;
    margin: 8px 5px 0;
    padding-left: 5px;
    padding-right: 5px;
    float: right;
    border-radius: 3px;
    border: 1px solid #cdcdcd;
}

Upvotes: 0

Views: 4548

Answers (7)

gersande
gersande

Reputation: 463

Your css should work the way you want it to like this:

.auto_box {
    background: #ffffec;
    width: 173px;
    direction: rtl;
    font:16px Tahoma, Arial, Helvetica, Sans-serif;
    color: #9d9d9d;
    text-align: right;
    margin: 8px 5px 0;
    padding-left: 5px;
    padding-right: 5px;
    float: right;
    clear: both;
    display: block;
    border-radius: 3px;
    border: 1px solid #cdcdcd;
}

Upvotes: 0

str11
str11

Reputation: 437

Add clear: both to .auto_box css

You can keep float: right for positioning purposes it wont it effect it

Upvotes: 0

Tepken Vannkorn
Tepken Vannkorn

Reputation: 9723

I don't know what kind of stuff you're doing. To my idea I would use list and style it later, even navigation. it works. for example,:

<ul>
    <li><a href="">Home</a></li>
    <li><a href="">Products</a></li>
    <li><a href="">About</a></li>
</ul>

ul{
  list-style:none;
  line-height:40px;
}
ul li{
  float:left;
  display:inline-block;
  width:150px;
  padding:5px 20px; /* or something based upon need */
}
ul li a{
  text-decoration:none;
  color:/*another color*/;
  background:/*another color*/
  display:block;
}
ul li a:hover{
  color:/* another color */
  background:/* another color */
}

or you can place your divs in another div, then setting them up together, it's easier than setting up style for diffrent multiple divs together,

Upvotes: 1

Xavier
Xavier

Reputation: 8362

For the effect you are trying achieve i would use a containing div to float the elements right, and then just display the elements as block items within that div

Example: http://jsfiddle.net/DCzwu/

html

<div class="right">
     <div class="auto_box"></div>
     <div class="auto_box"></div>
     <div class="auto_box"></div>
</div>

css

.right
{
     float:right;
}
.auto_box {
    background: #ffffec;
    width: 173px;
    direction: rtl;
    font:16px Tahoma, Arial, Helvetica, Sans-serif;
    color: #9d9d9d;
    text-align: right;
    margin: 8px 5px 0;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    border: 1px solid #cdcdcd;

    height:30px;
    display:block;
}

Upvotes: 3

Barry Kaye
Barry Kaye

Reputation: 7759

Try and remove float:right; from your CSS.

Upvotes: 0

knittl
knittl

Reputation: 265339

you are floating your boxes to right, so they will appear side by side. remove float:right so they become block level elements again:

.auto_box {
    background: #ffffec;
    width: 173px;
    direction: rtl;
    font:16px Tahoma, Arial, Helvetica, Sans-serif;
    color: #9d9d9d;
    text-align: right;
    margin: 8px 5px 0;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    border: 1px solid #cdcdcd;
}

if you want them right aligned, use margin-left:auto to have them stick to the right side of the screen

Upvotes: 4

jfriend00
jfriend00

Reputation: 707546

It's the float:right in your CSS that is telling the browser to collect as many of the boxes on the same line as will fit. If you remove that, the boxes will go on top of each other.

If you want them right-aligned and on top of one another, you will probably have to show us the rest of your HTML/CSS context so we could advise on that.

Upvotes: 0

Related Questions