Placing two lists next to eachother without Absolute pos

So, i have 4 lists. I styled them with css, the problem is, I want these lists next to eachother in two groups:

list 1 | list 2
list 3 | list 4

So i tried this with tables, but then Internet Explorer let the page blow. Wich mean i can scroll 3 kilometers tot the right.

But i don’t want to use absolute positioning, because when you make the page smaller the buttons will fall over the content that comes down.

Anyone got any idea on how to manage this?

Thanks in advance,

Me

Hi,

You can just float the lists nest to each other.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container {
 width:50%;
 background:#FFFFCC;
}
.list {
 float:left;
 width:49.9%;
}
.list div {border:1px solid #000}
</style>
</head>
<body>
<div id="container"> 
  <div class="list"> 
	<div> 
	  <ul>
		<li>List one</li>
		<li>List one</li>
		<li>List one</li>
		<li>List one</li>
		<li>List one</li>
		<li>List one</li>
	  </ul>
	</div>
  </div>
  <div class="list"> 
	<div> 
	  <ul>
		<li>List two</li>
		<li>List two</li>
		<li>List two</li>
		<li>List two</li>
		<li>List two</li>
		<li>List two</li>
	  </ul>
	</div>
  </div>
  <div class="list"> 
	<div> 
	  <ul>
		<li>List three</li>
		<li>List three</li>
		<li>List three</li>
		<li>List three</li>
		<li>List three</li>
		<li>List three</li>
	  </ul>
	</div>
  </div>
  <div class="list"> 
	<div> 
	  <ul>
		<li>List four</li>
		<li>List four</li>
		<li>List four</li>
		<li>List four</li>
		<li>List four</li>
		<li>List four</li>
	  </ul>
	</div>
  </div>
<br style="clear:both" />
</div>
</body>
</html>

The extra div nesting is just for the border so you can lose that if you want.

Hope that helps.

Paul

Thank you Paul,

It almost worked out, you see what happens with the list bottom left? That one needs to go up a bit. Any idea?

Can you see the attach? Else watch here…

http://www.hilcodesign.nl/list.gif

thanks in advance…

Hi,

If the lists are uneven sizes then you will need to float them as pairs or apply a negative margin top to the float thats out.

Heres an example as pairs:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container {
 width:50%;
 background:#FFFFCC;
}
.list {
 float:left;
 width:49.9%;
}
</style>
</head>
<body>
<div id="container"> 
  <div class="list"> 
	<ul>
	  <li>List one</li>
	  <li>List one</li>
	  <li>List one</li>
	  <li>List one</li>
	  <li>List one</li>
	  <li>List one</li>
	</ul>
	<ul>
	  <li>List three</li>
	  <li>List three</li>
	</ul>
  </div>
  <div class="list"> 
	<ul>
	  <li>List two</li>
	  <li>List two</li>
	</ul>
	<ul>
	  <li>List four</li>
	  <li>List four</li>
	  <li>List four</li>
	  <li>List four</li>
	  <li>List four</li>
	  <li>List four</li>
	</ul>
  </div>
  <br style="clear:both" />
</div>
</body>
</html>

Hope that helps.

Paul

Thanks a lot. Now it worked out pretty well!

I also have an idea to have 2 lists next to eachother, Just change the
.list {
float:left;
width:49.9%;
}

is that right?

Anyway, it does what it has to do right now.

Thank you very much!

Hi,

To float single lists you just float each one individually.

The ones in the above example are wrapped in pairs so just wrap the div around each single list instead.

Paul

I’m sorry Paul, now i see my mistake, i meant three lists in my last post. Not two, that’s what you already helped me out with.

So change the 2 with the 3 in my last post :slight_smile:

Hi,

Ok, I see :slight_smile: Just add another pair of lists to make a third column (if thats what you meant) but you will need the outer container to be big enough to contain all 3 or make the size of each list smaller in width so that it fits in the outer.


#container {
 width:75%;
 background:#FFFFCC;
}


<div class="list"> 
	<ul>
	  <li>another list</li>
	  <li>another list</li>
	</ul>
	<ul>
	  <li>List</li>
	  <li>List</li>
	  <li>List</li>
	  <li>List</li>
	  <li>List</li>
	  <li>List</li>
	</ul>
  </div>

Paul

Thanks Paul, you really helped me out tonight (in Holland that is ;))

Hilco