0

I asked and had answered this question about a three-column-layout with a overhanging and floating logo here:

Three Column CSS Layout

The answer turns out to be problematic though because CSS's "calc" feature is so unsupported, especially on mobile, causing the three columns to pile up to the left on smaller devices. So what might be an approach to solving this three-column layout problem without using calc?

HTML:

<body>
    <div class="container">
        <div class="topcontain cf">
            <div class="topleft">testing left</div>
            <div class="topcenter"><img class="" src="http://s3.postimg.org/4smfaxjtb/toutdemo.png"></div>
            <div class="topright">testing right</div>
        </div>
        <div class="bodypart">
            <div class="logo"><img src="http://s3.postimg.org/o974xgexb/demologo.png"></div>
            <div class="bodycopy">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, voluptas, nobis consequatur natus odit incidunt doloribus ipsa cum commodi dolor nostrum id saepe illo harum provident explicabo pariatur autem. Quam.</p>
                ETC...
            </div>
        </div>
    </div>
</body>

...and the css:

.container {
        text-align: center;
    }
    .topcontain {
        width:80%
        text-align:center;
        /*overflow: hidden;*/
        border:1px solid #f00;
        height:75px;
    position:relative;
    }
.topcontain > div {     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
    .topleft {
        /*margin:auto;*/
        width:35%;
          width: calc(50% - 128px); /*not working on mobile, safari*/

        float:left;
        border:1px solid #00f;
    }
    .topcenter {
        width:256px;
        float:left;
        border:1px solid #0f0;
    }
    .topright {
        float:right;
        width:35%;
        width: calc(50% - 128px); /*not working on mobile, safari*/

        border:1px solid #ff0;
    }

    .bodycopy {
        text-align:left;
    }
.logo { clear: left; }

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Fiddle here: http://jsfiddle.net/Znz2P/10/

Community
  • 1
  • 1
Raydot
  • 1,458
  • 1
  • 23
  • 38

2 Answers2

0

My suggestion, because I have run into this same problem several times, would be to refactor your CSS around media queries. In addition, I would recommend not using "standard" media queries as these negatively affect portability long-term. Instead, start with a preview of the page at the largest display size that you are planning on designing for, then shrink the width of the window until it "disrupts" the aesthetic that you have created. This is where the first media query goes, and you can create "custom" rules here for the display of the side column divs.

NOTE: This method works best if you use em's as a unit of measure.

Hope this helps.

JDQ
  • 443
  • 7
  • 11
  • I see what you're saying, but this problem only occurs on mobile and not even on every mobile device. There are media queries (not in the fiddle), the biggest use being to shrink the size of header image and change the calc'd dimensions accordingly. The use of px is only in this header, it's ems everywhere else. HTH – Raydot May 21 '14 at 20:52
  • Some might frown on it because it "violates" the MVC paradigm, but you could also get the width of the window and resize the width of the divs programmatically using jQuery. I can give you an example if this sounds like and option you might want to explore. – JDQ May 21 '14 at 23:58
  • If you are dedicated to a CSS-only fix however, you may use a "nesting" structure for the three divs to ensure that they do not break the layout when resized. display: table on the outermost div and display: table-cell on the child divs with the existing structure might also resolve the issue. – JDQ May 22 '14 at 00:02
0

You can use display: table / table-cell.

So, for the wrapper, you set display: table; For the 3 divs, you set display: table-cell; For the middle div, you set width: 256px;

Being table-cells, the other 2 divs will have equal widths -> (wrapper width - 256) / 2

.topcontain { display: table; }
.topcontain > div { display: table-cell; }
.topcenter { width: 256px; }

http://jsfiddle.net/Znz2P/14/

RazvanDH
  • 762
  • 7
  • 8
  • I was unclear in not repeating this part from the initial post. That logo at the top needs to hang over the header. The triangular part or the logo should extend past the top of the visible top row. Cleaned up the Fiddle a little to try to make that more clear. – Raydot May 21 '14 at 22:25
  • Tried this also but it didn't quite work: http://stackoverflow.com/questions/16034397/css-calc-alternative – Raydot May 21 '14 at 22:25
  • While none of these responses fully solved my problem Razvan your answer was the most technically proficient. Thanks all for your help! – Raydot May 22 '14 at 23:50