css: how to build centered div with minimum spacing on the left

问题

so the past days i tried to achieve the following:

the idea being to have a div (red) that is ultimately centered (using margin:auto;), and on the same level (x-axis) another div that has a fixed size (blue).

on a huge enough display, maximized, it looks great. now the fun part is when having a smaller screen and/or resizing the window. because of the auto margin, one of the divs overlaps the other:

this is what i want to prevent. (in explanation: red being the menu, blue being the logo)

so the first idea was to shift the red div the needed pixels of the blue div to the right, using padding-left:??px;

but that makes the red div no longer center itself absolutely, but padded ??px to the right. figuratively centered in an extra box (grey).

second idea being to create another (transparent) div on the right of the red div. but that makes the min-width of the whole site become out of bound:

in other words: the scroll bar becomes visible far to early. it's ought to appear just when the window is smaller than the sum of pixels of the red and blue div together. and not, like in img 4, where it appears just when the window is smaller than the sum of pixels of the red div and both divs right and left from it).

so what i want is that: two divs, not overlapping (even when resizing), the right one at a fixed size, the left one in the center of the window, whithout creating a ghost div, creating blank space on low resolutions. oh and please no javascript, if possible.

i hope my explanations helped a bit getting my idea. and i furthermore hope someone with a great idea or with an overlooked feature can help me out.

回答1:

I take it back... it's marginally possible... with a lot of hackish coding...

http://jsfiddle.net/7myd4/2/

http://jsfiddle.net/7myd4/2/show

There you will find the code and the demo. It involves a wrapper, padding, relative positioning, and a really hackish layout. :P

EDIT:

looking back at this answer from over two years ago... I've come to the conclusion that this answer is terrible.

I've updated it with code samples and a new demo (only thing different is formatting changes and moving inline styles to classes)

HTML

<div class="firstdiv"></div>
<div class="seconddiv">
    <div class="innerdiv"></div>
</div>

CSS

body{
  padding:10px 0px;
}

.firstdiv {
    background-color:#ddd;
    position:fixed;
    left:0px;
    width:200px;
    height:200px;
}

.seconddiv {
    margin:0 auto;
    width:300px;
    height:150px;
    padding-left:400px;
    position:relative;
    left:-200px;
}

.innerdiv {
    background-color:#ccc;
    width:300px;
    height:150px;
}

Demo: http://jsfiddle.net/7myd4/55/show
Source: http://jsfiddle.net/7myd4/55/

回答2:

use Javascript to change the width of the div based on the window width. or use css stacks to check the max-width of the screen and have css for that size.

http://api.jquery.com/width/

http://api.jquery.com/resize/

or check out this stack.

How to dynamically change image/div dimensions based on window size?

来源：https://stackoverflow.com/questions/6927854/css-how-to-build-centered-div-with-minimum-spacing-on-the-left

标签

css

html

center