CODEWITHSUNDEEP
htmlcsscss-float
Bungle
Bungle

Reputation: 19712

Can I achieve this layout using CSS floats?

Like a lot of front-end developers I've met in my career, I understanding HTML, CSS, and JavaScript at a proficient level, but the finer points of CSS floats are still my Achilles' heel.

My most recent project has a simple layout that looks like a perfect candidate for improving my understanding of floats. It's trivial to achieve with absolute positioning, but I'd like to determine whether floats can accomplish the same.

Here's a simplified mockup of the desired layout:

simple mockup

I set up a JSBin example as a good starting point:

http://jsbin.com/UPUzUWU/1/edit?html,css,output

I've spent about 20 minutes playing around with which boxes are floated, how they're floated, which are cleared, how they're cleared, and even the ordering of the HTML. I've gotten kind of close, but no cigar.

Is anyone able to make this work without resorting to absolute positioning (reordering HTML is OK if needed)? If so, can you also do your best to explain the principles behind it?

Thanks!

Edit:

Sorry, I should have clarified - while reordering the HTML for the boxes is fine, I'd rather not combine multiple boxes into common parent elements. Please assume that semantically, these will all hold content in the same level of the layout hierarchy (i.e., they're all semantic siblings), so ideally they won't share non-semantic parent elements that only exist for the purposes of simplifying styling.

Also, that approach allows for simply floating three elements left, which is too basic a solution to cast more light on how floats work.

Upvotes: 0

Views: 129

Answers (3)

Siva
Siva

Reputation: 386

Look at this JsFiddle.

    .box-holder {
  width: 300px;
  height: 200px;
  background-color: #fff;
  position: absolute;
}

.box {
  width: 100px;
  float: left;
}

.box-square {
  height: 100px;
}

.box-tall {
  height: 200px;
}

.box-1 {
  background-color: #eee;
  float:left;
}

.box-2 {
  background-color: #ddd;
    float:left;
    position: absolute;
    top: 100px;
}

.box-3 {
  background-color: #ccc;
}

.box-4 {
  background-color: #bbb;
}

.box-5 {
  background-color: #aaa;
}

Upvotes: 0

Ani
Ani

Reputation: 4523

Here: http://jsbin.com/UPUzUWU/11/edit

 <div class="box-holder">
    <div class="vertdiv">
     <div class="box box-1 box-square">1</div>
     <div class="box box-2 box-square">2</div>
    </div>
    <div class="box box-3 box-tall">3</div>
    <div class="vertdiv">
      <div class="box box-4 box-square">4</div>
      <div class="box box-5 box-square">5</div>
    </div>
 </div>

CSS

.vertdiv{
   float:left;
 }

 .box-tall {
   float: left;
   height: 200px;
 }

Using Percentage: http://jsbin.com/UPUzUWU/13/edit

CSS

.box-square {
   width:100%;
   height: 50%;
 }

 .box-tall {
    float:left;
    height: 100%;
    width:34%;
 }

 .vertdiv{
   float:left;
   width:33%;
   height:100%;
 }

Upvotes: 3

Sergei Beregov
Sergei Beregov

Reputation: 738

Here is the full height & width and fully responsive solution: http://jsbin.com/upAFigEp/2/edit

Upvotes: 1

Related Questions