Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Shams Nelson
Shams Nelson
2,888 Points
Posted by Shams Nelson
Shams Nelson
2,888 Points

Inline-block not working for layout (can't figure out why and it's driving me crazy!)

This css should create a 2 column layout, but my #main div is not appearing next to the #leftcolumn, but rather below it. Even when I make the #main a tiny size (say 300px) to see if there are any problems w/ margin etc. it still remains below! I can't figure out why and every site seems to tell me that it should work!!

note: both #leftcolumn and #main are contained within #content, which itself is contained within #container.

* {
    font-family: Tahoma, Geneva, sans-serif;    font-size: 12px;
    box-sizing: border-box;
}

body {
    background: #EEE;
}

h1, h2, h3, h4, h5, h6 {
    color: #900;
}

#container {
    width: 900px;
    background: white;
    box-shadow: 0 0 15px grey;
    margin: 0 auto;
}

#content {
    width: auto;
    margin: 0 auto;
    display: inline-block;
}

#leftcolumn {
    width: 250px;
    height: auto;
    display: inline-block;
    padding: 20px;
    margin-top: 0;
    border-right: 3px solid #E6E3E6;
}

#leftcolumn img.centered {
    margin: 0 auto;
    display: block;
}

#main {
    width: 650px;
    height: auto;
    display: inline-block;
    background: red;
}

3 Answers

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Because you are not using float property. Float property will position your elements on window. If you do not know about float property please feel free to check in here. Float Property Reference

Simple Float property snippet

#main{
            float: right;
}

#leftcolumn {
                float: left:
}

Hope it helps

Thanks

Karthikeyan Palaniswamy

Shams Nelson
Shams Nelson
2,888 Points
Shams Nelson
Shams Nelson
2,888 Points

Hey thanks, but I was actually trying to avoid floats if possible!

As far as I understand, inline-block should slide each element next to each other as long as there's room in the width (at which point it'll go down below, which is what I'm seeing). This hasn't been happening here though....

Shams Nelson
Shams Nelson
2,888 Points
Shams Nelson
Shams Nelson
2,888 Points

I seriously feel like i'm going to have an anxiety attack here... The #foot wont even appear and I have no idea why. Already experimented with the info here: http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements

Please help before I punch a HOLE IN MY WALL!!

<!doctype html>
<head>

  <link rel="stylesheet" type="text/css" href="css/normalize.css">

<style>

  * {box-sizing: border-box; }

  #container { width: 800px; margin: 0 auto; height: auto;}

  #content { }

  #leftcolumn { font-size: 1em; width: 300px; height: 500px; display: inline-block; background: red; }

  #main { width: 500px; height: 500px; display: inline-block; background: blue; }

  #leftcolumn2 { width: 500px; height: 500px; display: inline-block; background: green; }

  #main2 { width: 300px; height: 500px; display: inline-block; background: orange; }

  #foot { width: 800px; height 600px; display: inline-block; background: purple; }


</style>



</head>
<body>

<div id="container">

  <div id="content">

      <div id="leftcolumn"></div><!--
   --><div id="main"></div><!--
   --><div id="leftcolumn2"></div><!--
   --><div id="main2"></div>

  </div>

  <div id="foot"></div>

</div>


</body>
Shams Nelson
Shams Nelson
2,888 Points
Shams Nelson
Shams Nelson
2,888 Points

Also if I add any content to any of the inline block elements the whole things breaks.

Shams Nelson
Shams Nelson
2,888 Points
Shams Nelson
Shams Nelson
2,888 Points

Ok I need to take a zanex or something. I was really over-stressing about this. Karthikeyan (do you go by something for short btw? My full first name is Shamseddiin btw) was right. I should just use floats... For some reason I had perceived them as messier... but I've been researching it more and it actually seems to be quite the opposite huh? Maybe it's because all the webpages I edit at work are still on table-based layouts from the 90s lol.

Oh and there was a missing colon in the css and that's why the footer wasn't showing (what's the emoticon for ULTIMATE frustration?... grrr...