• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 861
  • Last Modified:

Line up divs How do I do it?

I am trying to get multiple divs with an image in each of them to line up from left to right all within a Div container.

It works great when I do it like this without each image in a div like this
css is this
.thumbgrid {
      width: 840px;
      height: 74px;
      overflow: hidden;
      margin: 0;
      text-align: center;
      font-size: 0;
      line-height: 1px;
      }

<div class="thumbgrid" style="z-index: 101; left: 0; width: 840px; position: static;
           top: 92px; height: 77px">
           
<a href="#" class="imagehover"><img src="someimage1.jpg" border="0" title="Artist 1" style="width: 53px; height: 74px;" /></a>

<a href="#" class="imagehover"><img src="someimage2.jpg" width="46" height="74" border="0" title="Artist 2" /></a>
/*-- I have around 15 images that will span accross the top and if I do them like what you see above it
works just fine but .... its not what I need. --*/
</div>

The above images will line up and if I go over 15 images it will start a new row and so on ...

Ok No what I need to is to able to make the divs with images do the same   this is what I got how can I make this happen or can I make it happen?
\Here is my example


<div class="thumbgrid" style="z-index: 105; left: 0px; position: absolute; top: 108px">
  <div class"group1">
       <a href="#" class="imagehover"><img src="someimage1.jpg" border="0" title="Artist 1" style="width: 53px; height: 74px;" /></a>
  </div>

<div class"group1">
       <a href="#" class="imagehover"><img src="someimage2.jpg" border="0" title="Artist 2" style="width: 53px; height: 74px;" /></a>
  </div>
</div>


The above wont do what the other does but I needed it to because the script I have puts the images in side of divs so it can manipulate the group

I am wanting them to line up next to each other like this

-------- --------
|         | |          |
|         | |          |< -------- 15 accross
"""""""  """"""""
at the moment they are doing this

--------
|         |
|         |          
""""""" 
--------
|         |
|         |          
"""""""
--------
|         |
|         |          
"""""""
ect ect ect    So what am I missing that will get them to do what I need or as I said can it be done?

Mark
0
vbMarkO
Asked:
vbMarkO
1 Solution
 
VirusMinusCommented:
div's are block elements. they will create a new line, unless you instruct them not to.

add this to your CSS:

.thumbgrid .group1{float:left;} /*preferably also give the div a width*/
0
 
vbMarkOAuthor Commented:
VirusMinus

Awesome worked like ca Charm ... I have been pulling my hair out on this and I don't have enough to keep that up for long.

So thank you just what I needed!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now