CODEWITHSUNDEEP
htmlcsslayoutcss-float
Juan
Juan

Reputation: 63

How to get css 3 column layout with floats and no margins?

I'm not very experienced with css and I encountered the following issue while trying to do a layout with fixed-width left and right columns, and a dynamic middle one.

The only way I was able to accomplish this was using margins on the middle div, to avoid the overlapping with the side columns. I imagine that there's a cleaner way of achieving this, but I haven't been able to find a solution for it yet.

See jsfiddle here with margin left and no margin on the right: http://jsfiddle.net/juansg_eng/BCJ6C/119/

HTML
<div class="left">With margin</div>
<div class="right">No margin</div>
<div class="middle"></div>

css
.left { float: left; width: 134px; height: 191px; background-color:#0000ff; opacity: 0.5}
.middle { height: 50px; background-color: #ff0000; margin-left: 134px}
.right { float: right; width: 183px; height: 191px; background-color:#ffff00; opacity:0.5}

thanks!

Upvotes: 1

Views: 288

Answers (3)

Paulie_D
Paulie_D

Reputation: 115047

flexbox can do that. No floats or margins required.

* {
  margin: 0;
  padding: 0;
}
.main {
  height: 191px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border: 2px solid green;
}
.main > div {
  border: 1px solid grey;
}
.left {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 134px;
  -ms-flex: 0 1 134px;
  flex: 0 1 134px;
  background-color: #0000ff;
  opacity: 0.5
}
.middle {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  height: 50px;
  background-color: #ff0000
}
.right {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 183px;
  -ms-flex: 0 0 183px;
  flex: 0 0 183px;
  background-color: #00ff00;
  opacity: 0.5
}
<div class="main">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

Upvotes: 1

Sean Murrin
Sean Murrin

Reputation: 125

.left { float: left; width: 134px; height: 191px; background-color:#0000ff; opacity: 0.5}
.middle { float:left; width: calc(100% - (134px + 183px)); height: 50px; background-color: #ff0000;}
.right { float: right; width: 183px; height: 191px; background-color:#ffff00; opacity:0.5}

Upvotes: 0

Samir Selia
Samir Selia

Reputation: 7065

Adding display: flex; to middle container should do the trick.

Do check the browser support.

.left {
  float: left;
  width: 134px;
  height: 191px;
  background-color: #0000ff;
  opacity: 0.5
}
.middle {
  height: 50px;
  background-color: #ff0000;
  display: flex;
}
.right {
  float: right;
  width: 183px;
  height: 191px;
  background-color: #ffff00;
  opacity: 0.5
}
<div class="left">With margin</div>
<div class="right">No margin</div>
<div class="middle"></div>

Reference link

Upvotes: 0

Related Questions