Different sized uls

Hi
I am making two onordered lists. these are to be displayed side by side and to have the same length. but the problem is first one is shorter than the second one. also im using blueprint’s screen.css. even if i set the screen.css’s default margins and paddings to zero, the size of the two uls differ.
any suggestions?
the ul’s are displayed inline-block. setting them to float takes them out of their box.

could you post code pls.

ok here’s the code.
all of this h2 and p and li’s are in a box.


<h2>Lorem Ipsum is simply dummy text</h2>
               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been </p>
			   
			   <div class="first ulleft">
			   <ul>
			   <li style="background:url(../../../images/magnify.png left no-repeat)">Lorem Ipsum is simply dummy text</li>
			   <li>Lorem Ipsum is simply dummy text</li>
			   <li>Lorem Ipsum is simply dummy text</li>
			   <li>Lorem Ipsum is simply dummy text</li>
			   </ul>
			   </div>
			   
			   <div class="ulright last">
			   <ul>
			   <li>Lorem Ipsum is simply dummy text</li>
			   <li>Lorem Ipsum is simply dummy text</li>
			   <li>Lorem Ipsum is simply dummy text</li>
			   <li>Lorem Ipsum is simply dummy text</li>
			   </ul>
			   </div>

.ulleft{
	width:49%;
	display:inline-block;
	margin:0;
	padding:0;
}


.ulright{
	width:49%;
	display:inline-block;
	margin:0;
	padding:0;
}

h2{
display:inline;
vertical-align:top;
text-align:center;
color:#FFFFFF;

}

.last {margin-right:0;padding-right:0;}

anything left out?

Hi,

With the code you posted i’m unable to reproduce your problem: the lists appear with the same lenght. Your problem could be with the background image you have set with the inline style or with the class first you use. You forgot to post that class… It could also be that something else in your css is causing the problem. The full code or better yet a link to the page in question would be better.

But what you do have is also a problem in IE6 and IE7 because they do not support display: inline block. Those browsers need to have display:inline or the lists will be stacked vertically. You can feed them with a condcom or like this:


* html .ulleft,  * html .ulright  {
	display:inline;
}


*+html .ulleft, *+html .ulright  {
	display:inline;
}

ic. i’ve checked in ff and ie8. both showed be diefferent heights. im really confused as to waht is actually causing problem.

here is the full code. it contains box images which u obvuiosly wont be able to see. i cant put up the site (dont know how :blush:) only have to do the css part.




 <div id="reasons_box">
		    <div class="box_bottom_repeat">
			<div class="box_left_repeat">
			<div class="box_right_repeat">
			<div class="box_bottom_left">
			<div class="box_bottom_right">
			<div class="box_header_center">
            <div class="box_header_left">
            <div class="box_header_right">
			<h2>Lorem Ipsum is simply dummy text</h2>
               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's .</p>
			   
			   <div class="first ulleft">
			   <ul>
			   <li style="background:url(../../../images/magnify.png left no-repeat)">Lorem Ipsum is simply dummy text</li>
			   <li>Lorem Ipsum is simply dummy text</li>
			   <li>Lorem Ipsum is simply dummy text</li>
			   <li>Lorem Ipsum is simply dummy text</li>
			   </ul>
			   </div>
			   
			   <div class="ulright last">
			   <ul>
			   <li>Lorem Ipsum is simply dummy text</li>
			   <li>Lorem Ipsum is simply dummy text</li>
			   <li>Lorem Ipsum is simply dummy text</li>
			   <li>Lorem Ipsum is simply dummy text</li>
			   </ul>
			   </div>
			   
            </div></div></div></div></div></div></div></div>
	   </div>



#reasons_box{
	width:100%;
}


.box_header_center{
	background:url(../images/box_header_center.png) top left repeat-x;
}

.box_header_left{
	background:url(../images/box_header_left.png) left top no-repeat;
}


.box_header_right{
	background:url(../images/box_header_right.png) top right no-repeat;
	padding:0 0 5px 10px;
}


.box_bottom_repeat{
background:url(../images/box_bottom_repeat.png) #F4F4F4 0% 100% repeat-x;
width:100%;
}

.box_bottom_left{
background:url(../images/box_bottom_left.png) bottom left no-repeat;
}


.box_bottom_right{
background:url(../images/box_bottom_right.png) bottom right no-repeat;
}


.box_left_repeat{
background:url(../images/box_left_repeat.png) 0 0 repeat-y;
}


.box_right_repeat{
background:url(../images/box_right_repeat.png) 100% 0 repeat-y;
}

.ulleft{
	width:49%;
	display:inline-block;
	margin:0;
	padding:0;
	border:1px solid red;
}

ul{
margin:0;
padding:0;
}

.ulright{
	width:49%;
	display:inline-block;
	margin:0;
	padding:0;
	border:1px solid green;
}

h2{
display:inline;
vertical-align:top;
text-align:center;
color:#FFFFFF;

}

/*below are screen.css's default settings*/
p {margin:0 0 1.5em;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
ul, ol {margin:0 1.5em 1.5em 0;padding-left:3.333em;}
ul {list-style-type:disc;}

the list image was to be my next question as it did not show as well. im sure the path and everything is ok.

well?

Also where is the .first CSS? We need hte full code :). Post a link if you got it

Edit:

Ninjad that in before me. Still post a site if you have it. Let me know if you have one. It’d save me time

I’ve checked the first code in Opera, FF, IE6, IE7, IE8 and all showed them to be of the same length. As to the image, we cant check that without having access to the actual image.

Okay, just checked the code in Opera, FF, IE6, IE7 and IE again: both lists have the same length … a cache problem???

