3 Column Layout(two of 3 columns won't float inside wrapper)

Question

The Obective here: Get column 2(skyblue) and column3(salmon) to float inside it's wrapper(green). The first column(lightgreen) is floated to the left, the second column(skyblue) is float left, and the third column(salmon) is floated right. What am I doing wrong here? Why are they sitting underneath my wrapper? I tried clear fixes and expanding the wrapper and can't get these columns to sit inside the container. Suggestions?

Demo - http://codepen.io/Chris-Brennan/pen/pJORJY

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 #wrapperGreen {
   margin: 0 auto;
   width: 960px;
   height: 700px;
   background: green;
 }
 #mainContentLightgreen {
   width: 520px;
   height: 700px;
   background: lightgreen;
 }
 #contentleftSkyblue {
   width: 200px;
   height: 600px;
   background: skyblue;
   float: left;
 }
 #contentrightSalmon {
   width: 200px;
   height: 600px;
   background: salmon;
   float: left;
 }
 #footer {
   height: 100px;
   background: black;
   clear: both;
 }

<div id="wrapperGreen">
  <div id="mainContentLightgreen">
  </div>

  <div id="contentleftSkyblue">
  </div>

  <div id="contentrightSalmon">
  </div>

  <div id="footer">
  </div>
</div>

@DCdaz I'm being advised to use floats for layouts. I'm reading the css mastery book by andy budd. Why shouldn't I use them? — Chris Brennan, Jul 21 '15 at 13:20
Float's are not for layout's. they break the flow and do not respect its sibling's they have a place but not in a column style layout. They are a heavily misunderstood and abused rule. check this out. will help you understand there use more http://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/ — , Jul 21 '15 at 13:24
this has some good clarification on the rules for layouts on it http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell — , Jul 21 '15 at 13:31
@DCdaz Thanks so much for that stackoverflow link. Definitely sheds light on the different techniques I can use to lay stuff out - pro/cons. — Chris Brennan, Jul 21 '15 at 14:45

score 1 · Answer 1 · answered Jul 21 '15 at 13:11

I dont know if I've misunderstood but I think its the order in which you are writing them?

Does this solve your problem?

<div id ="wrapperGreen">

<div id="contentleftSkyblue">
</div>

<div id="contentrightSalmon">
</div>

<div id="mainContentLightgreen">
</div>

<div id="footer">
</div>

</div>

score 1 · Answer 2 · answered Jul 21 '15 at 13:12

1

You don't set the float left in

#mainContentLightgreen{
width:520px;
height:700px;
background:lightgreen;  
float: left;
}

look at this sample

answered Jul 21 '15 at 13:12

ScaisEdge

131,976
10
91
107

score 1 · Answer 3 · 2015-07-21T13:43:09.993

Instead of float use display:inline-block; or display:table-row;

If CSS3 is an option and you are not to worried about compatibility you could use column-count.

Float is used literally for floating element's so that it break's the document flow.

Like for instance you wanted to float an image to the left and have text wrap around it.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.align {
  display: inline-block;
  vertical-align:top;
}
#wrapperGreen {
  margin: 0 auto;
  width: 960px;
  height: 700px;
  background: green;
}
#mainContentLightgreen {
  width: 520px;
  height: 700px;
  background: lightgreen;
}
#contentleftSkyblue {
  width: 200px;
  height: 600px;
  background: skyblue;
}
#contentrightSalmon {
  width: 200px;
  height: 600px;
  background: salmon;
}
#footer {
  height: 100px;
  background: black;
  clear: both;
}

<div id="wrapperGreen">
  <div id="mainContentLightgreen" class="align">
  </div>

  <div id="contentleftSkyblue" class="align">
  </div>

  <div id="contentrightSalmon" class="align">
  </div>

  <div id="footer">
  </div>
</div>

score 0 · Answer 4 · answered Jul 21 '15 at 13:10

0

I got this to work, if I'm understanding you correctly by nesting the div's inside of one another. For example the salmon div inside the green wrapper

    <div id ="wrapperGreen"><div id="contentrightSalmon"></div>
    </div>

answered Jul 21 '15 at 13:10

Grant Jones

13
6

3 Column Layout(two of 3 columns won't float inside wrapper)

4 Answers4