Link to home
Start Free TrialLog in
Avatar of engineroom
engineroom

asked on

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

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
Avatar of Lukasz Chmielewski
Lukasz Chmielewski
Flag of Poland image

Does the parent container have fixed width ? If so, remove it.
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.
Avatar of engineroom
engineroom

ASKER

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>
.img {
  float:left;
 overflow-x: scroll;
}

see if that works for you
by container I just meant the containing div.  Sorry.  
ASKER CERTIFIED SOLUTION
Avatar of CCSOFlag
CCSOFlag
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
is there a way to detect what position in the scroll the say, the 3rd image is at?
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

ah cuz you threw anchors in there.  In that case, you will want divs around the anchors.