Full width CSS questions

Hey guys,

I'm currently working on a modern design webpage, and I need help with a couple CSS questions about it.

The first element of each section is a horizontal strip over the whole width, with a background img or color. The height is not set, as it should autocratically contain the height of the child element. And this background element has a top and bottom padding of (in this example) 20px.

<div class="background">
</div>

HTML:

The child element of this background element is a container that has a width (in this example) of 1000px. The L and R margin of this element is set to auto, so it's in the center.

<div class="background"
    <div class="container">
    </div>
</div>

HTML:

My questions are:

1. How can I make it that the height of DIV:container is as large and contain all the elements within?

- And so takes the height of the DIV:background with it, + the 20px padding ofcours.​

2. How can I best place elements inside the container?

- Like a logo spaced to the left top of the container, or a menu pinned to the right bottom of the container, or placement by pixel distance, etc.​

3. Any tips to make it good accessible to mobile or tablet users?​

 

Not sure I follow your question -- unless you've got floats inside .container you already have an auto-sizing inner and a auto-sizing outer.

 

Indeed I had, but this made the auto-height not work. So what is the best way to place elements in the DIV.container? (Fixed to a side or a top/bottom etc.)

 

If you are trying to use floats inside the inner one, you need to add a float wrapping behavior to it. The easiest of these is:

overflow:hidden; /* wrap floats */
zoom:1; /* trip haslayout, wrap floats legacy IE */

Code (markup):

Add that to your .container, and it will now contain any floats inside it. The other way is to use a 'clearing DIV' or a 'clearfix' class -- both of which are outdated nonsense I advise against.

You could also use negative margins or predictive padding, but that would really depend on what your CONTENT is... which is usually why I make semantic markup of the content BEFORE putting DIV in the document.

 

'clearing DIV', you mean:

div.clear {
   clear: both;
}

<div class="background">
   <div class="container">
      <p>content</p>
      <div class="clear"></div>
   </div>
</div>

Code (markup):

This clear:both works well! Problem with the overflow: hidden is that some padding of content is cut off.

Other problem I'm still having is that when I give content with a float a top or bottom margin it isn't shifting vertically inside the container... Howcome, and how can I solve this?

 

I'd have to see what you have for content to say, you just aren't showing enough of what you are doing.

Though really 'clearing DIV' reeks of "what is this, 2001". Unless you're doing something stupid like absolute positioning and/or fixed positioning elements inside the container, there's no real reason for it.