4

I have two divs formatted as panels. One is the main panel whereas the other is something like a sidebar. I would like the sidebar to float to the left, but the latter is embedded inside the main div. I want it to display next to the main panel, rather than inside it.

I know I could float the sidebar left, the main panel right and add some more content after them and use clear: both to make the page resize and scroll properly; this sounds like a hack, however, and it requires specifying the size of both panels. If I could float just the sidebar to the left, then the main panel would size itself automatically to cover the rest of the page.

My HTML code at the moment looks something like this:

<div id="sidebar" class="panel">
    Sidebar
</div>

<div id="content" class="panel">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
</div>

And the CSS of interest is:

#sidebar {
    float: left;
    width: 30%;
}

In the screenshot below, one can easily see that the sidebar is floating to the left, but is somehow inside the main panel. In the HTML code, however, the sidebar is clearly outside the main panel. How can I fix that without having to use float: right on the main panel?

Ugly Result

Improve this question
6
  • use float: left on the main panel? Commented Sep 13, 2017 at 8:57
  • U need to clear floating divs Commented Sep 13, 2017 at 8:57
  • As I mention in my question, using float: left/right on the main panel would require specifying its size, since it won't cover the rest of the screen anymore. I know how to do it in an ugly way: main panel -> float right, sidebar -> float left, a hidden hr after those that uses clear: both and specifying the size for both panels manually. I am looking for an elegant solution that could work by specifying just the size of the sidebar. Commented Sep 13, 2017 at 9:00
  • you should read css-tricks.com/all-about-floats and developer.mozilla.org/en-US/docs/Web/Guide/CSS/… . then add overflow:hidden to #content and you will understand why it works ;) Commented Sep 13, 2017 at 9:03
  • use #content { overflow: hidden; } Commented Sep 13, 2017 at 9:03

3 Answers 3

Reset to default
3

If flexbox is an option, you can can make the main panel cover the rest of the horizontal space:

  1. Specify display: flex on the wrapper element (body in the demo below)

  2. Add flex: 1 to the main panel so that if grows to fit the remaining space available.

See simplified demo below:

body {
  display: flex;
}

.panel {
  border: 1px solid;
}

#sidebar {
  width: 30%;
}

#content {
  flex: 1;
}
<div id="sidebar" class="panel">
  Sidebar
</div>

<div id="content" class="panel">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you! Sounds like what I need. Give me a moment to try it.
Know that flexbox is not supported in IE9. I would not use this solution.
Ehm... Internet Explorer 9 is fairly old nowadays, isn't it?
IE11 has PARTIAL support for flexbox, which means it might not work correctly in IE11. It does not work at all in IE9, which has 0.16% market share globally.
1 

* {
  box-sizing: border-box;
}

#sidebar {
  width: 30%;
  float: left;
  border: 1px solid black;
}

#content {
  float: right;
  width: 70%;
  border: 1px dashed blue;
}

.clearfix:after,.clearfix:before {
  display: table;
  content: '';
  clear: both;
}
<div class="clearfix">
  <div id="sidebar" class="panel">
    Sidebar
  </div>

  <div id="content" class="panel">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
  </div>
</div>

If you want use floats - you should use float for both blocks, because float "creates own flow", that's why you got overlaying.

But I'd rather recommend you using flexboxes as it was mentioned before, because it's quite powerful technology which is widely supported. According to this site https://caniuse.com/#search=flexbox using flexbox is supported by 96.63% devices all over the world.

Improve this answer

6 Comments

Know that flexbox is not supported in IE9. I would use this solution.
@JoostS You can use @support query in css for usage newest features with backward compatibility. But in this case you should do a bit more work.
This solution is the "non-elegant" one I was talking about in my question (please, read carefully guys). Flexbox is what I was looking for.
@AngelosSfakianakis display: inline-block for both also is possible
If you use @support you also have to write the fallback. More code = higher cost = bad idea.
|
0

@Angelos you could use the old table layout so the left part has a fixed width and the right part takes up all the rest available space..

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.