Float multiple fixed-width / varible-height boxes into 2 columns

Forum Moderators: not2easy

Message Too Old, No Replies

Float multiple fixed-width / varible-height boxes into 2 columns

soulsizzle

3:09 am on Apr 7, 2010 (gmt 0)

I'll try to explain this as best I can. I have multiple divs that are fixed-width but variable height. I want to float these boxes into two columns inside a fixed-width container. What happens when a give them all a

float: left

value, I get something like this:


######### #########
# box 1 # # box 2 #
######### # ..... #
......... # ..... #
......... #########
######### #########
# box 3 # # box 4 #
# ..... # # ..... #
######### #########

(The periods are white space)

What I really would really like is the top of box 3 to touch the bottom of box 1. Any easy way to acheive this?

birdbrain

8:13 am on Apr 7, 2010 (gmt 0)

Hi there soulsizzle,

and a warm welcome to these forums. ;)

Try it like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#container {
 width:780px;
 margin:auto;
 overflow:hidden;
 background-color:#ccc;
 }
#left,#right {
 float:left;
 width:390px;
 }
#box1 {
height:30px;
 background-color:#fcc;
 }
#box2 {
height:80px;
 background-color:#cfc;
 }
#box3 {
height:70px;
 background-color:#ccf;
 }
#box4 {
height:60px;
 background-color:#ffc;
 }
#box5 {
height:100px;
 background-color:#cff;
 }
#box6 {
height:80px;
 background-color:#fcf;
 }
</style>

</head>
<body>

<div id="container">

<div id="left">

<div id="box1">box one</div>
<div id="box3">box three</div>
<div id="box5">box five</div>

</div><!-- end #left -->

<div id="right">

<div id="box2">box two</div>
<div id="box4">box four</div>
<div id="box6">box five</div>

</div><!-- end #right -->

</div><!-- end #container -->

</body>
</html>

Note:-

I have only specified "box" heights for the purposes of this example.

birdbrain

soulsizzle

2:06 pm on Apr 7, 2010 (gmt 0)

That would work fine if I really had any control of the HTML. The boxes are actually widgets in a Wordpress sidebar and are generated dynamically. The code is something along the lines of:


<div id="sidebar">
<ul>
 <li class="widget"></li>
 <li class="widget"></li>
 <li class="widget"></li>
 <li class="widget"></li>
</div>

birdbrain

2:42 pm on Apr 7, 2010 (gmt 0)

Hi there soulsizzle,

That would work fine if I really had any control of the HTML

If you have no control, how on earth can you code, how on earth can we help you. :o

I would suggest that you seriously consider unshackling yourself. ;)

birdbrain

soulsizzle

2:59 pm on Apr 7, 2010 (gmt 0)

I was hoping I could come up with a CSS solution that would work within these confines.

"Unshackling" myself isn't always feasible. Using Wordpress gives a basis to work from when creating very functional, dynamic websites when the client's budget doesn't allow me to work from scratch.

Wordpress is extremely flexible. I have just pushed it to its limits with this project. On a smaller site, it would be as simple as creating two sidebars. However, this project is basically a network of 20 "microsites", each with its own sidebar (easily managed by the client in the backend). Creating two sidebars for each of these sites just makes it unmanageable.