So I just proceed from the .Home clear: both
and remove the clearfix:after ?
Yes. However if you need a clearing mechanism (e.g. if your .home has floats in it) feel free to add it back in.
1 Like
From the second image, there is no box shadow below, is it from the
overflow: hidden? I tried coding it with margin-bottom, it’s not working.
The first one only has a box shadow because there is enough text to make the container height big enough to show the box shadow. Remove text on the first box and you will see the top box shadow disappear.
Your boxes are 174px tall which is only as tall as the image. You need to make room for the box shadow. Add bottom padding.
.home .franchise li {
padding: 20px 0 10px;
overflow: hidden;
}
1 Like
Hi,
You would be better off not using overflow:hidden to clear your floats because you want visible overflow for the box-shadow which overflow:hidden will cut off and although adding padding will allow box shadow to show its not the optimal solution as it means changes the positioning of items (especially on the left and right).
Just use the old clearfix method instead.
.home .franchise li, .content, .home ul {
overflow:visible;
zoom:1.0
}
.home .franchise li:after,
.content:after,
.home ul:after {
content:"";
display:block;
clear:both;
}
2 Likes
So
.home {
width: 960px;
margin: 0 auto;
clear: both; <---- So I’ll remove this one,now?
}
No that rule has nothing to do with float containment. That just clears previous floats.
I have given the full code that you need. Just copy and paste 
Its the overflow:hidden on '.home .franchise l’i and ‘.content, .home ul’ that you should be removing.
1 Like
Hey, is this correct from my about page . I added padding-bottom:15px; which the class name is margin ;/ my bad.
Thank you.
You still have not yet added in the clearfix code from Pauls post. Please add in Pauls code from post #45 before coming back.
I already did.
Thank you, I learned so much for helping me.
What happened to your .home element?
If the .home element isn’t supposed to exist then go in your CSS and remove that .home that was in Pauls code for the clearing. Your graphic you posted…it says ".home .franchise …"etc
Remove the .home part (BUT KEEP THE CSS THAT COMES AFTER.)
.home is needed for my
{
width: 960px;
}
I think it should not be removed though. He meant for the overflow:hidden;
I think Paul just had a typo in his code…a missing comma…but still…
I’m going through all your pages and your structure for that top part seems to change on every page? There are slight differences etc…Some pages don’t have a .home class. Please go through your pages and double check. I feel overwhelmed at all that would need to be changed for this to be optimal…Could you please unify all your pages to match the same structure? Have the same classes, etc?
I don’t think there was anything missing in my code, That code was the actual code I injected into the live site and was working fine on the original page .
Of course if the other pages are different then adjust accordingly.
I know it’s not well structured, I just want to know about more CSS for now then the proper structure coding of CSS later.
I’m now on the product page, I want it to be like this, am I doing it right?
Salamat po!
Yes that section there is fine. However on the text portion (right side) you use a div to contain that text…ideally it should be a <p> because that’s a paragraph. However, if you do stick with a DIV…you need to unfloat that div.
You have this.
.productsDiv ul li div div {
float: ;q
}
You need to fix that and also remove the float.
.productsDiv ul li div div {
float:none;
}
1 Like
2015 is coming, and still I’m not using grunt or angular stuffs.
New web trends are coming 
Products Page
I coded it like this, now it overlaps.
.productsDiv ul li a img {margin: 15px 18px 0 0;}
That text should be beside the image. You just have a float drop. Not enough space. Reduce the right margin
.productsDiv ul li a img {
margin: 15px 18px 0 0;
}
18px is too high. Make it lower.
1 Like
When I’m currently at my product page, All my NAV products are all selected when I hovered.
