Question

Hi I am trying to create a responsive layout where I have three different size elements and I want an equal margin on both sides of middle element for all screens.

Here is my HTML and CSS

<section class="container">
    <div href="/" class="pull-left logo"><img src="/images/logo.jpg"></a>
    <div class="slogan pull-left"><img src="/images/slogan.jpg"></div>
    <div class="pull-left support"></div>
</section>

<style>
 .pull-left
{
  float-left;
}
.slogan 
{
  margin: 0 17%;
}    
</style>

Since logo and support sections are of fixed size. Above Css works fine for one resolution but as screen size goes down the margin doesn’t remain same.

Any ideas how to achieve that?

EDIT: Here is the fiddle. http://jsfiddle.net/VdYua/22/
Initially there is an equal margin on both side of .slogan div. But on re size last div goes to next line. I want the margin to be decreased without braking layout.

Answer 1

Are you looking for something like this?

HTML:

<div class="centered">This is some content in the centered DIV</div>

CSS:

.centered { background: #888; margin: 0 auto; width: 50%; }

Using margin: 0 auto will center the elements horizontally, meaning that it will have “Equal margin on both sides”

You do have to set a width on elements when using the above method, but as shown you can use percentage widths (as I image you may well be for a responsive layout)

You cannot however use this technique on floated elements, so you may be looking to add something like this to your CSS:

.container { margin: 0 auto; width: 50%; }

If I have misunderstood your question please let me know.

EDIT: In response to the comment below I think I have managed to achieve what you’re looking for, see this fiddle

HTML:

<section class="header">

  <div href="/" class="logo"><img src="/images/logo.jpg" /></div>

  <div class="slogan"><img src="/images/slogan.jpg" /></div>

  <div class="support"></div>

</section>

CSS:

.header { padding: 0 50px 0 300px; position: relative; }

.logo, .support { background: red; height: 50px; position: absolute; top: 0; }
.support { background: blue; right: 0; width: 50px; }
.logo { left: 0; width: 300px; }

.slogan { background: black; height: 50px; margin: 0 auto; width: 50px; }

The positioning/padding aspect of things isn’t particularly pretty (if the width of .support or .logo change, you have to change that in the css) however I think this is the only safe way of doing it with pure HTML/CSS in a cross browser way (I’d be interested to see anyone elses take on it though), the important this is that it works and is completely valid.