Grow your CSS skills. Land your dream job.

inline-block vs. float

  • # September 4, 2011 at 12:49 pm

    Update: I am now using absolute positioning for the menu items. It looks like it works and gets the items centered just the way I like them, but I still have a spacing issues, for instance, above the menu items and below the menu items. Any pointers?

    Update: I have removed the padding from the header and used absolute position on the logo. That fixed the issue with the spacer on the top of the menu. I then removed the paragraph tag from the content and that removed the space under the menu. The problem now is, if I put a paragraph tag in the content section, will that break it again?

    Update: I added the paragraph tag again, then change the padding (top & bottom) to 1px and now it works. Any explanation for this?

    # September 4, 2011 at 2:42 pm

    What are you trying to do, vertically align it? Also, there’s no reason to use absolute positioning for your menu.

    # September 4, 2011 at 3:09 pm

    When you define float, does it auto-define it as a block?A special block, yes. The specs go into detail, but just know that any display value (but one) will be changed to block.

    In reference to using lists for menus, I think I will stick with my current set-up for nowThat’s perfectly fine.

    The sprites are there mainly because of the font and the dashed lines between each menu item.The dashed lines could be borders and fonts and @font-face have come a long way. Even IE can use them. Besides, you’re using a simple serif font that doesn’t really call for anything special anyway. Here’s a great link: Do websites need to look exactly the same in every browser?

    The problem with the footer is I was going to make an image map so when I user clicks the copyright information, it would take them to my site.One word: Why? Just use simple links and if you insist on using the images place them as backgrounds of or as img within the anchors.

    My response always is, “but what if it does?” I think it is best to get into the habit of optimizing the application nowAbsolutely, always use the best techniques possible and don’t resort to lazy sloppy code – my thinking also.

    What do you mean, shorthand?I mean combine properties, like this:

    #content {
    padding-top: 1px;
    padding-right: 20px;
    padding-bottom: 1px;
    padding-left: 20px;
    }

    would become:

    #content { padding: 1px 20px; }

    the same holds true for margin and background and font.

    I am open to using HTML5 elements as long as they ‘fall back.’ I am curious what HTML5 elements are we talking about here?header, nav, section, article, aside, footer are the main elements – basically where all your id’d divs are could be replaced with new elements. Most browsers can deal with the new elements now. IE requires a simple ‘shiv’, or small bit of javascript in order to style the new elements. I’d consider it safe for most any site now, certainly any site anyone on these forums (myself included) are developing.

    I never got to see the update with floats, so can’t really comment on those now. It’s okay that you’ve used absolute positioning on the logo and nav. It works and is acceptable, but don’t fall into the trap of thinking its the best thing since sliced bread and use it everywhere. A layout built solely on AP will fall apart and become harder and harder to maintain as you add content. I personally would still use floats.

    The spacing issues are caused by a couple of different things. Learn the box model – padding and borders are added to width and height, so for example if you wanted an element to be 100px tall with a top and bottom padding of 10px each, the height would need to be 80px. The spacing under the nav was caused by the top margin of the p (or any element) – its known as margin collapse and is normal. A top padding or border on the parent gives the margin something to ‘push’ against. Another way to adjust things would be change its formatting context, but I don’t want to confuse you at this point. Still another thing that may have been done was to put the #content background on a wrapper div (which you currently don’t have, but doesn’t matter either way).

    In looking more closely at the design and code, I think I would place the nav inside the header. It seems to make sense and would make styling easier. Regarding the spacing of the floats and the background image – I’m sure things could have been adapted to work, but you’ve switched to AP.

    # September 4, 2011 at 5:10 pm

    I will upload the float version again in a few hours.

    # September 4, 2011 at 6:51 pm

    djpic, here’s another example page. I’m not insisting you do it this way, but just wanted to show you what was possible. I only used one background image (and could eliminate that too with some fancy pseudo element styling). This will work in most modern browsers including IE 9 and 10. For older browsers, you could just let extra design elements go (the box-shadow) or feed stylesheets to IE to accomodate and use browser prefixing for further css3 support. You should also throw in the shiv for IE…

    < !DOCTYPE html>
















    This is the topic of this page


    This is a test of the content to be added here!









    # September 4, 2011 at 9:39 pm

    @ChristopherBurton – I am trying to center the menu. Why should I not use absolute position?

    @wolfcry911 – That design looks perfect, but of course only in Safari on my machine. I am running a VM with IE 8 and it looks like crap (no offense). In firefox, does a little bit better, but the menu is off along with the copyright notice (I do have firefox version 3.6 and they are out with 6? I have only had this computer for around a year). Once upgraded to version 6, it looked fine. I don’t know if it is more of the HTML5 tags or the CSS3 that is messing with the look in IE8. I know that IE8 is old but if you look at companies and such, there still is a lot of people using it. Plus the people like me that didn’t update their browser (safari is my primary). I would like to keep it consistent in all browsers without having to format for every single browser. Personally I think it is ridiculous that you have to do that. This is why I have used table layouts for so long. I can whip out a table layout in under than 30 minutes for this site and it would look identical on ALL browsers but that defeats the purpose of me doing this (and is now frowned upon). I want one constant way that will look and work the same in all browsers from the last 5-6 years. Just call me crazy! I did play with the shadow property a few times in the first revision and didn’t mind missing it in the other browsers. Things like that I can live without, but when a menu goes crazy or a design isn’t aligned correctly, then it just drives me nuts! Don’t get me wrong, I do love the way you did it and really that is the way it should be done. I will keep it as an example (wolfcry911 example) and posted it for any others that would like to take a look. I just think we need to wait another 2-3 years to be able to use that and not have to worry. IE is really holding everyone back.

    I have posted the old version before I made all the corrections: click here for version 2

    Of course, I found the issue with the spacing on the top of the menu had to do with the header padding. I did notice you used padding / margin on the logo itself, so that might also be another route instead of absolute positioning. The spacing on the bottom of the menu was an issue as well (between the menu and the content). That again was fixed the minute I put the padding; I am sure because of the reasons you stated. The only thing that was stopping me from using float from that point on was centering the whole menu. The nav in your example was only 800 wide which you were able to do because of the wrapper was providing the shadow / glow. The background image of mine is providing the shadow leaving 10px on either side to be filled (and the spacers soon). Without centering the entire menu, it will stay to full left putting it out of alignment.

    With the collapsable css, I tried changing the background element and of course it broke in IE8 so I think I will leave it alone for now.

    With the padding, what you are telling me is if I define say a div with the height of 100px and width of 100px, when I add padding of 10px to all sides, the height will then be 120px and width then would be 120px? I understand where this is going but I assumed it wouldn’t add to the total, would just move in from the outside. For example, the same situation, the div tag would still be 100 x 100 but the area I could type in would be 80 x 80. The same with the border. 100 x 100 with a 1px border would equal 102 x 102 (on the outside) or would the 1px border be on the inside of the div?

    With absolute positioning I know that could turn bad. I just figured the menu and header is not going to change much within it’s own div. I would not do that for any content on the site and if I do, it would be relative to a parent.

    I am not sure with the nav / menu (which is better, nav or menu?) in the header. How would you make sure it was aligned to the bottom? I did see in your example that you used the absolute positioning to position the nav at the bottom of the header I think?

    With the image map, I thought that would be pretty much the same thing (easier) then creating an anchor and then using absolute positioning to place the anchor over where I need it to be clickable. But now that the footer is in the background, will do it with AP?

    Again, thank you for all this help. I have been off of work for a week, so this stuff has been keeping me occupied.

    # September 4, 2011 at 9:41 pm

    Wow…that is like a wall of text!

    # September 4, 2011 at 9:46 pm

    Use margin: 0 auto;

    # September 4, 2011 at 9:50 pm

    I have tried that on the #mainmenu but doesn’t work.

    # September 4, 2011 at 9:50 pm

    add this at the very top of your stylesheet

    * {margin: 0; padding: 0;}
    # September 4, 2011 at 9:53 pm

    still nothing.

    # September 4, 2011 at 9:58 pm

    where did you add margin: 0 auto to?

    # September 4, 2011 at 10:02 pm

    #mainmenu

    # September 4, 2011 at 10:05 pm

    I added that to the wrong discussion

    Add margin: 0 auto; to the nav element.

    # September 4, 2011 at 10:07 pm

    I am not using a nav element. I am using a div element with an ID of mainmenu haven’t tried switching to any HTML5 tags yet.

Viewing 15 posts - 16 through 30 (of 44 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".