1

I looked at a few other questions before posting this one. Nothing else does quite what I want.

My goal is to create a three column layout but with a "tout" hanging down from the center of the top of the page in the middle column. That tout should align with our corporate logo further down the page, with the text of the page flowing under that.

HTML is straightforward, three divs in a container followed by a div for the logo and then the body copy:

    <div class="container">
    <div class="topcontain">
        <div class="topleft">testing left</div>
        <div class="topcenter"><img class="floatimg" src="toutdemo.png"></div>
        <div class="topright">testing right</div>
    </div>
    <div class="bodypart">
        <div class="logo"><img src="demologo.png"></div>
        <div class="bodycopy">
            <p>Lorem ipsum dolor sit amet...etc</p>
        </div>
    </div>
    </div>

The CSS is based on what I thought was simple alignment:

.container {
    text-align: center;
}
.topcontain {
    width:80%
    text-align:center;
    height:125px;
}
.topleft {
    width:35%;
    float:left;
}
.topcenter {
    width:256px;
    float:left;
}
.topright {
    float:right;
    width:35%;
}

.bodycopy {
    text-align:left;
}

I put together a fiddle that semi-demonstrates my two problems:

  1. The layout works great at a large size but when the viewport narrows the right column drops and/or wants to tuck under the middle (easier to see in a browser than in a fiddle).
  2. Partly because of issue #1 it's sometimes hard keeping the tout and logo aligned.

Yes, eventually this will use fluid images but for the time being everything is static. Seems like a simple layout...but not!

Raydot
  • 1,458
  • 1
  • 23
  • 38

2 Answers2

2

I have updated your fiddle: http://jsfiddle.net/Znz2P/10/

on the left and right floated divs: 

width: calc(50% - 128px);

the right and left divs will share the remaining space, minus the set width of the center (divided by 2)

on the logo:

.logo { clear: left; }

and collapse the borders: 

.topcontain > div {     
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

I aslo added a 'clearfix' class, which is nice to have for containers that only sport floated elements.

superUntitled
  • 22,351
  • 30
  • 83
  • 110
  • The width calculation -- similar to what Taimour came up with -- is very very useful. My only issue with this solution is that at small widths the center col drops under the left and the right drops under the center. – Raydot Apr 16 '14 at 20:31
  • I would not worry about that. If you are designing for a screen that is less than 300px wide, put a min-width on the container, and those with smart watches will have to wait until you implement media queries. http://jsfiddle.net/Znz2P/13/ – superUntitled Apr 17 '14 at 14:33
1

Its because the center div has fixed width while the left and right have 35% width. You can either remove the width from the "topright" div or set max-width:30% on the "topcenter" class

Taimour Tanveer
  • 408
  • 3
  • 11
  • In that fiddle the right column is appearing to the left of the center column. I also tried your code change and while it holds together better the image and tout don't line up...am I missing something? – Raydot Apr 16 '14 at 19:45
  • 1
    Are you going to fill anything in the left and right columns? Also do you want three columns of equal size but want to place the tout in center? – Taimour Tanveer Apr 16 '14 at 19:53
  • Good question. The left and right columns only need to contain a few small things in the header. One word in the left column and a set of social media links on the right. So the size of the left and right can't go below a minimum, but other than that no issues. I also mentioned before that the center images will probably obviously need to scale in the long run... – Raydot Apr 16 '14 at 19:57
  • It helps a lot! Any way to keep the left and right cols from collapsing completely? min-width doesn't seem to do the trick... – Raydot Apr 16 '14 at 20:29
  • see if this one is good enough it causes trouble when width becomes less than 280px But thats the thing no device has width less than 280px http://jsfiddle.net/Znz2P/12/ – Taimour Tanveer Apr 16 '14 at 21:39