Different sized uls

HTML & CSS
21

i picked the code for equal height columns from the above link. it works fine.

Which link? There are several of them.

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?

What code are you referring to as “the original code”?
Post #18 is the only code in this thread with IE6/7 bug (haslayout) fixes.

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?

With modern browsers each new parent div will need to be told to contain it’s floated children.

For IE6/7 each new parent div will need “haslayout” set on it in order to force it to contain floats.

22

lol. i give so confusing statements! but you are experienced so you understand what i am trying to say.
by original code i meant the one picked from the example site which is also given below.
( i made some arrangements and have finally made my site online. it is: webfocuz.us
it is only demo yet.)
here’s the css for the part i want fixed. it is used within the tags “Main Starts” and “Main Ends” in the html code.



.mainwrap{
	margin:20px auto;
	background:#E6E6E6;/*this color will be right column color*/
}

.maininner{
background:#FFFFFF;/*background color for left column*/
margin-right:300px;/*this should be equal to right column width*/
min-height:0;/*IE7 haslayout(float containment)*/
}

.maininner:after{/*clearfix adaption for float containment*/
    clear:both;
    content:" ";
    display:block;
    height:0;
    font-size:0;
}

* html .maininner{height:1%;}/*IE6 haslayout(float containment)*/

.mainleft{
	float:left;
    width:100%; 
    margin-right:-1px;/*allow for .maininner's right border (stop float drop)*/
}

.mainright{
	width:300px;
	margin-right:-299px;/*must be 1 pixel less than width */
	float:right;
	position:relative;
}

could you please take a look at it? thank you very much for your patience and time.

23

On your new one that CSS means nothing without the HTML it’s being applied to - maybe you could post a URL to the FULL page, instead of these snippets? You’re basically asking for brain surgery advice while only showing us an x-ray closeup of the pituitary.

In the case of the first one post, the question becomes WHAT box? It’s inside a box, what is the box set to? Is it set to position:relative? Otherwise god only knows what it’s pulling the width:49% based off of…

In the case of this latest CSS snippet, First you should consider taking a giant axe to that clearfix imitating nonsense. Clearfix is outdated, outmoded and generally a waste of code.

I’d have to see the markup and layout you are trying to achieve to say for certain, but I suspect you are overthinking your columns. My approach to what I THINK you are doing would have this markup:


<div id="fauxColumns">

	<div id="contentWrapper"><div id="content">
		Content column
	<!-- #content, #contentWrapper --></div></div>
	
	<div id="sideBar">
		Side column
	<!-- #sideBar --></div>
	
<!-- #fauxColumns --></div>

With the following CSS:


#fauxColumns {
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats IE */
	background:#EEE;
}

#contentWrapper {
	width:100%;
	float:left;
}

#content {
	margin-right:300px;
	background:#FFF:
}

#sideBar {
	position:relative; /* depth sort over #contentWrapper */
	float:left;
	width:300px;
	margin-left:-300px;
}

Which is a wee bit simpler than what you were trying to do there.

24

i think u missed the site url which i gave in my last post. it is www.webfocuz.us. hope it helps.

25

Yer right, I didnae see the URL.

Ooph, that’s got a lot of issues - I’d have to throw out about half the markup just to start cleaning that up.

The biggest of the problems being the nonsensical heading orders, questionable source order, and endless nested div for the image corners… Nesting div for images on the corners is a ugly approach to the problem - it’s why I prefer sandbags as if you are nested six div deep before you hit content, there’s got to be something wrong. Multiple H1’s, H4 without any lower order headings preceeding it… and even your COMMENT placement could be tripping IE rendering bugs. (No joke, comments between floats == double render and/or disappearing content bugs!)

Oh, and you are writing a new site - why the tranny doctype? Transitional is for supporting old/outdated code, not for building new pages…

But yeah, the column approach is all broken too.

