Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2009-05-13
11
Medium Priority
?
341 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
  • 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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... …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
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…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

971 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