?
Solved

Div float left question.. trying to not have it wrap.

Posted on 2011-02-10
9
Medium Priority
?
247 Views
Last Modified: 2012-05-11
Hey all. i want to have like 25 images in a row. When i do float left it wraps it around to under the first image. How do i make it so that my 25 images are just on 1 row?

this:
[  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ]

instead of this:

[  ] [  ] [  ] [  ] [  ]
[  ] [  ] [  ] [  ] [  ]
[  ] [  ] [  ] [  ] [  ]
[  ] [  ] [  ] [  ] [  ]

thanks all
0
Comment
Question by:engineroom
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 34865162
Does the parent container have fixed width ? If so, remove it.
0
 
LVL 9

Expert Comment

by:CCSOFlag
ID: 34865616
add this to the div css:
overflow-x: scroll;


this will allow scrolling for the div rather than making your web page 5000 pixels wide.  Not sure how big your pics are.

You can remove the width if you want, but it's not needed if you have the overflow-x on.  That way you can still contrain your div width to line up with your page.
0
 
LVL 3

Author Comment

by:engineroom
ID: 34865724
in this case i do want the pixels to be 5000px wide... here's what the code looks like. it's not in a container:

,img {
  float:left;
}

<div class="img"><img src="blah.jpg"></div><div class="img"><img src="blah.jpg"></div><div class="img"><img src="blah.jpg"></div><div class="img"><img src="blah.jpg"></div><div class="img"><img src="blah.jpg"></div><div class="img"><img src="blah.jpg"></div><div class="img"><img src="blah.jpg"></div><div class="img"><img src="blah.jpg"></div><div class="img"><img src="blah.jpg"></div>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 9

Expert Comment

by:CCSOFlag
ID: 34865745
.img {
  float:left;
 overflow-x: scroll;
}

see if that works for you
0
 
LVL 9

Expert Comment

by:CCSOFlag
ID: 34865750
by container I just meant the containing div.  Sorry.  
0
 
LVL 9

Accepted Solution

by:
CCSOFlag earned 2000 total points
ID: 34865771
oh, I c what you did.

You don't need all those divs.  do this:

.img {
 overflow-x: scroll;
}

.img img
{
  float: left;
}

<div class="img">
 <img src="blah.jpg">
 <img src="blah.jpg">
 <img src="blah.jpg">
 <img src="blah.jpg">
 <img src="blah.jpg">
 <img src="blah.jpg">
</div>
0
 
LVL 3

Author Comment

by:engineroom
ID: 34866258
is there a way to detect what position in the scroll the say, the 3rd image is at?
0
 
LVL 3

Author Comment

by:engineroom
ID: 34866274
this doesn't work.
.img {
 overflow-x: scroll;
}

.img img
{
  float: left;
}




    <div class="img">
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('1','','Images/Artists/1/1-over.jpg',1)"><img src="Images/Artists/1/1.jpg" name="1" width="380" height="444" border="0" id="1" /></a>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('2','','Images/Artists/1/2-over.jpg',1)"><img src="Images/Artists/1/2.jpg" name="2" width="380" height="444" border="0" id="2" /></a>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('3','','Images/Artists/1/3-over.jpg',1)"><img src="Images/Artists/1/3.jpg" name="3" width="380" height="444" border="0" id="3" /></a>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('8','','Images/Artists/1/8-over.jpg',1)"><img src="Images/Artists/1/8.jpg" name="8" width="380" height="444" border="0" id="8" /></a>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('5','','Images/Artists/1/5-over.jpg',1)"><img src="Images/Artists/1/5.jpg" name="5" width="380" height="444" border="0" id="5" /></a>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('6','','Images/Artists/1/6-over.jpg',1)"><img src="Images/Artists/1/6.jpg" name="6" width="380" height="444" border="0" id="6" /></a>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('7','','Images/Artists/1/7-over.jpg',1)"><img src="Images/Artists/1/7.jpg" name="7" width="380" height="444" border="0" id="7" /></a>
    </div>

Open in new window

0
 
LVL 9

Expert Comment

by:CCSOFlag
ID: 34867181
ah cuz you threw anchors in there.  In that case, you will want divs around the anchors.  
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question