[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2011-02-10
9
Medium Priority
?
256 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
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses

834 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