Question

I am working on a new design in HTML5/CSS3 and it has been a while since I last worked with html more than for writing content, not layout.

The thing I am trying to achieve is a “full-width” or rather “80% width” design so that it fits the browser size down to 800px. (min-width).

A part of the content will contain a navigation block placed to the right (fixed size, say 300px), I have achieved this by using float although I have learned to hate float because of the “clearfix” issue, bur for the lack of better.

To the left of it I wanted the content to take up space to the right floating element.

However if that content grows beyond the width then it pushes the right floated element down.

So something like:

   -----------------------------------------------------------
          |                 Header                    |
          |                <header>                   |
          |-------------------------------------------|
   <-10%->|         <- Fill ->            |<- 300px ->|<-10%->
          |                               |           |
          |         <section>             |  <aside>  |
   -----------------------------------------------------------

Section (id=articles) is set to:

margin: 0 0 0 30px;
display: inline-block;
float: left;

Aside (id=sidebar) is set to:

margin: 0 30px 10px 30px;
width: 290px;   

border:1px solid #6B6B6B;

border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;

box-shadow: 0px 0px 2px 1px #6B6B6B inset;

display: inline-block;
float: right;

Ways of fixing it:

• display: table and table-cell, works but it adds extra tags I would like to avoid, also not sure that works everywhere?
• flexbox? well so I thought but having issues with it, but it is not widely supported anyways.
• Let all have fixed width.
• Let all have dynamic width. (ohh boy)
• Tables, but we know that discussion all to well.

Now ill properly work on with the first one on that list as that is the only thing that currently let me achieve the goal, but I would like to see if there wasn’t a more clean way.

Answer 1

How about something like this? Create a container for the left and right pieces. Provide a right margin to make room for the right container. You could float it, but I absolutely positioned it because you hate floats =).

http://jsfiddle.net/Z62f2/

div { border: 1px solid gray; width: }
#container { width: 80%; min-width: 600px; margin: 0 auto;  }
#header { height: 100px; }
#content { position: relative; }
#left { margin-right: 300px; height: 1000px; }
#right { width: 300px; height: 500px; position: absolute; top: 0px; right: 0px; }

<div id="container">
    <div id="header">Header</div>
    <div id="content">
        <div id="left">Left</div>
        <div id="right">Right</div>
    </div>
</div>