ok i figured it out. when i replace lipsum with something else the box with the less text becomes smaller than the other. they are aligned at the bottom. is there anyhting to force them to align at the top too. or just the top. i’ve tried vertical-align:top. doesnt seem to work.

see for yourself. here is my other text (also dummy). sorry about no link. site is still at the very begining. not up yet.


<div id="reasons_box">
		    <div class="box_bottom_repeat">
			<div class="box_left_repeat">
			<div class="box_right_repeat">
			<div class="box_bottom_left">
			<div class="box_bottom_right">
			<div class="box_header_center">
            <div class="box_header_left">
            <div class="box_header_right">
			<h2>This is my dummy header</h2>
               <p>this is my dummy text followed by more dummy text and more dummy text and yet more dummy text.</p>
			   
			   <div class="first ulleft">
			   <ul>
			   <li style="background:url(../../../images/magnify.png left no-repeat)">dummy text number 1</li>
			   <li>all are of different lenghts all are of different lenghts all are of different lenghts</li>
			   <li>with different text lenghts abviously</li>
			   <li>and still more dummy text</li>
			   </ul>
			   </div>
			   
			   <div class="ulright last">
			   <ul>
			   <li>the left box is smaller than the right the left box is smaller than the right</li>
			   <li>when i write text other than lorem ipsum</li>
			   <li>both are aligned at the bottom</li>
			   <li>but not at the top!</li>
			   </ul>
			   </div>
			   
            </div></div></div></div></div></div></div></div>
	   </div>
	 


i used borders only to check the relative heights and positions of the uls.

sorry. the above code shows the same lengths. but if you change the li text anywhere you’ll see what i mean

Well give us the code that shows the problem. Using different words shouldn’t change the <li> height unless it makes the text wrap to another line :slight_smile:

sorry. the above code shows the same lengths. but if you change the li text anywhere you’ll see what i mean
Hi mistaya123,

If you are wanting the two lists to have equal heights then you will need to use an equal height columns method for your .ulleft and .ulright divs.

It looks like you failed to contain your floats when you were testing with floats. I would have probably chosen floats for this rather than inline-block.

I have no idea what your images make the layout look like since you have not provided a link. You could take something like this and nest a ul in each column.

this is what i mean. the text in the left ul is lessso its length is smaller than the right. i guess the only way to solve it would be to write equal texts in both uls. :goof:


<div id="reasons_box">
		    <div class="box_bottom_repeat">
			<div class="box_left_repeat">
			<div class="box_right_repeat">
			<div class="box_bottom_left">
			<div class="box_bottom_right">
			<div class="box_header_center">
            <div class="box_header_left">
            <div class="box_header_right">
			<h2>This is my dummy header</h2>
               <p>this is my dummy text followed by more dummy text and more dummy text and yet more dummy text.</p>
			   
			   <div class="ulleft">
			   <ul>
			   <li style="background:url(../../../images/magnify.png left no-repeat)">dummy text number 1</li>
			   <li>all are of different lenghts all are of different lenghts</li>
			   <li>with different text lenghts abviously</li>
			   <li>and still more dummy text</li>
			   </ul>
			   
			   
			   
			   <ul>
			   <li>the left box is smaller than the right the left box is smaller than the right</li>
			   <li>when i write text other than lorem ipsum when i write text other than lorem ipsum</li>
			   <li>both are aligned at the bottom</li>
			   <li>but not at the top!</li>
			   </ul>
			   </div>
			   
            </div></div></div></div></div></div></div></div>
	   </div>
	 


yes. i used floats but then the big box which contains all the h2 and p and uls shrunk up. the uls were left outside the box.

this is what i mean. the text in the left ul is lessso its length is smaller than the right.

Yes, I understand what you are saying. A table-cell is the only element that will base it’s height on another element. That is why I suggested that you use one of many CSS Equal Columns methods. Are you familiar with them?

I made an edit to may last post and added another link, did you see it?

yes. i used floats but then the big box which contains all the h2 and p and uls shrunk up. the uls were left outside the box.

That is why I said you probably failed to “Contain Your Floats”.

Well, even with the new text the lists have the same length and the text is aligned at the top and fit into the boxes …

You will probably have to give us a mock up image of what you are wanting to do since we can’t access the images you are using in all those extra divs. It looks like they may be for shadows and /or round corners?

Here is a simple 2-column demo that uses an extra wrapping div for the equal height columns.


<!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=utf-8">
<title>Two Column Demo</title>

<style type="text/css">
#wrap {
    width:100%;
    overflow:hidden;/*contain floats*/
    background:#CCF;  
} 
#left {
    width:100%;
    float:left;
    margin:0 -50% 0 0;
    background:#CDF;  
}
#innerleft {
    overflow:hidden;/*IE7 haslayout*/
    margin-right:50%;
    background:#CCF;
}
* html #inner {display:inline-block;}/*IE6 haslayout*/

#right {
    width:50%;
    float:left;
    background:#CDF;
}
h2 {margin:20px}

</style>
</head>
<body>

<div id="wrap">
    <div id="left">
        <div id="innerleft">
            <h2>Left Column UL</h2>
            <ul>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
            </ul>
        </div>
    </div>
    <div id="right">
        <h2>Right Column UL</h2>
            <ul>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
                <li>Lorem Ipsum is simply dummy text</li>
            </ul> 
    </div>
</div>

</body>
</html>

Sorry for not replying earlier. thanx for the help guys.i found my solution from that link you gave for equal height columns Rayzur. thanx again.

got another query!
i picked the code for equal height columns from the above link. it works fine.
my uls are in a div with more divs above and below it. do i have to put in the bug fixes for page height and float containments (given in the original code for equal columns) for ie6 etc. or not?
bug fixes like float containments are to be given only at the begining of css or should they be repeated every time i use floats for each div?