13

This is one of those things I learned a long time ago and never thought much about if I was actually doing it the right way.

Let's say we have a structure like so:

<div id="wrapper">
  <div id="sideBar"></div>
  <div id="mainContent"></div>
</div>

Let's also say that wrapper has a width of 600px.

Should I float sideBar left, and mainContent right, or should I float them both left?

Additionally, if I set a fixed width for sideBar how can I make mainContent fill up the rest of the space similar to how a table works? If I set mainContent to display:inline-block and width:100% it moves down onto the next line :/

Note: In my specific scenario I do not want to use a table.

Hussein
  • 42,480
  • 25
  • 113
  • 143
The Muffin Man
  • 19,585
  • 30
  • 119
  • 191

4 Answers4

15

You display:block along with float:left to float divs next to each other.

Check working example at http://jsfiddle.net/FhL4u/2/

To make mainContent fill up rest of the space if only the first div width is known then use percentages on both sideBar and mainContent ex: 20% 80% instead of using fixed width. otherwise you will need a JavaScript solution to achieve a cross browser compatibility.

Check jQuery solution at http://jsfiddle.net/FhL4u/3/

Hussein
  • 42,480
  • 25
  • 113
  • 143
  • Semi-related article: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/. Be careful because older browsers (like IE7 or Firefox 2) don't handle inline-block well. You can also just float your content and use backgrounds in wrapper elements to make it look like the columns are of equal height. – Guttsy Apr 08 '11 at 03:12
  • Some critique: you don't need jQuery (overkill..) to do this, see my answer. Also, whenever you use `display: inline-block`, you should at least mention the fact that it doesn't work in IE7 without hacks (see the article linked by @Guttsy). Lastly, the first demo doesn't (quote from question) `"fill up the rest of the space similar to how a table works"`. Edit: Also, you have `position:inline-block` - fix to `display: inline-block`. – thirtydot Apr 08 '11 at 03:21
  • I changed inline-block to block. Read comment above. – Hussein Apr 08 '11 at 03:22
  • I see. Well, you might want to edit the first line of your answer, it's still talking about `inline-block`. – thirtydot Apr 08 '11 at 03:23
  • I feel like I'm picking on you now (sorry!), but: if you use `float: left` (or `right`..), then `display: block` is "automatically set". You don't need to explicitly add it. – thirtydot Apr 08 '11 at 03:27
  • The jquery solution doesnt seem to work with a width: 100% wrapper :( – Doug Cassidy Nov 04 '13 at 13:41
6

I'm modifying my answer from here: How to make an inline-block element fill the remainder of the line?

  • Only #sideBar is floated.
  • You can't really tweak this technique to have equal height columns later on, so that's why I asked before answering. (well, you can, but you need to use a background-image for faux columns)

See: http://jsfiddle.net/qx32C/37/

#wrapper {
    overflow: hidden; /* clear the float */
}
#sideBar {
    width: 100px;
    float: left;
    background: #f0f
}
#mainContent {
    overflow: hidden;
    background: #ccc
}

Why did I replace margin-left: 100px with overflow: hidden on #mainContent?

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
1

use display:flex for two div floats side-by-side

#wrapper {
    width: 600px;
    display: flex;
}
#sideBar {
    display: inline-flex;
    width: 25%;
}
#mainContent {
    width: 75%;
    flex: 1;
}
Naveen DA
  • 4,148
  • 4
  • 38
  • 57
Mike Tavish
  • 1,787
  • 2
  • 11
  • 17
1

using float left or right is not important. you have wrapper with the width of 600px. when you using float for both sidebar and contain inside the wrapper, you must make sure that the width of sidebar and contain (including margin and padding) equal or less than 600px. If not, the second element will be below the first one. Hope this helps ^^

Kent
  • 2,952
  • 2
  • 25
  • 42