Solved

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

Posted on 2009-05-13
11
334 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
Technology Partners: 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 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

Technology Partners: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change Background Color of Website 5 34
CSS: Making Pure CSS read more boxes thinner 5 45
2 separate CSS animations 2 29
CSS in HTML 5 51
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…
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.…

762 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