Solved

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

Posted on 2011-02-10
9
216 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…

867 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

18 Experts available now in Live!

Get 1:1 Help Now