三栏CSS布局

Question

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!

Answer 1

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.

Answer 2

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