Seriously, this:


		           <div class="mainright">
                        <div class="rightboxes">
			<div class="curvy_right">
            <div class="gray_bottom_center">
			<div class="gray_bottom_left">
			<div class="gray_bottom_right">
			<div class="curvy_header_center">
            <div class="gray_header_left">
            <div class="gray_header_right">
			<img src="images/tool+color.png"  alt=""  class="icon"/>
               <h2>Lorem Ipsum</h2>
               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p
            ></div></div></div></div></div></div></div>
			<a href=""><img src="./images/go.png" alt="Go" class="go" /></a>
		</div>

Is pretty hefty for what should probably just be:


    <div class="sideBar">
      <h2 class="tool">
      	Lorem Ipsum
      	<span></span>
      	<b></b>
      </h2>
      <p>
      	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      </p>
      <div class="bottomCurve"><a href="#">Go<span></span></a></div>

No joke. In fact, that might be a bit hefty.

If I have time later, I’ll do one of my infamous rewrites with a line-by-line breakdown of the HTML/CSS explaining my choices and methodology so you can learn from it. I’m seeing a lot of old/outdated techniques that were a bad idea when they were new - but that’s the internet for you when it comes to development tutorials… A lot of the people who used to make endless nested tables now just make endless nested DIV - net change zero.

Not your fault, I have a sneaking suspicion as to which sites you got this methodology from - no fears, I’ll show you a better way.

26

Hi
actually these divs are for left right bottom and top images for the orange boxes. images are to be expandable in either direction i.e. horizontally and vertically. so repeating images are used. do u know of any other method by which this can be done? besides using so many divs?
anyways, dont bother about these boxes. i am thinking of changing them already!
just tell me why the middle text is overlapping the right bar, please?

27

just tell me why the middle text is overlapping the right bar, please?
Hi mistaya,
Sorry about not getting back to you sooner, I have been offline all day.

The problem is the stray .container class div you have nested in the .mainleft div. It is not needed at all and it was picking up the 950px width from your screen.css (Blueprint Framework).

/* grid.css */
[COLOR=Red].container[/COLOR] {width:950px;margin:0 auto;}

I snipped out all the Lorem Ipsum text and roundbox divs to show the relative code. Just remove that .container div completely from the .mainleft div.

You really don’t need that Content div either, there are no styles hooked to it in your css. It looks like it was left over from your trial and errors.

<!--Main Starts-->
<div class="span-24 mainwrap">
<div class="maininner">
    
    <div class="mainright">
        <snip>Snipped all that Lorem Ipsum</snip>
    </div><!--mainright end-->    
    
    [COLOR=Blue]<div class="mainleft">[/COLOR]
        [B][COLOR=Red]<!-- <div class="container"> remove this-->[/COLOR][/B]
            
            [COLOR=Red]<div id="content">[/COLOR]

            <snip>Snipped all that Lorem Ipsum</snip>

            [COLOR=Red]</div><!-- content -->[/COLOR]
               
        [B][COLOR=Red]<!-- </div> [/COLOR][/B][B][COLOR=Red]-- [/COLOR][/B][B][COLOR=Red] remove this -->[/COLOR][/B]
    [COLOR=Blue]</div><!--mainleft end-->[/COLOR]

</div><!--maininner Ends-->
</div><!--mainwrap Ends-->
28

Why is all this Sticky Footer code in your main.css?

You have it commented out which is good, But you should remove it all together and take the height:100% off of the html,body.


[COLOR=Red]html, body {
    height:100%;[/COLOR]/* needed to base 100% height on something known*/
[COLOR=Red]}[/COLOR]

/*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
/*body:before {/*Opera min-height 100% Fix (Maleika)*/    
  /*  content:"";    
    height:100%;    
    float:left;    
    width:0;    
    margin-top:-32767px;/*eliminate need for inner non clearing element (Erik.J)*/
/*}

/*#outer:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
/*.container:after { /* #content:after for Float Containment*/    
 /*   clear:both;    
    content:"";    
    display:block;    
    height:1%;/*fix IE8 min-height:100% bug (Erik.J)*/    
/*    font-size:0;
}
*/


/*#outer {
    width:100%;
    min-height:100%;
    margin:-200px auto 0 auto;/*this should be equal to footer height - this drags the outer 200px up through the top of the monitor */
