Solved

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

Posted on 2011-02-10
9
208 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
 
LVL 9

Expert Comment

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

see if that works for you
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
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 500 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

708 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now