css float problem.. css pro's help plz

crash_D. · March 2007

hi, I have this new site i develop on css only, and i came across a problem in FF an Opera.. the site is a three column standard design layout. both side panels float right and left. then goes the center with margins (they go in this order in html).. and the i have to fetch db items in tables, or rather lists (table would be more logical though).. and when i create a new list of items, i want it under the previous list, so i clear it. but it appears under the bottomline of lowest of the panels.. please help me out.. i want it to display correctly in all browsers,,, its fine in IE only... please see the screenshot, in which i have removed the right column and marked the important elements..

hope for your help guys

thank you

crash_D. · March 2007

guys, im still waiting for at least something from you...if the problem is not clear, i can clarify (and/or post code snippets)... i need at least some piece of advice here... thank you

Dinoboff · March 2007

yeo, you should post some part of the code.

Gauzy · March 2007

yeah, some code would help here

MySchizoBuddy · March 2007

u want the bottom 3 images to be right after the top image
can u show a before and after pics

crash_D. · March 2007

ok.. here is the very simplified version of the code, just to present the most crucial info for you:


<div id="main">
 <div id="left"> <!-- float: left-->
 ..some nav here..
 </div>
 
 <div id="right"> <!-- float: right->
 ..some menus here..
 </div>

 <div id="center"> <!-- margin: 0 200px -->
 .. content here .. and

  <h3>list 1</h3>
  <ul class="table"> <!-- styling for this class' li's is: float: left; display: inline; height: defined; width: defined -->
    <li>some item</li>
  </ul>

  <h3>list 2</h3> <!-- IMPORTANT THING HERE: THIS HEADING'S CSS: clear: left; I NEED IT BECAUSE THIS LIST'S ITEMS CRAWL INTO THE FIRST LIST WITHOUT THE clear property, but this property puts this second list UNDER THE LEFT COLUMN, BUT NOT UNDER THE FIRST LIST.. AND I NEED IT RIGHT UNDER THE FIRST LIST-->
  <ul class="table">
   <li>some item</li>
   <li>some item</li>
   <li>some item</li>
  </ul>

 </div> <!-- content div ends here -->
</div>

hope this clarifies everything... ask if you still have questions... i am ready to provide any information... i cincerely hope for your help guys.. .thank you

Max_B · March 2007

I'd look at the computed width for the clearing heading. It might be computed too wide to fit in between the lateral columns. Also try "position: relative" to your center div to be sure it is the computed container for the content.

dan39 · April 2007

Technically, to do what you're saying, you don't need to use floats on your <li>'s. Just making them inline elements should be enough for the effect you describe. For instance, in the following example, you can get the desired effect when you remove the "float:left" on the <li>'s :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Untitled</title>

<style type="text/css">
  div {border:1px solid red}
  #left {float:left; width:200px}
  #right {float:right; width:200px}
  #center {margin:0 200px}
  .table li {display: inline; height:20px; width:80px}
</style>

</head>
<body>
<div id="main">
 <div id="left">
 ..some nav here.. Consuetudium lectorum mirum est notare quam littera gothica quam nunc putamus parum. Dynamicus qui sequitur mutationem claram anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Nulla facilisi nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id. Lectores legere me, lius quod ii legunt saepius claritas. Demonstraverunt est etiam, processus eodem modo typi qui nunc nobis videntur parum clari. Ut wisi enim ad, minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl.

 </div>
 
 <div id="right">
  ..some nav here.. Wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut! Iriure dolor in hendrerit in vulputate velit esse molestie consequat vel illum dolore eu feugiat. Erat volutpat ut aliquip, ex ea commodo consequat duis. Diam nonummy nibh euismod tincidunt ut laoreet; dolore magna aliquam? Quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Adipiscing elit sed autem vel eum nulla facilisis at vero eros et accumsan et. Ipsum dolor sit amet consectetuer iusto odio dignissim qui blandit; praesent luptatum zzril delenit augue duis.

 </div>

 <div id="center">
 .. content here .. and

  <h3>list 1</h3>
  <ul class="table">
    <li>some item</li>
  </ul>

  <h3>list 2</h3>
  <ul class="table">
   <li>some item</li>
   <li>some item</li>
   <li>some item</li>
  </ul>

 </div>
</div>
</body>
</html>

Gauzy · April 2007

i will echo what dan39 said - pretty sure you do not need floats on the ul, just display:inline on the li's.

as another note - i'm used to floating the li's themselves, not the actual ul. interesting to see it done another way.

crash_D. · April 2007

thanks guys... .

removing floats in li's is what i did initially,. however i encountered another problem... see image below..... the problem with simple inline styling for li's is complicated, because there are several elements nested within each li, including an image.... maybe im a newb in css,, but i could not make it look correct in FF.. see image below... however, making it a simple list of inline'ly styled li's would be VERY nice.. ..

here is the css course for this list:

/* APARTMENTS LIST FORMATTING */

ul.aptlist {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	/*border: 1px solid brown;*/
	
	}
ul.aptlist li {
	display: block;
	float: left;
	width: 31%;
	height: 226px;
	text-align: center;
	border: 1px solid #ccc;
	padding: 6px 4px 4px 4px;
	background-color: #eee;
	margin: 2px;
	cursor: pointer;
	color: #666;
	}
ul.aptlist li img {
	border: 1px solid #ddd;

	}
ul.aptlist li label {
	font-weight: bold;
	}
ul.aptlist li address {
	display: inline;
	color: #333;
	font-style: normal
	}
ul.aptlist li var {
	font: bold 16px "Trebuchet MS";
	color: #CC0000
	}
ul.aptlist li kbd {
	font-family: Arial;
	color: #CC0000
	}

WallPhone · April 2007

Why are you using lists instead of tables?

Tables are good when used for tabular data. Bad for layouts. Naming the list class as table is a big red flag to me that you should probably be using a table.

crash_D. · April 2007

it is actually ul.aptlist (a list of apartments, its a daily rent site). class="table" was a general label for demonstration

edit: and tables i don't use as a matter of principle,..... i want this one to be written on css only, and then i want to apply for cssbeauty or the like.. in addition.,, with table, i would need to go to the next row, without braking the structure of the table if the row is not full (rowspan), which i would not like to do.. at least not in this project... on the other hand, i encontered this layout problem,, ... help me plz ... thanks

edit 2: i will surely list the one who helped me among the developers in the css course code

css float problem.. css pro's help plz

Comments