/*}

/** html #outer{height:100%}/*IE6 min-height*/
29

thanx for coming back.
iam lookimg into that class:container and id:content thing. believe me i didnt put it there!
i think the framework has something to do with it. my local css doesn’t even contain any id:content! lol

container class is only to be called once in the beginning to keep everything at 950px, except the top black coloured bar and the footer which are to be the full width of the screen.

actually the sticky footer code was also given(or atleast corrected!) to me by you here on sitepoint and i have left comments there for my understanding.:slight_smile: why should i remove it? on some pages i have very little text and i want the footer to stay at the bottom. without this code it comes right up. i have tried.

30

Hi,
Yes I think I recall going over the sticky footer in a different thread at one time.

If you have the sticky footer code commented out in the css (as it is now) then there is no way that it can be working on those minimal pages.

The footer div itself must sit outside of the main containing div in the html as well.
Edit: Ok, now I see that the footer is sitting outside of the container div.

The reason I suggested that you remove it was because it was commented out and just adding dead weight to your file size.

31

yes footer is outside the container div. as well as the top black bar.
u mean the comments stop the code from taking effect in the web page?

32

bc in such a acse i can remove the comments.
also could u check the page with a lesser resolution? like 800x600. why does footer and black bar reduced everyhting else remains same?

33

yes footer is outside the container div

I just made an edit to my last post after I noticed the footer was correct in the html. :wink:

u mean the comments stop the code from taking effect in the web page?

Yes, when the property & values are nested in the css comments it will disable that rule. If you need to make comments to refer back to or help you understand what a rule does then it should not interfere with the rule.

Like so -

#wrapper {
overflow:hidden; /*used for float containment*/
width:80%;
}

See how the comment does not interfere with the actual rule.

34

Because you have set them to 100% width which is only the width of the viewport at any given instance.

You need to set a min-width on both of them equal to the container width.


.blackbar{
    width:100%;
    [COLOR=Blue]min-width:950px;[/COLOR]
    background:#000;
    height:2.3em;
    [COLOR=Blue]border-top:black 200px solid[/COLOR];/*this should be equal to the height of the footer*/
}

You had your 200px top border disabled with a comment also, I have corrected it but it is not working because you have not set a 200px negative top margin on your container div to go with the sticky footer code.

You should re-read through the sticky footer instructions at these links -

You might be better off just using a repeating image for your right sidebar BG color.
That is known as Faux Columns and it will make things much easier for you to follow.

I need to log out now but I will check back tomorrow to see how you come along with the corrections.

35

hi
i was following ur discussions and though it is embarrasing, most of it was greek to me. it took a lot of time just understanding the terminology! but they were good lessons.
ummm… i have more questions. Btw i’ll try to do the right bar with a bg as u said.
but why is the search bar all broken in ie. it is fine in mozilla. also the logo image seems to be more at top than in mozilla. i want it to be just a little on the black bar which i have done using the negative margins. but they seem to have different distances in ie and mozilla. the same is the case with the nav bar. same negative margins but different display in ie and mozilla.

36

Hi mistaya,

We apologize for taking your thread off topic. :slight_smile:

As you noticed all of the debates were split off into this thread where it turned into a discussion about sticky footers.

Jason had set up a nice example of your page using a faux image for the right column. The only thing that was lacking was the sticky footer which is where the thread went off course.

If you take Jason’s code and work it into a sticky footer you should be able to get what you are after. I believe the search bar is working correctly in his link.

Hang in there and we will try to get it worked into a sticky footer for you. :wink:

37

I’ll update it when I get up in the morning so it has the sticky footer.

38

no problem getting off topic. i m learning many things from it. :wink:
yes. i studied the code of that very good example. i really need to cut down quite a lot.
its my very first project and certainly full of “issues” :). so im trying to change my code as per Jason’s example. thanx jason.
it would be a good thing if u guys could solve this sticky footer issue please bc its the site’s requirement.
Jason ur page works fine n mozilla but in ie7 the social links are not hightlighted at hovering. do u know why? they do in mozilla though.