Solved

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

Posted on 2009-05-13
11
328 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
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 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

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

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

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

22 Experts available now in Live!

Get 1:1 Help Now