Solved

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

Posted on 2009-05-13
11
326 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

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

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

705 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