inline divs that don't wrap

Forum Moderators: open

Message Too Old, No Replies

inline divs that don't wrap

ElectronMan

5:28 pm on Nov 21, 2007 (gmt 0)

Hello. I have been searching for decent way to make inline block elements that don't wrap without using fixed size tables since supposedly using tables for layout is "archaic". Specifically, I want two inline divs. The reason I want this is because I use a background for the div and then text on top of that background image. I just can't seem to find a way to do it without tables. Anyone know how?

P.S. using float is not an option because the divs will wrap. I don't want wrapping.

Also, using Position will be tedious and will make rearranging things a pain.

rocknbil

9:12 pm on Nov 21, 2007 (gmt 0)

So you want


Ś div ŚŚ div ŚŚ div Ś<-edge of window or container, so WRAP 
Ś div ŚŚ div Ś

Divs "inline," but allow them to wrap when they reach the edge of the page/container, is this correct? Or you mean, text inside the divs needs to wrap?

In either case, float still seems like a viable solution. Remember that a floated element will contain all its floated children. So something like this should work:


#mycontainer { width: 75%; float: left; border: 1px solid #ff0000; } 
.column { width: 175px; float: left; border: 1px solid #00ff00; } 
.column p { padding: 6px; margin:0; float: left; }


<div id="mycontainer"> 
 <div class="column"> 
 <p> Some content that may or may not wrap</p> 
 </div> 
 <div class="column"> 
 <p> Some content that may or may not wrap</p> 
 </div> 
 <div class="column"> 
 <p> Some content that may or may not wrap</p> 
 </div> 
 <div class="column"> 
 <p> Some content that may or may not wrap</p> 
 </div> 
 <div class="column"> 
 <p> Some content that may or may not wrap</p> 
 </div> 
 <div class="column"> 
 <p> Some content that may or may not wrap/</p> 
 </div> 
</div>

The borders are just to show you where it breaks and the "shrink wrap" effect of floats within floats doing exactly what you need. :-) Tested in FF with 4.01 valid doctype.

You may have some trouble if the divs are of varying height due to different line lengths in the p. If this is the case, you'll need another "row" wrapper around the rows, or a clearing div between rows.

ElectronMan

1:54 am on Nov 23, 2007 (gmt 0)

I looked at what you wrote but the problem is that I don't want the divs to wrap when the window gets too small. So when I shrink the width of the window, the divs are still on one line just not visible because the window is too small. I don't want them to wrap because the page won't look right if they do. Here is an example of how I am achieving that affect with tables. I just don't see what an easier "non-table" way of doing exactly this would be.


<html>
<body>
<table width="550" align="center">
<tr>
<td width="250">
<div style="background: #CCCCCC; width:250px; height: 250px;">
<p>This content is appearing on top of this gray box</p>
</div>
</td>
<td width="50">&nbsp</td>
<td width="250">
<div style="background: #00CC00; width: 250px; height: 250px;">
<p>This content is appearing on top of this green box</p>
</div>
</td>
</tr>
</table>
</body>
</html>

rocknbil

6:06 am on Nov 23, 2007 (gmt 0)

<table width="550">

There you go! :-) Set a fixed/calculated width on #mycontainer in the example above. This will achieve the same effect.

#mycontainer { width: 532px; float: left; border: 1px solid #ff0000; }

You will find some cross-browser differences in the maths due to different handling of the box model - if you zero out all containers with margin:0;padding:0; it will help, but you may find you'll still need to make #mycontainer a little larger than the sum of all columns (even with borders off.)

My example uses fixed pixel widths on the "column divs", but you can also use percentage or em for #mycontainer with a min-width property to keep it from squashing up too far when the window is resized. The problem here is IE 6 doesn't know min-width . . . so some workarounds may be required. But it looks like your scenario will work with a fixed width.

EDIT: after a closer look at your example, you don't even need the "column" divs - look how neat and compact this is. Also note you'll have to fiddle with the widths and padding to suit your needs:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 <!-- doctype all on one line --> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Floating Fixed Divs</title> 
 <style type="text/css"> 
 #mycontainer { width: 538px; float: left; border: 1px solid #ff0000; } 
 #mycontainer p {  
  width: 165px;  
  float: left; 
  background: #00CC00; 
  padding: 6px; 
  margin:0; 
  border: 1px solid #00ff00; 
 } 
 </style> 
</head> 
<body> 
<div id="mycontainer"> 
  <p> Some content that may or may not wrap</p> 
  <p> Some content that may or may not wrap</p> 
  <p> Some content that may or may not wrap</p> 
  <p> Some content that may or may not wrap</p> 
  <p> Some content that may or may not wrap</p> 
  <p> Some content that may or may not wrap</p> 
</div> 
</body> 
</html>