Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Need CSS to let content "flow" inside a div...

Posted on 2009-05-13
11
Medium Priority
?
340 Views
Last Modified: 2012-05-06
I'm making a desgin that should adapt to the screenspace available, in the sense that the main screen will contain thumbnails of documents availbale on our intranet.

The client vary from 10" subnotes to dual 24" (in IT ofcourse) - so I'd like the design to utilize the available screenarea.

I will be displaying each thumbnail in a small box, similar to the screencap below, but I want the design to adapt so it will show as many "columns" as possible, then add new row.

So :: How can I make it flow from left -> right, then new row ??
0
Comment
Question by:trg_dk
[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
  • 4
  • 4
  • 3
11 Comments
 
LVL 39

Expert Comment

by:abel
ID: 24374212
That screencap, where is it gone to?
0
 
LVL 39

Expert Comment

by:abel
ID: 24374226
Normally, you would either go for a table design (easy, but it won't grow in columns) or a div / float style design (can be hard, unless you are acquainted to floats and the differences between browsers).
0
 
LVL 2

Author Comment

by:trg_dk
ID: 24374235
sorry - must have forgotten to include :-O

Snap1.jpg
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 2

Author Comment

by:trg_dk
ID: 24374251
Ohh yeah - Need it to work Win/Mac IE7+8, FF, Safari

Table's is a no go - I really want it to flow and utilize the entire available area.
0
 
LVL 1

Expert Comment

by:multiplex79
ID: 24374283
I don't have the exact code, but you will most likely want to have each of your images contained within a DIV. Then, in your CSS float:left each image DIV. If you set a static width of each of your image DIVs they will line up horizontally next to each other until the row runs out of screen space and then wrap automatically.
0
 
LVL 2

Author Comment

by:trg_dk
ID: 24374338
So it is actually the DIV containing the document thumbnail, that should float:left ?? Not the container div ??
0
 
LVL 1

Accepted Solution

by:
multiplex79 earned 2000 total points
ID: 24374349
The CSS will be similar to the attached code. Also, see this link for reference http://www.w3schools.com/CSS/tryit.asp?filename=trycss_image_gallery
<html>
<head>
<style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}	
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
</head>
<body>
 
<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
 
</body>
</html>

Open in new window

0
 
LVL 1

Expert Comment

by:multiplex79
ID: 24374369
Yes, you will want a main div container with your overall width set. Then each image will be house in it's own to with a set thumbnail width and margin/padding/border etc. You will set the image DIV to float left inside the main container DIV.
0
 
LVL 39

Expert Comment

by:abel
ID: 24374401
Nice and simple solution, multiplex, I was still playing with it while you already posted.... :)
0
 
LVL 1

Expert Comment

by:multiplex79
ID: 24374473
Thanks. And, it should work in all modern browsers that support CSS.
0
 
LVL 2

Author Closing Comment

by:trg_dk
ID: 31580940
sorry for the delay in rewarding pts
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

721 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