Geek Answers Handbook

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

so in the past days I tried to achieve the following results:

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

On a large enough display, maximized, it looks great. Now the interesting part is having a smaller screen and / or resizing the window. due to the automatic field, one of the divs overlaps the other:

This is what I want to prevent. (in the explanation: red is the menu, blue is the logo)

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

but this makes the red div no longer centering itself completely, but padded px to the right. figuratively centered in an additional box (gray).

The second idea is to create another (transparent) div to the right of the red div. but this makes the minimum width of the entire site violated:

In other words: the scrollbar becomes visible far to early. it should appear only when the window is smaller than the sum of the pixels of the red and blue div together. and not, as in img 4, where it appears only when the window is less than the sum of the pixels of the red div and both divs are to the right and left of it).

so I want: two divs that do not overlap (even when resized), the right one at a fixed size, the left one in the center of the window, without creating a div duo, creating empty space at low resolutions. oh and please don't javascript if possible.

I hope my explanation helped me get my idea. and I also hope that someone with a great idea or missed opportunity can help me.

+4
source share
2 answers

I'm taking it back ... it's a little possible ... with lots of hacking coding ...

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

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

There you will find the code and demo. It includes a wrapper, padding, relative positioning and a truly hacker layout .: P

EDIT:

looking back at this answer more than two years ago ... I came to the conclusion that this answer is terrible.

I updated it with code samples and a new demo (the only difference 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/

+4
source

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

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

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

or check out this stack.

How to dynamically resize image / div based on window size?

0
source

More articles:


All Articles