Killersites.com Forum - Print Thread - Floating on both sides of page at same height.

Killersites.com Forum » List all forums » » Forum: CSS - Styling your pages with Cascading Style Sheets. » » » Thread: Floating on both sides of page at same height.
Print at May 25, 2013 3:49:42 PM	View all posts in this thread on one page

Posted by ziggyzaggy at Sep 27, 2005 6:18:29 AM

Floating on both sides of page at same height.
Last night I was laying out a page and all was working fine with a few niggles so I decided to restart in the morning. However I think i've done the same thing but I cannot get the layout I had before. I was trying to get a list of pictures to float on the left and on the right but now the pictures on the right just go below to the right of the pictures on the left. I must have missed something small out cos i'm pretty sure there wasn't much more to the css. The html hasn't changed since it was working.

Thanks

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<link rel="stylesheet" href="main.css" type="text/css"></link>
</head>

<body>

<ul id="pictureItems">

<li class="lft"><a href="#"><img src="pictures/001.jpg" alt="001" /></a></li>
<li class="lft"><a href="#"><img src="pictures/002.jpg" alt="002" /></a></li>
<li class="lft"><a href="#"><img src="pictures/003.jpg" alt="003" /></a></li>
<li class="rght"><a href="#"><img src="pictures/004.jpg" alt="004" /></a></li>
<li class="rght"><a href="#"><img src="pictures/005.jpg" alt="005" /></a></li>
<li class="rght"><a href="#"><img src="pictures/006.jpg" alt="006" /></a></li>

</ul>

</body>

</html>

main.css:

ul#pictureItems li a img {margin:0px; border:1px solid #A2DAA6;padding:3px; background-color:#CADAA6; width:64px; max-width:64px;}

ul#pictureItems li.lft {float:left; clear:left;}

ul#pictureItems li.rght {float:right; clear:right;}

Posted by tpattison at Sep 27, 2005 8:05:28 AM

Re: Floating on both sides of page at same height.
Hi

Both the right and right lists are in the same list. Make 2 sets of <ul> lists:

And change the CSS so that the ul parts contain the float:left & float:right:

ul.pictureItems li a img, ul.pictureItems2 li a img {
margin:0px; border:1px solid #A2DAA6;padding:3px; background-color:#CADAA6; width:64px; max-width:64px;}

ul.pictureItems {float:left;}

ul.pictureItems2 {float:right;}

That should work.

Tim
----------------------------------------
Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen

Posted by ziggyzaggy at Sep 27, 2005 8:16:40 AM

Re: Floating on both sides of page at same height.
Thanks for that. But is there not a simple solution for the code I posted. It works in IE but not FF or Opera. But I had it working in all of them with a single list. I just can't remember how.

Thanks

Current timezone is GMT
May 25, 2013 3:49:42 PM