Create a multi-div, centered, responsive header - html

Question

As simple as it must be, there doesn't appear to be anything at this site that addresses this exactly as shown.
I've tried everything I can image, without satisfaction. Likewise, I'm disappointed with all the extra code that finds its way into my page when I adapt methods designed for slightly different scenarios.
This is essentially what I want to achieve:
full-screen and resized screen responsive layouts http://q-beans.ca/header/headerSKETCH2.png
Please note in (2), the resized version, that the header background increases in height to accommodate the floated blue div. The logo is unchanged in size. Only the rightmost, blue div decreases in width after the screen gets below 660px.
In my attempts, the centered content below the header remains centered as it should. The header, however, has not been willing to cooperate. Surely there is a concise, valid way to code the header without javascript that covers what I've been missing.

Answer 1

Demo goes here: Fiddle Demo
HTML
<div class="page-content">
<header>
<div class="header-content">
<div class="logo">LOGO HERE</div>
<div class="content">HEADER CONTENT HERE</div>
</div>
</header>
</div>
CSS
header {width:100%;background-color:gray;padding:20px 0;}
header .header-content {width:880px;margin:0px auto;}
header .logo {float:left;width:220px;height:50px;background-color:lightgreen;}
header .content {margin-left:220px;height:50px;background-color:cyan;}
#media screen and (max-width:900px) {
header .header-content {width:auto;margin:10px auto;min-width:340px;}
header .logo {float:none;margin:10px auto;}
header .content {margin:10px;width:auto;}
}
Say What???
By floating the fixed-width logo to the left, and setting that width as the main content's fixed margin-left value, we get the header content element to be responsive, and basically take over the [headerWidth - logoWidth] leftover :-)

Answer 2

First off the header should have no set height. that way when the elements stack the header will expand. second, in your media query, set the blue and green element to width:100%. that way they will stack.
the width you should define in PX is your container element, the one that has margin 0 auto with an 800px width. In your media query just make that width 320px. that way green and blue elements will expand 100 percent to width 320px.
get it? got it? good

Answer 3

DEMO: http://jsfiddle.net/kougiland/dx38K/1/
<section>
<div>left</div>
<div>right</div>
</section>
The css
#media screen and (max-width:600px) {
body { background:red; }
}
#media screen and (max-width:340px) {
body { background:black; }
section div {display: block;
clear: both;
margin: 0 auto;
float: none!important;}
}
*{
-webkit-box-sizing:border-box;
}
section{
text-align:center;
color:white;
width:100%;
max-width:880px;
margin:0 auto;
}
section div {
float: left;
padding:20px;
}
section div:nth-child(1){
width:30%;
max-width:220px;
height:60px;
background:red;
}
section div:nth-child(2){
width:70%;
max-width:660px;
height:60px;
background:green;
}
DEMO: http://jsfiddle.net/kougiland/dx38K/1/
UPDATE: PLEASE NOTE THAT YOU HAVE TO RESIZE THE JSFIDDLE RUNVIEW TO SEE IT IN ACTION

Answer 4

I assume that you have done all the coding related to the page, making all the divisions and other stuff.
Now, for the header to resize itself when the browser size goes below a certain threshold(by resizing the browser or simply using ipad or iphone,etc):
In your page,
In the head section, add:(generally, a good practice for a responsive site)
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="_css/screen_styles.css" /><!-- for general styling of divisions-->
<link rel="stylesheet" type="text/css" href="_css/screen_layout_large.css" /><!-- for large normal screen sizes-->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="_css/screen_layout_medium.css" /><!-- for devices like ipad and other tabs -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="_css/screen_layout_small.css" /><!-- for devices like phones -->
First of all, lets say for your large screen, i.e. screen_layout_large.css
.header{
height: 80px;/*let's say that the height of the header and container, both are themselves 80px*/
......
}
.logo{
display:block;
float:left;
position:absolute;
width:220px;
height:80px;/* <= header height :whatever you want it to be*/
}
.content{/*the right part of the header*/
max-width:660px;
float:right;
height: 80px;
}
Then, let's say your screen size goes down to 350px,
it will automatically use the screen_layout_small.css
in which you have:
.header{
height: 135px;/*( >= (.logo height) + (.content height)) : see below*/
....
}
.logo{
display:block;
float:left;
position:absolute;
width:220px;
height:60px;/*because you might want to reduce the size of your logo for smaller screens*/
}
.content{
min-width:320px;
float:right;
height: 75px;/* same reason again*/
}
Any further help or clarification required, please leave a comment.
Ok, let me try one new thing to see if we are on the same page.
In your page, I think you already have divs like these:
<div class="header">
<div class="container">
<div class="logo">
</div>
<div class="content">
</div>
</div>
</div>
Now, whatever you want to extend in height to accomodate the floated blue div, in this case, the header for that matter.
Modify the structure of the code like this:
<div class="header">
<div class="container">
<div class="logo">
</div>
<div class="content">
</div>
<div class="clearfix">
</div>
</div>
<div class="clearfix">
</div>
</div>
Now, in your screen_styles.css or main.css(wherever you do all the styling):
.clearfix{
clear:both;
line-height:1px;
}
What it does is, the outermost page container extends down to encompass that div. Since that div appears after both of the individual divs of logo and content and itself doesn't have a float, the outermost page container is forced to increase its height to encompass that element.
Is that what you were looking for?